文档章节

jquery无缝滚动轮播

衬fzy
 衬fzy
发布于 2017/08/01 12:04
字数 1076
阅读 144
收藏 0
<div class="ccyc0 tinzhi">
					<div class="ccyc both">
						<ul class="ccycul">
							<li><img src="images/aboulubo1.png"></li>
							<li><img src="images/aboulubo1.png"></li>
							<li><img src="images/aboulubo1.png"></li>
							<li><img src="images/aboulubo1.png"></li>
							<li><img src="images/aboulubo1.png"></li>
							<li><img src="images/aboulubo1.png"></li>
							<li><img src="images/aboulubo1.png"></li>
							<li><img src="images/aboulubo1.png"></li>
							<li><img src="images/aboulubo1.png"></li>
							<li><img src="images/aboulubo1.png"></li>
							<li><img src="images/aboulubo1.png"></li>
							<li><img src="images/aboulubo1.png"></li>
							<li><img src="images/aboulubo1.png"></li>
							<li><img src="images/aboulubo1.png"></li>
							<li><img src="images/aboulubo1.png"></li>
							<li><img src="images/aboulubo1.png"></li>
							<li><img src="images/aboulubo1.png"></li>
							<li><img src="images/aboulubo1.png"></li>
						</ul>
						<ul class="ccycul">
							<li><img src="images/aboulubo2.png"></li>
							<li><img src="images/aboulubo2.png"></li>
							<li><img src="images/aboulubo2.png"></li>
							<li><img src="images/aboulubo2.png"></li>
							<li><img src="images/aboulubo2.png"></li>
							<li><img src="images/aboulubo2.png"></li>
							<li><img src="images/aboulubo2.png"></li>
							<li><img src="images/aboulubo2.png"></li>
							<li><img src="images/aboulubo2.png"></li>
							<li><img src="images/aboulubo2.png"></li>
							<li><img src="images/aboulubo2.png"></li>
							<li><img src="images/aboulubo2.png"></li>
							<li><img src="images/aboulubo2.png"></li>
							<li><img src="images/aboulubo2.png"></li>
							<li><img src="images/aboulubo2.png"></li>
							<li><img src="images/aboulubo2.png"></li>
							<li><img src="images/aboulubo2.png"></li>
							<li><img src="images/aboulubo2.png"></li>
						</ul>
						<ul class="ccycul">
							<li><img src="images/aboulubo3.png"></li>
							<li><img src="images/aboulubo3.png"></li>
							<li><img src="images/aboulubo3.png"></li>
							<li><img src="images/aboulubo3.png"></li>
							<li><img src="images/aboulubo3.png"></li>
							<li><img src="images/aboulubo3.png"></li>
							<li><img src="images/aboulubo3.png"></li>
							<li><img src="images/aboulubo3.png"></li>
							<li><img src="images/aboulubo3.png"></li>
							<li><img src="images/aboulubo3.png"></li>
							<li><img src="images/aboulubo3.png"></li>
							<li><img src="images/aboulubo3.png"></li>
							<li><img src="images/aboulubo3.png"></li>
							<li><img src="images/aboulubo3.png"></li>
							<li><img src="images/aboulubo3.png"></li>
							<li><img src="images/aboulubo3.png"></li>
							<li><img src="images/aboulubo3.png"></li>
							<li><img src="images/aboulubo3.png"></li>
						</ul>
					</div>	
				</div>
					<img onclick="left()" class="about_anniul pre tinzhi" src="images/about_l.png">
					<img onclick="right()" class="about_anniur next tinzhi" src="images/about_r.png">
				</div>
	<style>
		.both{
			clear:both;
		}
		.ccyc0{
			width: 100%;
			background: rgba(0,0,0,0.5);
			overflow: hidden;/*隐藏了多余ul*/
		}
		.ccyc{
			position: relative;
			width: 500%;
		}
		.ccycul{
			width: 20%;
			float: left;
		}
		.ccycul li{
			width: 16.66%;
			float: left;
			margin: 0!important;
			padding: 1%;
		}
		.ccycul li img{
			width: 100%;
		}
	</style>
	<script>
     
    //无缝js轮播开始
	$('.ccyc').prepend($('.ccycul').eq(2).clone());//last最后;(这里是获取所有3个ul,从1开始计算所以开头插入的是3)
	$('.ccyc').append($('.ccycul').eq(1).clone());//first最前;(这里是获取所有4个ul,从1开始计算所以结尾插入的是2,因为3个的时候开头插入了ul所以1已经排在了2)
	var wit = $('.ccycul').width();//获取ul宽度
	console.log(wit);
	var jige = $('.ccyc').children().size();//获取ul个数5;上面最前面和最后面添加了一个,所以此时合为5个
	console.log(jige);
	$('.ccyc').css({left:-wit});//总共五个ul;此时移动了一个负ul宽,所以ul2个是当前视图;(ul1是最左边视图)
	var curidx =0;//声明初始的坐标,curidx0对应视图ul2;
    var mov = 1;//定义全局初始值后面要用
	function left(){
		$('.ccyc').animate({left:'-='+wit},800,function(){//点击后left等于当前left减一个ul宽度
                    //当点击后,会执行这个动画,把视口向左移动一个UL宽度的距离,就刚好像滚动一样
                    curidx+=mov;//curidx等于curidx加1
                    if(curidx===jige-2){//当坐标curidx等于3(curidx0相当于ul2此时就判断等于ul5时)的时候就表示移动到了最后
                        $('.ccyc').css({left:0-wit});//ccyc就left移动负一个ul宽,此时视图就是ul2就是初始位子(wit*0的时候没移动是ul1)
                        curidx=0;//此时curidx就归0
                    }
                    //如果已经移动到了最后一张图片,也就是末尾clone的1图片,就马上将视口设置为刚开始那样,因为同一张图片的变换人是看不出来的,然后再把坐标给设置回0.
               })
	}
	function right(){
		$('.ccyc').animate({left:'+='+wit},800,function(){//点击后left等于当前left加一个ul宽度
                    curidx-=mov;//curidx等于curidx减1
                    if(curidx===jige-6){//当坐标等于-1(curidx-1相当于ul1此时就判断等于ul1时【curidx0相当于ul2】)的时候就表示移动到了第一个
                        $('.ccyc').css({left:0-wit*3});//ccyc框就整体瞬间移动负的ul宽*3,此时视图就是ul4(wit*0的时候没移动是ul1)
                        curidx=2;//当前视图是ul4,所以对应curidx就应该是2(上面说了curidx0是ul2)
                    }
               })
	}
	var tim = setInterval(left,2500);//定义循环时间
    $('.tinzhi').mouseover(function(){//移入停止时间
    	clearInterval(tim);
    })
     $('.tinzhi').mouseout(function(){//移出定义循环时间
    	tim = setInterval(left,2500);
     })
	//无缝js轮播完
	</script>

