Javascript 滑块滑动不重复

滑块滑动不重复

我正试着这么做。滑块工作正常，但当最后一张幻灯片出现时，有一个结束，没有重复

下面是我在代码段中的代码（代码段的窗口可能太小，请看这里：）：

var Slider=（函数（）{
var initSlider=函数（）{
var dir=$（“html”）.attr（“dir”）；
var swipeHandler=newhammer（document.getElementById（“slider”）；
swipeHandler.on（'swipeleft'，函数（e）{
如果（dir==“rtl”）
$（“.arrow left”）.trigger（“click”）；
其他的
$（“.arrow right”）.trigger（“单击”）；
});
swipeHandler.on（'swiperight'，函数（e）{
如果（dir==“rtl”）
$（“.arrow right”）.trigger（“单击”）；
其他的
$（“.arrow left”）.trigger（“click”）；
});
$（“.arrow right，.arrow left”）。单击（函数（事件）{
var nextActiveSlide=$（“.slide.active”）.next（）；
if（$（this）.hasClass（“箭头左”））
nextActiveSlide=$（“.slide.active”）.prev（）；
如果（nextActiveSlide.length>0）{
var nextActiveIndex=nextActiveSlide.index（）；
$（“.dots span”）.removeClass（“活动”）；
$（$（“.dots”）.children（）[nextActiveIndex]）.addClass（“活动”）；
更新幻灯片（nextactivslide）；
}
});
$（“.dots span”）。单击（函数（事件）{
var slideIndex=$（this.index（）；
var nextActiveSlide=$（$（“.slider”）.children（）[slideIndex]）；
$（“.dots span”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
更新幻灯片（nextactivslide）；
});
var updateSlides=函数（nextactivslide）{
var nextActiveSlideIndex=$（nextActiveSlide.index（）；
$（“.slide”）.removeClass（“prev-1”）；
$（“.slide”）.removeClass（“next-1”）；
$（“.slide”）.removeClass（“活动”）；
$（“.slide”）.removeClass（“prev-2”）；
$（“.slide”）.removeClass（“next-2”）；
nextActiveSlide.addClass（“活动”）；
nextActiveSlide.prev（）.addClass（“prev-1”）；
nextActiveSlide.prev（）.prev（）.addClass（“prev-2”）；
nextActiveSlide.addClass（“活动”）；
nextActiveSlide.next（）.addClass（“next-1”）；
nextActiveSlide.next（）.next（）.addClass（“next-2”）；
}
var updateToNextSlide=函数（nextActiveSlide）
{
}
}
返回{
init:function（）{
initSlider（）；
}
}
})();
$（函数（）{
Slider.init（）；
});
.slider容器{
显示：块；
高度：270px；
宽度：自动；
保证金：0自动；
位置：相对位置；
最大宽度：1300px；
边缘顶部：20px；
}
.滑块容器。向左箭头{
位置：绝对位置；
左：10%；
最高：50%；
转换：translate3d（0，-50%，0）；
颜色：白色；
字号：28px；
光标：指针；
z指数：9；
边框顶部：15px实心透明；
右边框：30px固体#C85054；
边框底部：15px实心透明；
}
@介质（最大宽度：768px）{
.滑块容器。向左箭头{
显示：无；
}
}
.滑块容器。向右箭头{
位置：绝对位置；
右：10%；
最高：50%；
转换：translate3d（0，-50%，0）；
颜色：白色；
字号：28px；
光标：指针；
z指数：9；
边框顶部：15px实心透明；
左边框：30px实心#C85054；
边框底部：15px实心透明；
}
@介质（最大宽度：768px）{
.滑块容器。向右箭头{
显示：无；
}
}
.滑块容器.圆点{
显示：内联块；
宽度：100%；
文本对齐：居中；
利润率：30px0；
用户选择：无；
}
.滑块容器.点跨度{
显示：内联块；
宽度：20px；
高度：20px；
右边距：2px；
光标：指针；
用户选择：无；
填充：10px0；
位置：相对位置；
}
.滑块容器.点跨度：之前{
内容：“；
位置：绝对位置；
左：50%；
最高：50%；
转换：translate3d（-50%，-50%，0）；
高度：10px；
宽度：10px；
边界半径：50%；
背景色：#ccc；
不透明度：0.6；
}
@介质（最大宽度：768px）{
.滑块容器.点跨度{
宽度：23px；
边缘底部：15px；
}
}
.滑块容器.点跨度.激活：之前{
背景色：#C85054；
不透明度：1；
}
.滑块容器.滑块{
显示：块；
宽度：650px；
身高：100%；
保证金：0自动；
位置：相对位置；
文本对齐：居中；
线高：270px；
颜色：白色；
}
@介质（最大宽度：768px）{
.滑块容器.滑块{
高度：450px；
}
}
.滑块容器.滑块.滑块{
显示：内联块；
宽度：80%；
高度：270px；
位置：绝对位置；
左：50%；
最高：50%；
转换：translate3d（-50%，-50%，0）scale3d（0.4,0.4,1）；
转换：转换0.3s缓进-缓出0s，z-index.2s缓进-缓出.1s；
背景色：#2C2A40；
}
.slider容器.slider.slide:第n个子项（奇数）{
背景颜色：灰色；
}
@介质（最大宽度：768px）{
.滑块容器.滑块.滑块{
宽度：100%；
高度：450px；
}
}
.slider容器.slider.slide:第n个子项（1）{
背景色：#505E63；
}
.slider容器.slider.slide:第n个子项（2）{
背景色：#62698C；
}
.slider容器.slider.slide:第n个子项（3）{
背景色：#2C2A40；
}
.slider容器.slider.slide:第n个子项（4）{
背景色：#C85054；
}
.滑块容器.滑块.滑块：第n个子项（5）{
背景色：#F1BB70；
}
.slider容器.slider.slide.prev-2{
转换：translate3d（-105%，-50%，0）scale3d（0.4,0.4,1）；
z指数：1；
不透明度：0.5；
}
.slider容器.slider.slide.prev-1{
转换：translate3d（-85%，-50%，0）scale3d（0.6,0.6,1）；
z指数：2；
}
.slider容器.slider.slide.next-1{
z指数：2；
转换：translate3d（-15%，-50%，0）scale3d（0.6,0.6,1）；
}
.slider容器.slider.slide.next-2{
z指数：1；
转换：translate3d（5%-