jQuery手动点击实现照片轮播的特效

在这篇论文中，我写了一个旋转木马训练器。首先，我写了一个转盘手动点击转盘，然后我将缓慢而深入地写一个自动转盘和一个暂停图片以停止移动转盘的鼠标。让我们来看看最终的手动点击转盘效果：

一、原理描述。

(1)首先是转盘的结构。我采用了一个最外面的大div来包装两个小div，一个里面有四张图片，另一个里面有四个数字按钮。

(2)最外层大div的宽度设置为图片的宽度，超出大div宽度的都需要隐藏，但是包含图片的小div的宽度设置为2000px，稍微大一点，方便四张图片的左浮动布局。

(3)点击数字按钮时，获取按钮的索引值，这样就可以知道每张图片向左移动了多少宽度。

从上图可以看出，这四张图片是浮动的水平布局。当点击数字按钮时，图片会根据数字按钮的索引值显示在父框中，因为父框外的图片会被隐藏~ ~ ~ ~ ~ ~如果你还不能理解原理，我只能吐血~ ~ ~ ~其次，我们来看看主程序。

！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！-按钮布局结束-/div脚本src=' http : js/jquery-1 . 11 . 3 . js '/script script src=' http 3360 js/layout . js '/script/body/html我已经从原理上解释了上述布局。感兴趣的话自己看原理~ ~ ~ ~ iii。CSS样式。

* { 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}我已经注意到了上述风格中的要点。基本的我相信很容易理解。起初，我忘了在表格中写：相对位置。幻灯片ul风格。结果，jquery程序的图片始终无法移动，并且花了很长时间才发现这个错误。希望大家能关注这个地方~ ~ ~ ~ ~ ~ ~第四，jQuery程序。

$(文档)。ready(function(){ var slide=$(')。幻灯片显示')，//获取最外面一帧的名称ul=幻灯片显示. find ('ul ')，shownumber=幻灯片显示. find('。shownavspan ')，//获取按钮onewidth=幻灯片显示。//获取每张图片的宽度shownumber.on ('click '，function(){//绑定一个click事件$ (this)。addclass ('active ')。兄弟姐妹()。每个按钮的remove class(' active ')；//点击按钮时，给该按钮增加高亮状态，去掉其他按钮的高亮状态。var索引=$(this)。index()；//获取点击了哪个按钮，即找到被点击按钮ul.animation的索引值({'left' :-onewidth * index，//注意这里使用的是left属性，所以position: relative应该设置在ul的样式中；让ul向左移动n张图片的宽度，n是根据点击按钮的索引值确定的。})})是不是觉得很简单，三言两语就达到了手动点击轮播的效果？上面的程序需要注意，左边属性是向左移动的，所以是负数~ ~ ~ ~ ~ ~ ~ ~。

精彩话题分享：jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播。

下一次，文章将为大家分享自动轮播的特效。希望你不要错过。