```

© 著作权归作者所有

衬fzy
粉丝 0
博文 1
码字总数 1076
作品 0
成都
程序员
私信 提问
2013 年最好的 20 款免费 jQuery 插件

互联网上面有很多 jQuery 插件,这里我们收集的是 2013 年最好的 20 款免费 jQuery 插件,这些插件对设计者和开发者都有很大的帮助,希望大家能够喜欢:) 现今互联网市场上提供很多 jQuery...

oschina
2014/01/11
12.9K
24
6 个效果震撼的 jQuery 图片播放器

很多时候,尤其是当我们需要展示或者宣传自己的产品时,我们都会用到图片轮播的特效,但是,选择什么样的图片播放器更实用、更美观、更大气呢?下面就给大家推荐几款简单实用却又美观大气的j...

tp_wire
2012/07/04
6.5K
10
7 个简单实用的 jQuery 图片播放器

在网页特效中,我们经常会遇到需要循环播放图片的情况,比如首页上的广告轮播或者相册浏览等。如何简单的实现一款漂亮平滑的图片播放插件呢?下面就介绍几款非常不错的jQuery图片播放插件,希...

tp_wire
2012/08/14
7.5K
5
20 个响应式 web 设计的必备 jQuery 插件

日期:2012-9-12 来源:GBin1.com 响应式设计(responsive design)在近些年是非常流行的web设计,能够帮助你有效的针对不同设备的显示屏幕自适应的显示内容,大大的提高了用户的使用体验和web...

gbin1
2012/09/12
3.9K
4
分享10个 jQuery 的动态插件

在这篇文章中,我们将介绍一些我们收集的不错的动态插件,帮助你添加高级的特效和动态网页效果,希望大家喜欢! 1. jmpress.js 一个jQuery的impress.js实现,基于CSS3变化和过度效果。只支持...

gbin1
2012/03/19
2.1K
0

没有更多内容

加载失败,请刷新页面

加载更多

CRM、DMP、CDP都是什么?有什么区别?

Markter对CRM系统(Customer Relationship Management System,客户关系管理系统),营销自动化等概念都已经比较熟悉,也许DMP(Data Management Platform,数据管理平台)也多多少少有些了解。...

怡海软件-CRM
9分钟前
3
0
中台是什么,到底要解决什么问题?

故事的开始 这个最早由阿里在2015年提出的“大中台,小前台”战略中延伸出来的概念,最近在国内大热。阿里、腾讯、百度、京东、美团、滴滴等一众互联网巨头,从去年到今年,接连开始组织架构...

喵二狸
20分钟前
2
0
Linux Centos 7 - MySQL 5.7离线安装

内部网络通过离线包的方式进行安装。 一、下载 下载地址:https://dev.mysql.com/downloads/mysql/ 进入页面后,点击右侧链接。 下载对应版本。 通过xftp6等工具上传到服务器上。 二、安装和...

华山猛男
21分钟前
2
0
EventBus 3 全解

EventBus 3 全解 [TOC] 使用 一个基于观察者模式的事件发布/订阅框架. 用于模块间通信和解耦, 使用方便,性能高. 基本使用 1. gradle导入依赖库 implementation 'org.greenrobot:eventbus:3....

马湖村第九后羿
23分钟前
3
0
HTTP 协议

什么是HTTP协议? HTTP是hypertext transport protocol的缩写,即超文本传输协议。 是用于万维网服务器与本地浏览器之间传输超文本的传送协议。可以使浏览器更加高效,使网络传输减少。能够保...

彩色泡泡糖
33分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部