js实现了从左向右滑动轮播的效果

旋转图片是让图片每隔几秒自动滑动，从而达到旋转图片的效果。在效果上，有滑动的，也有递进的。滑动轮播是图片从左向右滑入的效果，渐进式轮播是图片根据透明度逐渐显示的效果。下面是实现第一种效果的方法。

原则

相同大小的图像被合并成一列，但只显示其中一个，其余的被隐藏。通过修改左值来更改显示的图像。

单击查看效果

Html部分

Nav是总容器，第一个ul list #index是点列表，鼠标覆盖哪个点就会出现哪个图片，on是给点添加背景色属性的类；第二个ul列表#img是图片列表。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title carousel Figure/title link rel='样式表' href='style.css' rel='外部nofollow' /head body！-从左向右滑动-导航id=' index ' Li class=' on '/Li Li/Li Li/Li Li/ul id=' img ' Li img src=' http 3360./images/img 1 . jpg ' alt=' img 1 '/Li Li img src=' http :/images/img 2 . jpg ' alt=' img 2 '/Li Li img src=' http :/images/img 3 . jpg ' alt=' img 3 '/Li Li img src=' http :/images/img 4 . jpg ' alt=' img 4 '/Li Li img src=' http :/images/img 5 . jpg ' alt=' img 5 '/Li/ul/nav script src=' http 3360 script . js '/script/body/html CSS

图片尺寸均为720*405，这里需要注意以下几点：

ul#img列表相对于nav是绝对定位的，#img的长度必须设置为所有图片的总宽度，这样图片才能并排显示成一排；

总容器nav的宽度必须设置为图片宽度720px，即只能显示一张图片，超出宽度的部分隐藏，即overflow:隐藏；

点列表应该显示在图片列表上，所以设置#img的z-index:-1；

小点列表是通过改变边框样式由一系列li组成的，所以移动小点的效果只能通过改变背景颜色来实现。

* { margin:0划水：0；} nav { width: 720px高度： 405 px；margin:20px汽车；飞越：隐藏；相对位置：} # index { position: absoluteleft:320pxbottom: 20px} # index li { width:8pxheight: 8pxborder:实心1px灰色；边界半径： 100%；背景色： # eee；display:内联块；} # img { width: 3600px/*不给出宽度和高度就无法移动*/height : 405 px；绝对位置：/*没有定义绝对，js不能设置左和上*/z-index :-1；} # img li { width: 720px高度： 405 px；向左浮动：} #索引。在{底色-颜色：黑色；}JS部分

图像移动功能moveElement()

moveElement函数需要获取图片的当前位置和目标位置，并计算它们之间的间隙来移动。可以使用offsetLeft和offsetTop获取图片的当前位置。移动图片时“穿越”的效果是将距离分成10次移动，即使用setTimeOut功能。但是为了防止鼠标悬停，需要调用clearTimeout()函数，代码如下：

函数move元素(ele，x _ final，y _ final，interval) {//ele是一个元素对象var x _ pos=ele.offsetlefvar y _ pos=ele.offsetTopvar dist=0；If(ele.movement){//防止悬停cleartime out(ele . movement)；} if(x _ pos==x _ finally _ pos==y _ finally){//首先判断是否移动返回；} dist=Math . ceil(Math . ABS(x _ final-x _ pos)/10)；//十步完成x_pos=x_posx_final？x _ pos dist : x _ pos-dist；dist=math . ceil(math . ABS(y _ final-y _ pos)/10)；//移入10次完成y_pos=y_posy_final？y _ pos dist :y _ pos-dist；ele . style . left=x _ pos ' px '；ele . style . top=y _ pos ' px '；埃勒。move=settimeout(函数(){//移动10次，调用moveelement (ele，x _ final，y _ final，interval) 10次；}，间隔)}小圆点移动函数moveIndex()

移动点的本质是像on一样移动设定的背景色。原理是先判断哪个li有背景色，然后去掉，让所有的li都没有背景，然后给当前的li加上背景。

函数moveIndex(list，num){//移动(var I=0；ilist.lengthI) {if (list[i]。{//清除li的背景样式列表[I].classname=} }列表[num]。类名=' on}自动旋转图片

直接在window.onload中编写以下代码.这里，我们需要定义一个变量索引，这意味着移动到索引(0~n-1，n是li的个数)图片。

var img=document . getelementbyid(' img ')；var list=document . getelementbyid(' index ')。getElementsByTagName(' Li ')；var索引=0；//这里定义的索引是变量，不是属性var nextMove=function(){//一直向右移动，最后一个之后返回index=1；if(index=list . length){ index=0；} moveIndex(列表，索引)；moveElement(img，-720*index，0，20)；};图片自动轮播需要setInterval()函数，这使得程序每隔几秒钟自动调用nextMove()函数：

var play=function(){ timer=setInterval(function(){ nextMove()；},2500);};鼠标覆盖点效果

要知道鼠标覆盖了哪个点，就会出现相应的图片。有必要知道鼠标覆盖了哪个点。这里给每一个li添加一个自定义的属性索引，这样这个属性的值就是对应点的序号I(0 ~ n-1，n是li的个数)，这样每次鼠标覆盖的时候只需要获取索引属性的值就可以知道鼠标覆盖了哪个点。请注意，索引属性与变量索引无关，只是名称相同。

for(var I=0；ilist.lengthI ){//鼠标覆盖时图片移动到小圆圈，停止列表[i]。索引=I；//这里设置了index属性，与index变量没有任何联系。清单[I]。onmouseover=function(){ var click index=par sent(这。索引)；moveElement(img，-720*clickIndex，0，20)；索引=点击索引；moveIndex(列表、索引)；clearInterval(计时器)；};名单[我]。onmouseout=function(){//移开并继续播放()；};}摘要

轮播的实现并不复杂，主要是把图片的运动行为和点的运动行为分开了，更容易实现。事实上，这个转盘有问题。最后一个到第一个的滑动距离长，其实很容易解决。滑动模式被改变。这里根据-720*index计算最终的左值，将图片的移动和小点的移动绑定，将滑动方式改为当前的offsetLeft (-720)，这样图片的移动就可以独立于索引值，然后添加到html文件中。

liimg src='http:/images/img 1 . jpg ' alt=' img 1 '/Lili img src=' http :/images/img 2 . jpg ' alt=' img 2 '/Lili img src=' http :/images/img 3 . jpg ' alt=' img 3 '/Lili img src=' http :/images/img 4 . jpg ' alt=' img 4 '/Lili img src=' http :/images/img 5 . jpg ' alt=' img 5 '/Liliimg src=' http :/images/img1.jpg' alt=' img1'/li然后，当滑动到最后一张图片时，快速将偏移量指定为0，成为第一张图片。两张图相同，变化无法区分，可以实现无缝连接。

if(x _ pos==-3600){ ele . style . left=' 0 '；ele . style . top=' 0 '；} else { ele . style . left=x _ pos ' px '；ele . style . top=y _ pos ' px '；}以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。