这个轮播是在前一篇jQuery的手动点击的基础上编写的，实现轮播的特效，也就是这个节目是手动点击轮播和定时自动轮播的节目。建议想连贯学习的朋友读一读我之前的文章，看完之后再看这篇文章~ ~ ~ ~。

让我们来看看我最后的定时自动转盘和手动点击转盘：

上面显示动画比较快的原因是因为我的截图软件是绿色版本，免费的~ ~ ~要知道，是卡卡的。真实效果比这个速度慢，而且还是均匀的，所以可以商用~ ~ ~所以以上显示动画只能作为完成效果的参考。一、主程序

！doctype HTML HTML Head metachartset=' UTF-8 '/title轮播(手动单击轮播)/title Link Type=' text/CSS' rel='样式表' href=' CSS/layout . CSS '/Head body div class='幻灯片放映'！-图片布局开始-ullia href=' # ' img src=' http : img/picture 01 . jpg '/a/lilia href=' # ' img src=' http : img/picture 02 . jpg '/a/lilia href=' # '。img src=' http : img/picture 03 . jpg '/a/Li lia href=' # ' img src=' http : img/picture 04 . jpg '/a/Li/ul！-图片布局结束-！-按钮布局开始-div class=' shownav ' span class=' active ' 1/span span 2/span span 3/span span 4/span/div！-按钮布局ends-/div script src=' http : js/Jquery-1 . 11 . 3 . js '/script script src=' http 3360 js/layout . js '/script/body/html，以上主程序与上一个没有什么不同，没有做任何修改~ ~ ~ ~感兴趣。

