<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>迅雷影音官网jQuery幻灯片特效 - 网页模板</title>
<link rel="stylesheet" href="css/css.css">
<style>
html,body{overflow:hidden;}
</style>
</head>
<body>
<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">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</div>
</div>
<!--[if IE 6]><script type="text/javascript" src="js/ie6png.js"></script><![endif]-->
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
(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)
</script>
<!--[if IE 6]>
<script type="text/javascript">
(function($){
var initHeight = $(window).height() - 60;
$('#content').css('height',initHeight + 'px');
$('#content').css('overflow',"hidden");
$(window).resize(function(){
initHeight = $(window).height() - 60;
$('#content').css('height',initHeight + 'px');
$('#content').css('overflow',"hidden");
})
})(jQuery)
</script>
<![endif]-->
</body>
</html>
迅雷影音官网jQuery幻灯片特效.zip
版权申诉
22 浏览量
2022-11-26
11:03:38
上传
评论
收藏 417KB ZIP 举报
迅雷影音官网jQuery幻灯片特效.zip （19个子文件） 
迅雷影音官网jQuery幻灯片特效 jiaoben3314 css img 
dot.png 1KB
s_img1.jpg 90KB sp_png24.png 11KB bg3.jpg 27KB txt_png24.png 26KB shadow_1.png 4KB
Thumbs.db 27KB s_img3.png 15KB s_img2.jpg 98KB s_img3_1.jpg 14KB bg2.jpg 28KB bg1.jpg 28KB shadow_2.png 3KB css.css 9KB images logo.png 4KB
index.html 7KB js jquery-1.10.1.min.js 91KB ie6png.js 7KB 迅雷影音官网jQuery幻灯片特效.jpg 54KB资源评论
