JS旋转木马效果代码

首先来看一下js图片的旋转木马效果，如下所示
具体思路：

首先，页面加载，获取整个容器，所有放数字索引的李和图片列表的UL，定义计时器的变量，并存储当前索引的索引。

二、添加计时器，每2秒增加索引，并调用一次切换图片功能。

提示：

1，指数不能一直不受限制，需要判断。

2。调用调用开关时，应将递增索引作为参数传递。

三。定义图片切换功能

提示：

1。遍历所有放置数字索引的李，并删除每个李的类。

2。在传递的索引值的基础上找到相应的李，将类添加到当前的高亮显示。

三.根据传递的索引值计算图片的UL的顶部值。

4。更改索引的值，使其与传递的参数值相等。

注：图片的UL的最高值是=索引*单个图片的高度（所有图片必须高）

四。当鼠标越过整个容器时，图片停止切换并继续进行。

提示：

1。鼠标滑过整个容器并清除计时器。

当2。鼠标左键，继续计时，切换到下一张图片。

五，遍历所有放置数字的李，并将索引添加到它们，当鼠标滑过时，切换到相应的图片。

当鼠标滑过时，图像切换函数被调用，滑动李的索引通过。

具体代码如下：
文件

*保证金：0；
填充：0；
列表样式：无；}
包装：170px {高度；
宽度：490px；
保证金：60px汽车；
溢出：隐藏；
职位：相对；
保证金：100px汽车；}
换行位置：绝对；}
。把ul {身高：170px；}
换行位置：绝对；
右：5px；
底部：10px；}
。包OL里{身高：20px；宽度：20px；
背景：# CCC；
# solid 1px边框：666；
左：5px保证金；
颜色：# 000；
浮点数：左；
线高度：中心；
文本对齐：中心；
游标；指针；}
。包OL，{背景：# e97305；
颜色：# FFF；}
窗口。指针函数（）{
VaR套= document.getelementbyid（'wrap），
PIC = document.getelementbyid（'pic）。GetElementsByTagName（李），
列表= document.getelementbyid（'list）。GetElementsByTagName（李的），
索引= 0，
计时器= null；

定义和调用的自动播放功能 / /
定时器= setInterval（自动播放，2000）；

停止自动在整个容器上播放鼠标。
wrap.onmouseover =函数（）{
ClearInterval（定时器）；
}

让整个容器鼠标继续播放
wrap.onmouseout =函数（）{
定时器= setInterval（自动播放，2000）；
}
遍历/切换到相应图片的所有数字导航
对于（var i = 0；i < list.length；i++）{
表{我}。onmouseover =函数（）{
ClearInterval（定时器）；
this.innertext指数= 1；
ChangePic（指数）；
}；
}；

功能自动播放（）{
如果（+索引= =长度）索引= 0；
ChangePic（指数）；
}

图像切换函数的定义
功能changepic（curindex）{
对于（var i = 0；i < pic.length；+ +我）{
PIC {我}。style.display =没有；
表{我} classname = ；
}
PIC { curindex }。style.display =块；
表{ curindex }。类名= ；
}

}；


一
二
三
四
五

以上是共享js图片的旋转木马效果代码，希望大家喜欢自己的喜好，根据图片修改，制作自己的图片旋转木马效果。