原js旋转木马图示例代码

很多网站都有旋转木马的身影，但是很难找到系统的解释，所以在这里做一个简单的介绍，希望大家都能有收获，如果没有合适的地方，希望大家能指出。

原理：

有些图片平铺成一行，然后计算偏移量，然后用定时器来实现定时旋转木马。

步骤1：构建HTML的基本布局

如下所示：

轮播图


一
二
三
四
五
>
只有五张图片，但使用7张票转转盘，这是实现一个无缝旋转木马，会有详细的介绍。

当5是跨度时，我们可以看到旋转木马实时地显示当前位置。

最后一个是可以用来控制前向后的两个按钮。

在这里，我们需要使用绝对定位包装，所以用左：- 600px；显示的第一张图片。

步骤二：CSS布局

首先，resetcss，如下所示：
{ *
保证金：0；
填充：0；
}
一个{
文字装饰：无；
}
然后，为了使图片只在容器中，我们需要限制它的宽度和高度，使用溢出：隐藏，隐藏其余的图片，我们希望包装相对于容器移动，所以我们把它设置为相对。
{容器。
职位：相对；
宽度：600px；
身高：400px；
保证金：100px汽车0汽车；
阴影：00 5px绿盒子；
溢出：隐藏；
}
我们的包装是绝对位置，所以我们可以通过控制左、右控制画面的运动。设置z-index：1；参考按钮将放置后。因为总共有七张图片，宽度为4200px（每张图片我们600x400），我们只有为了让图片左浮动到全行。
{。包
位置：绝对；
宽度：4200px；
身高：400px；
Z指数：1；
}
然后我们将图片设置为左边，并限制图片的大小，如下所示：
container.wrap img {。
浮点数：左；
宽度：600px；
身高：400px；
}
结果如下：
也就是说，第一张图片已经显示出来，并且装满了整个容器（容器是盒子阴影）；

然后我们把显示的命令按钮在画面的右下角，并设置z-index：2确保按钮在图片的顶部。
container.buttons {。
位置：绝对；
右：150px；
底部：20px；
宽度：100px；
身高：10px；
Z指数：2；
}
然后，对按钮下的跨度做一个简单的修改，并在与图片对应的跨度上设置一个类，如下所示：
{ container.buttons跨度。
左：5px保证金；
显示：内联块；
宽度：20px；
身高：20px；
边框半径：50%；
背景颜色：绿色；
文本对齐：中心；
颜色：白色；
光标：指针；
}
。container.buttons跨度，{
背景颜色：红色；
}
接下来，我们添加箭头左右，然后进行简单修改。注意：因为我们使用实体来表示左右箭头，所以我们设置字体大小来改变大小。
container.arrow {。
位置：绝对；
顶部：35%；
颜色：绿色；
填料：0px 14px；
边框半径：50%；
字体大小：50px；
Z指数：2；
显示：无；
}
container.arrow_left {。
左：10px；
}
container.arrow_right {。
右：10px；
}
集装箱：hover.arrow {。
显示块；
}
容器：箭头：悬停{
背景颜色：RGBA（0,0,0,0.2）；
}
步骤三：添加JS逻辑

我们首先得到的包（因为需要设置左边控制，然后获得旋转木马图）到大约两个箭头，并实现手动旋转，如下所示：
VaR套= document.queryselector（。包）；
VaR下= document.queryselector（。arrow_right ）；
变量prev = document.queryselector（。arrow_left ）；
next.onclick =函数（）{
next_pic（）；
}
prev.onclick =函数（）{
prev_pic（）；
}
功能next_pic（）{
无功newleft = parseInt（包。风格。左）- 600；
wrap.style.left = newleft +PX；
}
功能prev_pic（）{
无功newleft = parseInt（包。风格。左）+ 600；
wrap.style.left = newleft +PX；
}
值得注意的是，wrap.style.left是字符串，所以它可以转换成数字计算。设置左边后，将添加到字符串中。

