基于框架实现无缝轮播与左右点击效果

在网页中我们想要的无缝轮播左右循环有好多好多中，这是我第一个轮播效果，也是最基础的，和大家分享一下，对于初学者希望你们能有所借鉴，对于大神我想让你们尽情的虐我给我宝贵的意见。

这个是我要的效果

进入正题，首先是布局，布局的原理就是在差异中创建保险商实验所标签，ul中插入里标签，在里插入图片，你想要几个图片轮播，插入几个李。布局上主要的点在于差异设置大小，加上溢出：隐藏；让超出部分隐藏，ul的长度是所有图片的总长度，李浮动。

超文本标记语言代码

div id=' djlb ' div id=' bigul ' ul Li img src=' http :/images/DJ lb1。gif ' alt=' p class=' zt4 '赵茜/p p class='zt22 '北京大学历史系研究生/p /li li img src='http:/images/yc2。gif ' alt=' yc2 '/Li/ul Li img src=' http :/images/DJ lb2。gif ' alt=' p class=' zt4 '赵茜/p p class='zt22 '北京大学历史系研究生/p /li li img src='http:/images/yc2。gif ' alt=' yc2 '/Li/ul Li img src=' http :/images/DJ lb3。gif ' alt=' p class=' zt4 '赵茜/p p class='zt22 '北京大学历史系研究生/p /li li img src='http:/images/yc2。gif ' alt=' yc2 '/Li/ul Li img src=' http :/images/DJ lb2。gif ' alt=' p class=' zt4 '赵茜/p p class='zt22 '北京大学历史系研究生/p /li li img src='http:/images/yc2。gif ' alt=' yc2 '/Li/ul Li img src=' http :/images/DJ lb2。gif ' alt=' p class=' zt4 '赵茜/p p class='zt22 '北京大学历史系研究生/p /li li img src='http:/images/yc2。gif ' alt=' yc2 '/Li/ul Li img src=' http :/images/DJ lb2。gif ' alt=' p class=' zt4 '赵茜/p p class='zt22 '北京大学历史系研究生/p /li li img src='http:/images/yc2。gif ' alt=' yc2 '/Li/ul/div/div id='阿牛div id=' bleft '/div div id=' bright '/div/div CSS代码

# djlb { width: 1200px高度： 600像素；飞越：隐藏；} # bigul { width: 1800px高度： 560像素；} # bigul {位置：相对；宽度： 300像素；高度： 560像素；向左浮动：} # bigul ul Li第：个孩子(偶数){ position:绝对显示：无；} # bigul Li {宽度： 300 px高度： 560像素；向左浮动：} #阿牛{位置：相对；} #阿牛分部{绝对位置： } #阿牛左侧：第一个孩子{左侧：-55px；top :-290 px；显示器：内联块；边框-左侧： 6px实心# c2c2c2border-top: 6px实心# c2c2c2宽度： 37px高度： 37px变压器：旋转(-45 );} #阿牛div :最后一个孩子{ left : 1210 pxtop :-290 px；显示器：内联块；右边框： 6px实心# c2c2c2border-bottom: 6px实心# c2c2c2宽度： 37px高度： 37px变压器：旋转(-45 );} #阿牛div :第一个孩子：悬停{边框-左侧： 6px实心# ffcc 00边框-top: 6px实心# ffcc00} #阿牛div :最后一个孩子：悬停{边框-右侧： 6px实心# ffcc 00边框-底部： 6px实心# ffcc00}主要说明一下我射流研究…的思路；

$(function () { var i=0，tick，list，ul=$(' # bigul ')；$ ('# bright ')。单击(function () {$ ('# big ul ')。animate({ ' margin-left ' :-300 }，30000，function(){//完成执行后发生的事件list=ul . find(' ul ')//通常情况下，ul是li，因为我需要鼠标浮动、显示和隐藏，结构与ul.append(list.first())相同；//ul追加到最后一个ul.css('margin-left '，0)；//每次点击后，左边距初始化为零。为什么要初始化？想想看？});//这样向右做一个无限循环，就像一个队列if(tick){ cleartime out(tick)；}//清除最后一个定时器tick=settimeout(function(){ $(' # bright ')。单击()；}, 30000);自动定时器部分})；$('#bleft ')。单击(function(){ list=ul . find(' ul ')；list.last()。insert before(list . first())；//第一次点击时，将最后一个移到前面，ul.css('margin-left '，-300)；ul . animate({ ' margin-left ' : 0 }，3000)；//同样的问题？if(tick){ cleartime out(tick)；} tick=setTimeout(function(){ $(' # bleft ')。单击()；}, 3000);});$('#bright ')。单击()；//自动右事件})；现在我来告诉你为什么，如果你不初始化，当你点击右边的时候，他会重复第一个到第三个，因为当你把第一个移动到后面的时候，ul的父框左边是0，下一次他移动的时候，他会自动填充他的位置，也就是两个位置，所以直接是第三张图片，我只想通过画图来理解。

整个想法：

用动画让李动起来，

单击右侧时，使用append()方法将第一张工作表追加到最后一张工作表中，并在每次移动时清除一次。

当您单击左侧时，使用insertBefore()将最后一个插入到第一个中，并将其清除

刻度是我们定义的计时器设置时间

最后一句是自动正确事件

鼠标移动显示使用了mouseout()和show()，hide()可以

摘要

以上是基于边肖介绍的jQuery的无缝轮播和左右点击。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！