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 }。类名= ；
}

}；


一
二
三
四
五
结果如下：

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。