jquery虎牙TV3D轮播特效
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轮播特效的更多相关文章
- 原生js和jquery实现图片轮播特效
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 原生js和jquery实现图片轮播特效(转)
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- jQuery简单的轮播特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 基于jQuery游戏网站焦点图轮播特效
基于jQuery的一款游戏网站焦点图轮播特效.这是一款带进度条定时切换,带缩略图切换的jQuery网站焦点图代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <cente ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- jquery实现导航图轮播
版权声明:作者原创,转载请注明出处! 下面的几个栗子是使用jquery实现Banner轮播的效果,直接将代码贴出来,从最初级没有任何优化和封装的写法,一直到最后一个栗子,一步步进行了优化,加大程序的可 ...
- jQuery.YesShow - 图片轮播插件(带图片放大功能)
jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes"> <ul> ...
- 自适应图片宽度的jQuery焦点幻灯轮播代码
自适应图片宽度的jQuery焦点幻灯轮播代码 注意要1.7.2版本的jq才支持点击后显示点击的图片,不然就是一直顺序播放 演示 XML/HTML Code <div id="sli ...
随机推荐
- 3359: [Usaco2004 Jan]矩形
3359: [Usaco2004 Jan]矩形 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 8 Solved: 5[Submit][Status] ...
- spring mvc中的拦截器小结 .
在spring mvc中,拦截器其实比较简单了,下面简单小结并demo下. preHandle:预处理回调方法,实现处理器的预处理(如登录检查),第三个参数为响应的处理器(如我们上一章的Control ...
- 【NFS项目实战二】NFS共享数据的时时同步推送备份
[NFS项目实战二]NFS共享数据的时时同步推送备份 标签(空格分隔): Linux服务搭建-陈思齐 ---本教学笔记是本人学习和工作生涯中的摘记整理而成,此为初稿(尚有诸多不完善之处),为原创作品, ...
- windows下的python flask环境搭建
在Windows中搭建flask框架分为如下几步 1. 下载ez_setup.py文件,然后在cmd中执行 链接:http://pan.baidu.com/s/1qXOSeHu 密码:jkbw pyt ...
- Android使用Aspectj
使用AspectJ 集成步骤: 1.AS配置Aspectj环境 2.配置使用ajc编译 4.定义注解 5.配置规则 6.使用 7.注意事项 AS配置Aspectj环境.Aspect目前最新版本为 1. ...
- 使用shape来定义控件的一些显示属性
Android中常常使用shape来定义控件的一些显示属性,今天看了一些shape的使用,对shape有了大体的了解,稍作总结 先看下面的代码: <shape> <!-- 实心 -- ...
- 【SF】开源的.NET CORE 基础管理系统 -介绍篇
[SF]开源的.NET CORE 基础管理系统 -系列导航 1.环境: .NET Core SDK (https://www.microsoft.com/net/core) SQL Server or ...
- spring-AOP-基于@AspectJ切面的小例子
条件: 1.jdk的版本在5.0或者以上,否则无法使用注解技术 2.jar包: aspectjweaver-1.7.4.jar aspectjrt-1.7.4.jar spring-framework ...
- node.js 模板 ejs 转
node.js 模板引ejs. 搜了一把推荐用ejs的最多. 速度比对:http://www.cnblogs.com/fengmk2/archive/2011/04/28/2031971.html e ...
- [AndroidTips]startService与bindService的区别
Service的生命周期方法比Activity少一些,只有onCreate, onStart, onDestroy我们有两种方式启动一个Service,他们对Service生命周期的影响是不一样的. ...