js实现控件按钮滚动带暂停效果

本例使用js实现带暂停效果的图片滚动。它由按钮控制，以供参考。详情如下

无缝滚动2

#经{
宽度：1250px；
身高：300px；
溢出：隐藏；
保证金：100px汽车0；
overflow-x：汽车；
}
#经# CON {
宽度：4000px；
身高：300px；
溢出：隐藏；
}
#经# CON # box1 {
浮点数：左；
溢出：隐藏；
}
#经# CON # Box2 {
浮点数：左；
溢出：隐藏；
}
#经纱img {
浮点数：左；
右边距：10px；
宽度：200px；
身高：300px；
}
- {。
文本对齐：中心；
边距：10px；
}
钮扣{。
字体大小：16px；
}


右手卷
无功偏差= document.getelementbyid（'warp）；
无功控制= document.getelementbyid（'con）；
VaR（1 = document.getelementbyid 'box1）；
VaR Box2 = document.getelementbyid（'box2）；
VaR img = box1.getelementsbytagname（'img）{ 0 }；
无功scrolll = document.getelementbyid（'scrolll）；
无功scrollr = document.getelementbyid（'scrollr）；
VaR Timer1 = null，定时器= null，旗= 1；
box2 .innerHTML = box1.innerhtml；
马克斯= box1.clientwidth；
imgmax = IMG clientwidth + 10；
功能scrollLeft（）{
旗= 1；
ClearInterval（1）；
1 = setInterval（）{（）函数（
经scrollLeft + +；
如果（翘曲。scrollLeft > = max）{
经。scrollLeft = 0；
}
如果（经imgmax = =。scrollLeft % 0）{
ClearInterval（1）；
ClearTimeout（定时器）；
Timer2 = setTimeout（）{（）函数（
1 = setInterval（scrollLeft，5）
}，2000）
}
}，5）
}
功能scrollright（）{
旗= 0；
ClearInterval（1）；
1 = setInterval（）{（）函数（
warp.scrollleft--；
如果（翘曲。scrollLeft <= 0）{
scrollLeft =最大偏差；
}
如果（经imgmax = =。scrollLeft % 0）{
ClearInterval（1）；
ClearTimeout（定时器）；
Timer2 = setTimeout（）{（）函数（
1 = setInterval（scrollright，5）
}，2000）
}
}，5）
}
ScrollLeft（）；
scrolll。onclick =函数（）{
/ / clearInterval（1）；
/ /清除定时器（定时器）；
ScrollLeft（）；
}
scrollr。onclick =函数（）{
/ / clearInterval（1）；
/ /清除定时器（定时器）；
ScrollRight（）；
}
经。OnMouseEnter =函数（）{
ClearInterval（1）；
ClearTimeout（定时器）；
}
经。OnMouseLeave =函数（）{
ClearInterval（1）；
ClearTimeout（定时器）；
console.log（旗）；
如果（旗）{ scrollLeft（）；}
别的{ scrollright（）；}
}

这种效果的具体效果是，鼠标上下移动，然后滚动，滚动和滚动。这是一个滚动的图片，也就是说，滚动后，停止2S，开始滚动下一个。请参考具体内容的代码。

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