分享一款基于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

基于jQuery仿迅雷影音官网幻灯片特效的更多相关文章

  1. 基于jQuery仿淘宝产品图片放大镜特效

    在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jqu ...

  2. 一款基于jQuery仿淘宝红色分类导航

    今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览    ...

  3. 基于jquery仿360网站图片选项卡切换代码

    今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...

  4. jQuery仿迅雷图片轮换效果

    jQuery仿迅雷图片轮换效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  5. 基于jQuery的新浪游戏首页幻灯片

    分享一款基于jQuery的新浪游戏首页幻灯片,带左右箭头,选项卡缩略图,自动轮播切换的jQuery幻灯片代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <br>& ...

  6. 基于jQuery仿QQ音乐播放器网页版代码

    基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="m ...

  7. 基于jQuery仿去哪儿城市选择代码

    基于jQuery仿去哪儿城市选择代码.这是一款使用的jQuery城市选择特效代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="lin ...

  8. 基于jQuery仿Flash横向切换焦点图

    给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自 ...

  9. 基于 Azure IaaS 搭建企业官网的规划和实践

    本课程主要介绍了基于 Azure IaaS 搭建企业官网的案例分析和实践,实践讲解如何使用 Azure 门户创建虚拟机, 创建虚拟网络, 创建存储账户等. 具体包括项目背景介绍, 项目架构, 准备和实 ...

随机推荐

  1. 【JavaScript】浅析IIFE(立即执行函数表达式)的作用

    什么是IIFE IIFE就是立即执行函数表达式(Immediately-Invoked Function Expression) 为什么需要IIFE 应用IIFE有两个比较经典的使用场景, 第一就是在 ...

  2. MongoDB 2.6配置副本集,支持端口号修改和用户登录认证

    mongoDB系列之(二):mongoDB 副本集 Mongodb2.6副本集验证部署和认证 副本集有以下特点: 1. 最小构成是:primary,secondary,arbiter,一般部署是:pr ...

  3. 【C语言】练习1-20

    题目来源:<The C programming language>中的习题 练习1-20:编写程序detab,将输入中的制表符替换成适当数目的空格,使空格充满到下一个制表符终止的地方. 思 ...

  4. 获取*.jks签名的方法(Android studio)

  5. MongoDB 学习笔记(9)--- Limit与Skip方法

    MongoDB Limit() 方法 如果你需要在MongoDB中读取指定数量的数据记录,可以使用MongoDB的Limit方法,limit()方法接受一个数字参数,该参数指定从MongoDB中读取的 ...

  6. Oracle 12C -- 删除PDB

    删除PDB SQL> select con_id,pdb_name,status from cdb_pdbs; CON_ID PDB_NAME STATUS ---------- ------- ...

  7. Python——验证码识别 Pillow + tesseract-ocr

    至于安装教程在这里不再重复说了,可以参考博客,网上有大把的教程 https://blog.csdn.net/testcs_dn/article/details/78697730 要是别的验证码是如下类 ...

  8. mysql存储过程批量向表插入数据

    业务需要,往某个表中批量插入数据,使用存储过程插入 首先,要建立一张mysql表,表明为phone_number, 三个字段,id 自增,number 就是要插入的表格,is_used 表示十分已经使 ...

  9. mysql中and 和 or 联合使用

    以下是两张表,我只列出有用的字段. Table:student_score 学生成绩 sid(学生ID) cid(课程ID) score(分数) 5 1 50 5 2 110 5 3 64 5 4 n ...

  10. ACM会议列表与介绍(2014/05/06)

    Conferences ACM SEACM Southeast Regional Conference ACM Southeast Regional Conference the oldest, co ...