JQuery实现旋转轮播图
css部分
<style>
*{
margin:;
padding:;
}
.container{
width:100%;
height:353px;
margin-top: 20px;
}
.prev{
display: block;
width:50px;
height:50px;
background:url(img/prev.png);
position: absolute;
left: 110px;
top:192px;
z-index:;
}
.next{
display: block;
width:50px;
height:50px;
background:url(img/next.png);
position: absolute;
right:110px;
top:192px;
z-index:;
}
ul li{
position: absolute;
list-style: none;
display: none;
}
ul{position:relative;margin:0 auto;width:1000px;}
ul li img{width:100%;}
li.banner1{display:block;width:500px;left:100px;top:60px;z-index:}
li.banner2{display:block;width:599px;left:200px;top:40px;z-index:}
li.banner3{display:block;width:500px;right:100px;top:60px;z-index:}
</style>
html部分
<div class="container">
<a href="javascrpt:;" class="prev"></a>
<a href="javascrpt:;" class="next"></a>
<ul>
<li class="banner1"><img src="img/4.png" /></li>
<li class="banner2"><img src="img/1.png" /></li>
<li class="banner3"><img src="img/2.png" /></li>
<li><img src="img/3.png" /></li>
</ul>
</div>
JQuery部分
<script>
//0-1
//1-2
//2-3
//3-0 //0-3
//1-0
//2-1
//3-2 $(function(){
var arr = [];
$("ul>li").each(function(i,o){
arr.push({left:$(o).position().left,top:$(o).position().top,width:$(o).width(),zIndex:$(o).css("zIndex")});
});
var isPrev = true;
var prev_in = 3;
var prev_out = 2;
var next_out = 0;
var next_in = 3;
$(".prev").click(function(){
if(isPrev){
isPrev = false;
arr.push(arr[0]);
arr.shift();
$("ul>li").each(function(i,o){
if(i == prev_out){
$(o).fadeOut(200,function(){
isPrev = true;
});
}
else if(i == prev_in){
$(o).css({left:arr[i].left,top:arr[i].top,width:arr[i].width,zIndex:arr[i].zIndex}).fadeIn(200);
}
else{
$(o).css({zIndex:arr[i].zIndex}).animate({left:arr[i].left,top:arr[i].top,width:arr[i].width},200);
}
});
next_out = prev_in;
next_in = prev_out;
prev_in--;
prev_out--;
if(prev_out == -1){
prev_out = 3;
}
if(prev_in == -1){
prev_in = 3;
}
}
});
var isNext = true;
$(".next").click(function(){
if(isNext){
isNext = false;
arr.unshift(arr[arr.length-1]);
arr.pop();
$("ul>li").each(function(i,o){
if(i == next_out){
$(o).fadeOut(200,function(){
isNext = true;
});
}
else if(i == next_in){
$(o).css({left:arr[i].left,top:arr[i].top,width:arr[i].width,zIndex:arr[i].zIndex}).fadeIn(200);
}
else{
$(o).css({zIndex:arr[i].zIndex}).animate({left:arr[i].left,top:arr[i].top,width:arr[i].width},200);
}
});
prev_in = next_out;
prev_out = next_in;
next_out++;
next_in++;
if(next_out == 4){
next_out = 0;
}
if(next_in == 4){
next_in = 0;
}
}
});
});
</script>
JQuery实现旋转轮播图的更多相关文章
- jQuery自适应-3D旋转轮播图
3D旋转轮播图 本例源于(站长之家实例http://sc.chinaz.com/jiaoben/170215391070.htm) 其他相似示例(https://www.cnblogs.com/inc ...
- 基于jQuery的移动轮播图(支持触屏)
移动轮播图我看到两款, 一款是无线天猫的m.tmall.com,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似蘑菇街 <!doctype html> <h ...
- JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
- 用jQuery实现轮播图效果,js中的排他思想
---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- WPF特效-实现弧形旋转轮播图
原文:WPF特效-实现弧形旋转轮播图 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u013224722/article/details/77004 ...
- JS-特效 ~ 05. 缓动框架兼容封装/回掉函数/兼容透明度/层级、旋转轮播图、正则表达式、验证表单注册账号、
缓动函数中opcity 写百分值的值 JS一般不用小数运算,会照成精度丢失 元素的默*认透明度是 层级一次性赋值,不缓动 利用for…in为同一个父元素的子元素绑定属性 缓动框架兼容封装/回掉函数/ ...
- jQuery 简单滑动轮播图效果
一般页面简单轮播图效果用jQuery制作更加简单.我们来看看以下效果是如何来进行制作的. 其html结构下所示: <div id="box"> < ...
- 自实现PC端jQuery版轮播图
最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...
随机推荐
- input下拉带输入框
html5 自带的datalist实现 html代码: <input list="students"> <datalist id="students&q ...
- 自定义Maven Archetype模板
1. 目的 自定义Maven Archetype模板目的为了把自己辛苦搭建的基础项目可以作为模板, 方便以后可以快速的创建类似项目,免去每次搭建的麻烦 2.把基础项目打包生成archetype项目 在 ...
- MySQL命令行查询乱码解决方法
转自Agoly的博客,原文链接https://www.cnblogs.com/qmfsun/p/4846467.html 感谢博主Agoly这篇文章说的很详细很透彻. MySQL会出现中文乱码的原因不 ...
- 【尚学堂·Hadoop学习】MapReduce案例1--天气
案例描述 找出每个月气温最高的2天 数据集 -- :: 34c -- :: 38c -- :: 36c -- :: 32c -- :: 37c -- :: 23c -- :: 41c -- :: 27 ...
- tomcat去掉ContextPath
众所周知,项目打成war包直接放到webapps下启动tomcat后访问项目需要带上ContextPath,也就是war包的文件名,需要去除掉这玩意最简单的办法是将war包重命名为ROOT.war,为 ...
- BMCP位图图片压缩算法
什么是位图?位图也称像素图像或点阵图像,是由多个点组成的,这些点被称为像素.位图可以模仿照片的真实效果,具有表现力强.细腻.层次多和细节多等优点. 图片的压缩格式:在Windows系统中,我们常见的b ...
- opencv基础教程 之 图像基础和绘图
1,教程:感谢小强 2,用argparse传参数来显示一张图片 #!/usr/bin/python #linux系统 #coding=utf-8 import cv2 import argparse ...
- 关于URL隐藏index.php方法
在phpstudy上修改了php版本5.6以上后,tp5框架原URL重写模式发生变化.需要在public目录下的.htaccess作出如图修改,原理未知.
- 在Cyclone IVE中使用进位链的几个规则
最近在FPGA上做ps级的Delay line,所以认真剖析了一下Cyclone IVE4的布局布线延迟.这里说明CARRY链的几个特性规则,如有错误请各位大大指出,谢谢.(另外由于匆忙没有时间验证其 ...
- python正则表达式--match search方法
1.re.match函数 re.match 尝试从字符串的起始位置匹配一个模式,如果不是起始位置匹配成功的话,match()就返回None. (1)函数语法: re.match(pattern, st ...