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 ...
随机推荐
- 错误:org.springframework.jdbc.support.SQLErrorCodesFactory - SQLErrorCodes loaded
使用spring+mybatis整合时报错:org.springframework.jdbc.support.SQLErrorCodesFactory - SQLErrorCodes loaded 错 ...
- html-webpack-plugin详解
引言 我们来看看主要作用: 为html文件中引入的外部资源如script.link动态添加每次compile后的hash,防止引用缓存的外部文件问题 可以生成创建html入口文件,比如单页面可以生成一 ...
- Webpack友好的错误提示插件friendly-errors-webpack-plugin
Friendly-errors-webpack-plugin 介绍 Friendly-errors-webpack-plugin识别某些类别的webpack错误,并清理,聚合和优先级,以提供更好的开发 ...
- Spring AOP获取方法的参数名称和参数值
aop配置: <aop:aspectj-autoproxy expose-proxy="true" /> @Before(value = "execution ...
- 获取Windows服务下当前路径的方法
获取Windows服务下当前路径的方法 获取当前运行程序路径 包含exe Assembly.GetExecutingAssembly().Location; D:\xxxxxx\bin\Debug\x ...
- 安装kafka过程及出现的问题解决
第一步:下载kafka安装包 下载地址:http://kafka.apache.org/downloads 解压 到/usr/local 目录 tar -zxvf kafka_2.12-2.2.0 第 ...
- uni-app 在input获取焦点(弹出软键盘后收起软键盘),页面不下滑,留下下方空白
加入收起软键盘时让页面回正 uni.pageScrollTo({ scrollTop: 0, duration: 0 });
- 怎样解决if __name__ == "__main__":下面的代码没有执行的问题
很多初学者可能在用pycharm运行代码时会出现if __name__ == "__main__":下面的代码没有执行的问题,出现这类问题的原因是unittest运行姿势造成的,如 ...
- wx:for获取 data-xxx 自定义的属性
今天在写wx:for循环时,在事件对象上e.target.dataset上一直拿不到自定义属性 data-id. 示例: <view wx:for='{{list}}' wx:key='{{it ...
- 2018-2019-2 网络对抗技术 20165328 Exp6 信息收集与漏洞扫描
目录 实验要求 基础问题回答: 实验过程: 各种搜索技巧的应用及DNS IP注册信息的查询 基本扫描技术 漏洞扫描--使用OpenVAS 实验感想 实验要求 (1)各种搜索技巧的应用 (2)DNS I ...