现在让我们来测试它。
你可以看到，在第一页，左边的值是600，所以，我们可以单击最后一个，但当你点击一次，有一个空白的。以同样的方式，下一次点击到3600是最后一个，你不能继续点击。 U3000 U3000

也就是说，当我们单击下一步- 3600px（这是第一张图片），我们需要跳转到第二次1200px，这样我们就可以跳下。

以同样的方式，当我们点击最后一个为0px（这是第五张图片），我们希望能跳到下一次，第四，，- 2400px；

在这种方式中，我们修改next_pic和prev_pic功能如下：
功能next_pic（）{
无功newleft；
如果（wrap.style.left = - 3600px）{
newleft = - 1200；
其他{ }
newleft = parseInt（包。风格。左）- 600；
}
wrap.style.left = newleft +PX；
}
功能prev_pic（）{
无功newleft；
如果（wrap.style.left = 0px）{
NewLeft = -2400;
其他{ }
newleft = parseInt（包。风格。左）+ 600；
}
wrap.style.left = newleft +PX；
}

在这一点上，我们可以发现图片可以循环使用！

但是，在这一点上，我们只手动播放它。如果我们想自动播放，我们可以使用setInterval（），如下图所示：
var定时器= null；
功能自动播放（）{
定时器= setInterval（）{（）函数（
next_pic（）；
}，1000）；
}
自动播放（）；
也就是说，先设置一个定时器，然后创建一个可以自动播放的函数，然后就可以调用这个函数，现在可以自动播放了，效果如下：
但如果我们要仔细看，当这些图片，我们要停止播放轮播图，只要clearInterval（）可以如下：
var container = document.queryselector（集装箱）；
container.onmouseenter =函数（）{
ClearInterval（定时器）；
}
container.onmouseleave =函数（）{
自动播放（）；
}
现在，如果我们把鼠标放进旋转木马里，就不要玩旋转木马了。

但是到目前为止，传送带下面的点是不动的，现在我们意识到了。

原理很简单，初始指标设置按钮的值是0，这是第一个跨类，然后触发next_pic功能，加上1的指数，当触发功能prev_pic，INEX 1，并设置当前指数点班，这就要求指标必须设置一个全局变量，并确保它在每个函数的范围。

添加showcurrentdot功能：
var指数= 0；
VaR点= document.getelementsbytagname（跨越）；
功能showcurrentdot（）{
对于（var i = 0，len = dots.length；我< len；i++）{
点{我} classname = ；
}
点{指数}。类名= ；
}
在next_pic添加代码：
索引+；
如果（索引> 4）{
索引= 0；
}
你的prev_pic增添了不少：
指数；
如果（索引< 0）{
索引= 4；
}
showcurrentdot（）；
这个转盘图形可以自动切换，并随着图片的变化而变化。

但是，我们经常看到旋转图的距离有一定的距离-当你点击圆点时，你可以跳转到相应的图片。实现的原理是：点击小圆点，使左换行变成相应的值：

对于（var i = 0，len = dots.length；我< len；i++）{
（函数（i）{）
点{我}。onclick =函数（）{
var =索引i；
如果（指数= = 4 parseInt（包。风格。左）{ = = 3000！）
DIS = DIS 5；
}
/ /和prev和利用下，在开始的5和最后的照片1在使用时会造成问题，和数字符号的错误，因此可以处理
如果（指数parseInt（包。风格。左）0 = =！= = 600）{
DIS = 5 + DIS；
}
wrap.style.left =（parseInt（包。风格。左）+ DIS×600）+PX；
索引= i；
showcurrentdot（）；
}
}）（一）；
}
其原理是当你点击的点，得到相应的我的价值，我的价值是指标的跨度值，我们把他和全局变量指标相比，然后重新设置wrap.style.left值，然后我值复制到全局变量指标，最后显示原来的小电流可以。值得注意的是，闭包的概念有关，如果循环是直接使用，正确的结果不能得到。

最终结果如下：
最后的代码如下所示：

轮播图

