css部分:

*{
margin: 0px;
padding: 0px;
}
body{
margin: 0px;
padding: 0px;
text-align: center;
}
#banner{
margin: 0px auto;
width: 1030px;
height: 250px;
position: relative;
}
#banner div img{
width: 100%;
height: 100%;
}
#banner .img_bottom1{
left: 0px;
top: 50px;
width: 340px;
height: 150px;
z-index: 8;
position: absolute;
}
#banner .img_bottom2{
left: 630px;
top: 50px;
width: 340px;
height: 150px;
z-index: 8;
position: absolute;
}
#banner .img_left{
left: 0px;
top: 25px;
width: 400px;
height: 200px;
z-index: 9;
position: absolute;
}
#banner .img_center{
left: 265px;
top: 0px;
width: 500px;
height: 250px;
z-index: 10;
position: absolute;
}
#banner .img_right{
left: 630px;
top: 25px;
width: 400px;
height: 200px;
z-index: 9;
position: absolute;
}
.btn_left{
text-align: center;
position: absolute;
left: 0px;
top: 0px;
width: 265px;
height: 250px;
cursor:pointer;
background: #ccc;
z-index: 11;
opacity: 0.01;
}
.btn_right{
text-align: center;
position: absolute;
right: 0px;
top: 0px;
width: 265px;
height: 250px;
cursor:pointer;
background: #ccc;
z-index: 11;
opacity: 0.01;
}
.left{
left: 100px;
top: 100px;
width: 50px;
height: 50px;
z-index: 12;
opacity: 0.8;
color: white;
cursor:pointer;
display: none;
font-size: 40px;
background: black;
line-height: 50px;
position: absolute;
text-align: center;
border-radius: 70px;
}
.right{
right: 100px;
top: 100px;
width: 50px;
height: 50px;
z-index: 12;
opacity: 0.8;
color: white;
cursor:pointer;
display: none;
font-size: 40px;
background: black;
line-height: 50px;
position: absolute;
text-align: center;
border-radius: 70px;
}

jquery部分:

$(function(){

// 左右轮播点击事件
var $d=$("#banner>div");  
var mask=false;
$('.btn_left').click(function(){
if(!mask){
mask=true;
move(false);
}
})
$('.btn_right').click(function(){
if(!mask){
mask=true;
move(true);
}
})
// 通过数组来包装轮播div的width、height、left、top、z-index
function move(direction){
var arrw=[],arrh=[],arrt=[],arrl=[],arri=[];
for(var i=0;i<$d.length;i++){
arrw[i]=$d.eq(i).css('width');
arrh[i]=$d.eq(i).css('height');
arrt[i]=$d.eq(i).css('top');
arrl[i]=$d.eq(i).css('left');
arri[i]=$d.eq(i).css('z-index');
}
for(var i=0;i<$d.length;i++){
var n;
// 通过判断点击的方向来改变轮播的方向
if(direction){
//往左循环轮播
n=i-1;
if(n<0){n=$d.length-1}
}else{
//往右循环轮播
n=i+1;
if(n>$d.length-1){n=0}
}
// 通过取出数组值来动画赋给上个或者下个div的方式实现3D轮播效果
$d.eq(i).css('z-index',arri[n]).animate({
"width":arrw[n],
"height":arrh[n],
"top":arrt[n],
"left":arrl[n],
// 通过判断动画是否完成来达到调试bug的目的
},600,function(){mask=false});
}

}

})

jquery虎牙TV3D轮播特效的更多相关文章

  1. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  2. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  3. jQuery简单的轮播特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 基于jQuery游戏网站焦点图轮播特效

    基于jQuery的一款游戏网站焦点图轮播特效.这是一款带进度条定时切换,带缩略图切换的jQuery网站焦点图代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <cente ...

  5. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  6. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  7. jquery实现导航图轮播

    版权声明:作者原创,转载请注明出处! 下面的几个栗子是使用jquery实现Banner轮播的效果,直接将代码贴出来,从最初级没有任何优化和封装的写法,一直到最后一个栗子,一步步进行了优化,加大程序的可 ...

  8. jQuery.YesShow - 图片轮播插件(带图片放大功能)

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  9. 自适应图片宽度的jQuery焦点幻灯轮播代码

    自适应图片宽度的jQuery焦点幻灯轮播代码 注意要1.7.2版本的jq才支持点击后显示点击的图片,不然就是一直顺序播放 演示   XML/HTML Code <div id="sli ...

随机推荐

  1. 3359: [Usaco2004 Jan]矩形

    3359: [Usaco2004 Jan]矩形 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 8  Solved: 5[Submit][Status] ...

  2. spring mvc中的拦截器小结 .

    在spring mvc中,拦截器其实比较简单了,下面简单小结并demo下. preHandle:预处理回调方法,实现处理器的预处理(如登录检查),第三个参数为响应的处理器(如我们上一章的Control ...

  3. 【NFS项目实战二】NFS共享数据的时时同步推送备份

    [NFS项目实战二]NFS共享数据的时时同步推送备份 标签(空格分隔): Linux服务搭建-陈思齐 ---本教学笔记是本人学习和工作生涯中的摘记整理而成,此为初稿(尚有诸多不完善之处),为原创作品, ...

  4. windows下的python flask环境搭建

    在Windows中搭建flask框架分为如下几步 1. 下载ez_setup.py文件,然后在cmd中执行 链接:http://pan.baidu.com/s/1qXOSeHu 密码:jkbw pyt ...

  5. Android使用Aspectj

    使用AspectJ 集成步骤: 1.AS配置Aspectj环境 2.配置使用ajc编译 4.定义注解 5.配置规则 6.使用 7.注意事项 AS配置Aspectj环境.Aspect目前最新版本为 1. ...

  6. 使用shape来定义控件的一些显示属性

    Android中常常使用shape来定义控件的一些显示属性,今天看了一些shape的使用,对shape有了大体的了解,稍作总结 先看下面的代码: <shape> <!-- 实心 -- ...

  7. 【SF】开源的.NET CORE 基础管理系统 -介绍篇

    [SF]开源的.NET CORE 基础管理系统 -系列导航 1.环境: .NET Core SDK (https://www.microsoft.com/net/core) SQL Server or ...

  8. spring-AOP-基于@AspectJ切面的小例子

    条件: 1.jdk的版本在5.0或者以上,否则无法使用注解技术 2.jar包: aspectjweaver-1.7.4.jar aspectjrt-1.7.4.jar spring-framework ...

  9. node.js 模板 ejs 转

    node.js 模板引ejs. 搜了一把推荐用ejs的最多. 速度比对:http://www.cnblogs.com/fengmk2/archive/2011/04/28/2031971.html e ...

  10. [AndroidTips]startService与bindService的区别

    Service的生命周期方法比Activity少一些,只有onCreate, onStart, onDestroy我们有两种方式启动一个Service,他们对Service生命周期的影响是不一样的. ...