* { margin : 0；padd : 0；} ul { list-style : none；}.幻灯片显示{ width: 346pxheight: 210px/*实际上是图片的高度*/border : 1px # eeei solid；margin: 100px自动；相对位置：飞越：隐藏；/*这里需要隐藏溢出框的图片部分*/}。幻灯片ul { width : 2000 px相对位置：/*这里需要注意的是，相对的：对象不能堆叠，而是会按照左、右、上、下等属性在正常的文档流中移动。没有此属性，图片不会左右移动*/}。幻灯片/*让四张图片向左浮动，形成并排的水平布局，方便点击按钮时向左移动*/width : 346 px；}.幻灯片。显示导航{ /*绝对定位布局数字按钮*/绝对位置：right: 10pxbottom: 5px文本对齐：居中；font-size : 12px；线高： 20px；}.幻灯片。showNav span{ cursor:指针；display:块；向左浮动：宽度： 20px；height: 20px背景技术# ff5a28边距-left : 2px；color: # fff}.幻灯片。显示导航。active { background: # b63e1a} 3.jQuery程序首先讲述了定时自动轮播的原理：1。首先，启动定时器，假设定时器时间设置为2000毫秒，即定时器每2秒执行一次操作。2.定时器执行的操作是模拟依次点击数字按钮，即触发点击事件，让图片向左移动。首先，看看达到一般效果的jQuery代码。

var计时器=null//定时器返回值，主要用于关闭定时器var iNow=0；//iNow是正在显示的图片的索引值。用户打开网页时，首先显示第一张图片，即索引值为0 timer=set interval(function(){//打开timer iNow//将图片的索引值依次增加1，使图片显示数字。eq (inow)。触发器(“点击”)可以依次旋转；//模拟触发数字按钮的点击事件}，2000)；//2000年是旋转木马的时代。以上程序可以实现每2S图片的轮播效果，但轮播到达最后一张图片时会停止。因为没有判断iNow是否已经到达最后一张图片，所以下面的代码2是可用的：

var计时器=null//定时器返回值，主要用于关闭定时器var iNow=0；//iNow是正在显示的图片的索引值。用户打开网页时，首先显示第一张图片，即索引值为0 timer=set interval(function(){//打开timer iNow//将图片的索引值依次增加1，从而实现图片的顺序轮播if(iNowshowNumber.length-1){ //到达最后一张图片时，让iNow赋为第一张图片的索引值，轮播效果跳转到第一张图片重新开始iNow=0；} showNumber.eq(iNow)。触发器(' click ')；//点击}模拟触发数字按钮，2000)；//2000年是carousel的时间，所以jQuery程序的完整代码程序如下：

$(文档)。ready(function(){ var slide=$(')。幻灯片显示')，//获取最外面一帧的名称ul=幻灯片显示. find ('ul ')，shownumber=幻灯片显示. find('。shownavspan ')，//获取按钮onewidth=幻灯片显示。//获取每个图片的宽度var timer=null//定时器返回值，主要用于关闭定时器var iNow=0；//iNow是正在显示的图片的索引值。当用户打开网页时，首先显示第一张图片，即索引值为0显示编号。on ('click '，function(){//绑定一个click事件$ (this)。addclass ('active ')。兄弟姐妹()。每个按钮的remove class(' active ')；//点击按钮时，给该按钮增加高亮状态，去掉其他按钮的高亮状态。var索引=$(this)。index()；//获取点击了哪个按钮，即找到被点击按钮ul.animation的索引值({'left' :-onewidth * inow，//注意这里用的是left属性，所以position: relative需要在ul的样式中设置；让ul向左移动n个图片的宽度，其中n是根据被点击按钮的索引值确定的})；Timer=setinterval(函数(){//打开timer iNow//将图片的索引值依次增加1，从而实现图片的顺序轮播if(iNowshowNumber.length-1){ //到达最后一张图片时，让iNow赋为第一张图片的索引值，轮播效果跳转到第一张图片重新开始iNow=0；} showNumber.eq(iNow)。触发器(' click ')；//点击}模拟触发数字按钮，2000)；//2000是轮播的时间})上面的笔记写得很详细，主要是为了方便想学习的小伙伴，但其实我写的程序没有笔记那么详细，都是很简单的内容。看到这里，你可能会认为jQuery程序完成了，这是一个很大的错误，因为自动轮播效果是正确的，但是当你手动点击时，就会出错。我特意做了一个Gif动画来展示错误的效果：

看到上面的效果，你会突然意识到，当图片自动旋转播放时，即使你点击了按钮，它也只是和你呼应，跳到你点击的按钮上，但它只会持续一会儿，或者按照它的旋转顺序播放，而忽略了你点击按钮后应该采取的旋转顺序。至于原因。

是因为手动点击时，index的值没有赋给定时器的图像索引iNow，所以iNow无法存储你点击的按钮的索引值，也就是你不知道你点击了哪个按钮。现在知道原因了，需要在下面修改。

修改后的jQuery程序的最终版本是：

$(文档)。ready(function(){ var slide=$(')。幻灯片显示')，//获取最外面一帧的名称ul=幻灯片显示. find ('ul ')，shownumber=幻灯片显示. find('。shownavspan ')，//获取按钮onewidth=幻灯片显示。//获取每个图片的宽度var timer=null//定时器返回值，主要用于关闭定时器var iNow=0；//iNow是正在显示的图片的索引值。当用户打开网页时，首先显示第一张图片，即索引值为0显示编号。on ('click '，function(){//绑定一个click事件$ (this)。addclass ('active ')。兄弟姐妹()。每个按钮的remove class(' active ')；//点击按钮时，给该按钮增加高亮状态，去掉其他按钮的高亮状态。var索引=$(this)。index()；//获取点击了哪个按钮，即查找被点击按钮的索引值iNow=indexUl。animate({ ' left ' :-one width * inow，//注意这里使用了left属性，所以position: relative需要在ul的样式中设置；让ul向左移动n个图片的宽度，其中n是根据被点击按钮的索引值iNOWx确定的。Timer=setinterval(函数(){//打开timer iNow//将图片的索引值依次增加1，从而实现图片的顺序轮播if(iNowshowNumber.length-1){ //到达最后一张图片时，让iNow赋为第一张图片的索引值，轮播效果跳转到第一张图片重新开始iNow=0；} showNumber.eq(iNow)。触发器(' click ')；//点击}模拟触发数字按钮，2000)；//2000是轮播的时代})精彩话题分享：jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播。

这就是本文的全部内容。下一次，我将与大家分享当鼠标悬停在转盘上时，图像将停止转盘，然后移除鼠标后图像将是转盘的代码。不要走开。