基于jQuery仿迅雷影音官网幻灯片特效
阅读：1849
时间：2018-02-01 03:26
分享一款基于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)
via：http://www.w2bc.com/Article/36030
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-3
闽ICP备12017094号-3