[科技]基于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)