[科技]基于jQuery仿迅雷影音官網幻燈片特效
分享一款基于jQuery仿迅雷影音官網幻燈片特效迅。雷影音官網jQuery幻燈片特效是一款帶左右箭頭,索引按鈕切換的jQuery幻燈片代碼。效果圖如下:
實現的代碼。
html代碼:
<div class="wrapper"> <div id="content" class="content"> <div class="s_arr"> <a class="s_left png"></a><a class="s_right png"></a> </div> <div id="color_list" class="bg_colors"> <div class="bgs_box bgs_1"> <div class="wp"> <div class="img_area"> <div class="shadow png"> <div class="s_img"> </div> </div> </div> </div> <div class="footer"> </div> </div> <div class="bgs_box bgs_2"> <div class="wp"> <div class="img_area"> <div class="shadow png"> <div class="s_img"> </div> </div> </div> </div> <div class="footer"> </div> </div> <div class="bgs_box bgs_3"> <div class="wp"> <div class="img_area"> <div class="shadow png"> <div class="s_img"> </div> </div> <div class="shadow01 png"> <div class="s_img01"> </div> </div> </div> </div> <div class="footer"> </div> </div> </div> <div class="main"> <div id="txt_list" class="item_txt_box"> <div class="item_txt item_txt_1"> <div class="txt_info png"> <strong class="hd">迅雷影音5.1</strong> <h2 class="hd"> 精彩視界 樂無止境</h2> <p class="hd"> 迅雷看看華麗升級版,重磅來襲!</p> </div> <div class="detail"> <ul id="v_info"> </ul> <a href="" class="download_btn png">立即下載</a> <p> 想找舊版迅雷看看? <a href="#" target="_blank" class="chk_link">點擊查看 ></a></p> </div> </div> <div class="item_txt item_txt_2"> <div class="txt_info png"> <h2 class="hd"> 全新片庫 為您而來</h2> <p class="hd"> 海量資源,新鮮資訊,想看就看;<br /> 視頻類型清晰分類,劇集更新實時提醒。 </p> </div> <div class="detail other"> </div> </div> <div class="item_txt item_txt_3"> <div class="txt_info png"> <h2 class="hd"> 專業播放 盡享精彩</h2> <p class="hd"> 百種格式,高清視頻,一點就播;<br /> 看片搜片窗口分離,播放記錄云端同步。 </p> </div> <div class="detail other"> </div> </div> </div> </div> <div id="switch_box" class="switch_list"> <span class="on"></span><span class=""></span><span class=""></span> </div> <div class="foot_txt"> <script src="http://www.w2bc.com/scripts/2bc/_gg_970_90.js" type="text/javascript"></script> </div> </div> </div>
js代碼:
(function ($) { var initHeight = $(window).height() - 60, $colorList = $('#color_list').find('.bgs_box'), $txtList = $('#txt_list').find('.item_txt'), $switchList = $('#switch_box').find('span'), timer = null, key = 1; //IE6 bug $switchList.eq(0).addClass('on'); $txtList.eq(0).addClass('on'); $colorList.eq(0).addClass('on'); //高度調整 $('#content').css('min-height', initHeight + 'px') //視窗變化時 $(window).resize(function () { initHeight = $(window).height() - 60; $('#content').css('min-height', initHeight + 'px'); if ($(window).height() > 866) { $('#ft_area').addClass('pst_ft'); } else { $('#ft_area').removeClass('pst_ft'); } }) loadFinish(); $('#switch_box').on('click', 'span', function () { var stepIndex = $switchList.index($(this)); actFn(stepIndex); }).hover(function () { clearInterval(timer); }, function () { timer = setInterval(function () { actFn(key); }, 7000) }) $('.s_arr').on('click', 'a', function () { var step = $('.s_arr').find('a').index($(this)); $('#switch_box').find('span').each(function (i) { var css = $(this).hasClass("on"); if (css) { if (step == 0) { if (i == 0) { step = 2 } else { step = i - 1; } } else { if (i == 2) { step = 0; } else { step = i + 1; } } } }); actFn(step); }).hover(function () { clearInterval(timer); }, function () { timer = setInterval(function () { actFn(key); }, 7000) }) //底部位置調整 if ($(window).height() > 866) { $('#ft_area').addClass('pst_ft'); } else { $('#ft_area').removeClass('pst_ft'); } //輪播 function actFn(stepIndex) { var stepIndex = stepIndex; $switchList.eq(stepIndex).addClass('on').siblings().removeClass('on'); $colorList.stop().eq(stepIndex).animate({ opacity: 1 }, 800).css({ flter: "Alpha(Opacity=100)" }).siblings().animate({ opacity: 0 }, 800); $txtList.eq(stepIndex).addClass('on').siblings().removeClass('on'); key = stepIndex; $('.bgs_box').eq(key).find(".img_area").addClass('item_img_css3'); $('.bgs_box').eq(key).siblings().find(".img_area").removeClass('item_img_css3'); $('.bgs_box').eq(key).find(".footer").fadeIn(800); $('.bgs_box').eq(key).siblings().find(".footer").fadeOut(800); $(".item_txt").eq(key).addClass('item_txt_css3').siblings().removeClass('item_txt_css3'); key++; if (key == $txtList.length) { key = 0; } } //預加載banner動畫背景圖 function preloadImages() { var arrImage = []; var parLen = arguments.length; var cur = 0; for (var i = 0; i < parLen; i++) { arrImage[i] = new Image(); arrImage[i].onload = function () { if (cur == parLen - 1) { loadFinish(); } cur++; }; arrImage[i].src = arguments[i]; } } function loadFinish() { $txtList.eq(0).addClass('item_txt_css3'); $colorList.eq(0).find(".img_area").addClass('item_img_css3'); //自動輪播 timer = setInterval(function () { actFn(key); }, 7000); } })(jQuery)