{ *
保证金：0；
填充：0；
}
一个{
文字装饰：无；
}
{容器。
职位：相对；
宽度：600px；
身高：400px；
保证金：100px汽车0汽车；
阴影：00 5px绿盒子；
溢出：隐藏；
}
container.wrap {。
位置：绝对；
宽度：4200px；
身高：400px；
Z指数：1；
}
container.wrap img {。
浮点数：左；
宽度：600px；
身高：400px；
}
container.buttons {。
位置：绝对；
右：5px；
底部：40px；
宽度：150px；
身高：10px；
Z指数：2；
}
{ container.buttons跨度。
左：5px保证金；
显示：内联块；
宽度：20px；
身高：20px；
边框半径：50%；
背景颜色：绿色；
文本对齐：中心；
颜色：白色；
光标：指针；
}
。container.buttons跨度，{
背景颜色：红色；
}
container.arrow {。
位置：绝对；
顶部：35%；
颜色：绿色；
填料：0px 14px；
边框半径：50%；
字体大小：50px；
Z指数：2；
显示：无；
}
container.arrow_left {。
左：10px；
}
container.arrow_right {。
右：10px；
}
集装箱：hover.arrow {。
显示块；
}
容器：箭头：悬停{
背景颜色：RGBA（0,0,0,0.2）；
}

一
二
三
四
五
>
VaR套= document.queryselector（。包）；
VaR下= document.queryselector（。arrow_right ）；
变量prev = document.queryselector（。arrow_left ）；
next.onclick =函数（）{
next_pic（）；
}
prev.onclick =函数（）{
prev_pic（）；
}
功能next_pic（）{
索引+；
如果（索引> 4）{
索引= 0；
}
showcurrentdot（）；
无功newleft；
如果（wrap.style.left = - 3600px）{
newleft = - 1200；
其他{ }
newleft = parseInt（包。风格。左）- 600；
}
wrap.style.left = newleft +PX；
}
功能prev_pic（）{
指数；
如果（索引< 0）{
索引= 4；
}
showcurrentdot（）；
无功newleft；
如果（wrap.style.left = 0px）{
newleft = - 2400；
其他{ }
newleft = parseInt（包。风格。左）+ 600；
}
wrap.style.left = newleft +PX；
}
var定时器= null；
功能自动播放（）{
定时器= setInterval（）{（）函数（
next_pic（）；
}，2000）；
}
自动播放（）；

var container = document.queryselector（集装箱）；
container.onmouseenter =函数（）{
ClearInterval（定时器）；
}
container.onmouseleave =函数（）{
自动播放（）；
}

var指数= 0；
VaR点= document.getelementsbytagname（跨越）；
功能showcurrentdot（）{
对于（var i = 0，len = dots.length；我< len；i++）{
点{我} classname = ；
}
点{指数}。类名= ；
}

对于（var i = 0，len = dots.length；我< len；i++）{
（函数（i）{）
点{我}。onclick =函数（）{
var =索引i；
如果（指数= = 4 parseInt（包。风格。左）{ = = 3000！）
DIS = DIS 5；
}
/ /和prev和利用下，在开始的5和最后的照片1在使用时会造成问题，和数字符号的错误，因此可以处理
如果（指数parseInt（包。风格。左）0 = =！= = 600）{
DIS = 5 + DIS；
}
wrap.style.left =（parseInt（包。风格。左）+ DIS×600）+PX；
索引= i；
showcurrentdot（）；
}
}）（一）；
}
总结：

一个轮播图并不难，一般的想法：创建一个DIV，定义宽度和高度hidden.then溢出：创建一个DIV与图片，所有图片的宽度和漂浮，所以，所有的图片都是在一条线。然后为了实现无缝滚动，你需要第一和最后添加一个过渡的图片。先添加两个按钮，可手动旋转木马，那么只需要添加一个定时器自动旋转方向，因为用户有时需要查看细节，所以鼠标进入当清除定时器，然后将定时播放。为了更好的用户经验，我们添加一个排点旁边的用户。用户可以清楚地知道他们现在在哪里。最后，使用闭包可以让用户通过点击小圆点直接切换图片。