带悬停的字幕的javascript替代方案

我知道html标记已经被弃用，为了正确的标记，我们不应该使用它，所以我尝试用javascript编写一个替代方案。我的问题如下：

我需要有方向箭头来改变滚动方向

我需要它停在悬停状态

这是我到目前为止所拥有的

<style type="text/css">

#container-HmS {
 position:relative;
 width:710px;
 height:75px;
 overflow:hidden;
 border:1px solid #ccc;
 background-color:#fff;
 margin:0 auto;
 -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#div1-HmS {
 position:absolute;
 left:0px;
 top:0px;
 width:708px;
 height:73px;
}
#div2-HmS {
 position:absolute;
 left:713px;
 top:0px;
 width:713px;
 height:73px;
 }

</style> 
<script type="text/javascript">
 var m=0;
 var n=713;
 var speed=20;
 function scrollPics() {
 document.getElementById('div1-HmS').style.left=m+'px';
 document.getElementById('div2-HmS').style.left=n+'px';
 m--;
 n--;
 if(m==-713) {
 m=713;
 }
if(n==-713) {
 n=713;
 }
setTimeout('scrollPics()',speed);
 } 
window.onload=function() {
 scrollPics();
 }
</script>


<div id="container-HmS">

<div id="div1-HmS">
<a href="http://store.vibrant.com/Cisco_bymfg_9-8-1.html"><img src="assets/templates/v32028/images/logo-slider_01.png" alt=""></a>
<a href="http://store.vibrant.com/Dell_bymfg_4-8-1.html"><img src="assets/templates/v32028/images/logo-slider_02.png" alt=""></a>
<a href="http://store.vibrant.com/HP_bymfg_18-8-1.html"><img src="assets/templates/v32028/images/logo-slider_03.png" alt=""></a>
<a href="http://store.vibrant.com/ibm-_bymfg_133-8-1.html"><img src="assets/templates/v32028/images/logo-slider_04.png" alt=""></a>
<a href="http://store.vibrant.com/search.asp?keyword=oracle"><img src="assets/templates/v32028/images/logo-slider_05.png" alt=""></a>
<a href="http://store.vibrant.com/EMC_bymfg_22-8-1.html"><img src="assets/templates/v32028/images/logo-slider_06.png" alt=""></a>
</div>

<div id="div2-HmS">
<a href="http://store.vibrant.com/Cisco_bymfg_9-8-1.html"><img src="assets/templates/v32028/images/logo-slider_01.png" alt=""></a>
<a href="http://store.vibrant.com/Dell_bymfg_4-8-1.html"><img src="assets/templates/v32028/images/logo-slider_02.png" alt=""></a>
<a href="http://store.vibrant.com/HP_bymfg_18-8-1.html"><img src="assets/templates/v32028/images/logo-slider_03.png" alt=""></a>
<a href="http://store.vibrant.com/ibm-_bymfg_133-8-1.html"><img src="assets/templates/v32028/images/logo-slider_04.png" alt=""></a>
<a href="http://store.vibrant.com/search.asp?keyword=oracle"><img src="assets/templates/v32028/images/logo-slider_05.png" alt=""></a>
<a href="http://store.vibrant.com/EMC_bymfg_22-8-1.html"><img src="assets/templates/v32028/images/logo-slider_06.png" alt=""></a>
</div>

</div>

#集装箱HmS{
位置：相对位置；
宽度：710px；
高度：75px；
溢出：隐藏；
边框：1px实心#ccc；
背景色：#fff；
保证金：0自动；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
}
#第一组HmS{
位置：绝对位置；
左：0px；
顶部：0px；
宽度：708px；
高度：73px；
}
#第2分部HmS{
位置：绝对位置；
左：713px；
顶部：0px；
宽度：713px；
高度：73px；
}
var m=0；
var n=713；
无功转速=20；
函数scrollPics（）{
document.getElementById（'div1-HmS'）.style.left=m+'px'；
document.getElementById（'div2-HmS'）.style.left=n+'px'；
m--；
n--；
如果（m==-713）{
m=713；
}
如果（n==-713）{
n=713；
}
设置超时（'scrollPics（）'，速度）；
} 
window.onload=function（）{
滚动图片（）；
}

---

我完全没有主意了……有人吗？

用

setInterval

代替

setTimeout

。您可以使用

clearInterval

停止间隔触发给定函数。要改变方向，只需执行

speed*=-1

---

这里有一个例子可以说明它是什么样子的：

我觉得其他答案可以为您改进。我已经对源代码进行了注释，并在我认为合适的地方进行了更改

资料来源：

var m = 0;
var n = 713;
var speed = 20;
var scrollDirection = -1;
var timeout; // this holds the timeout for the animation

// collect all of the elements we are going to be working with once instead of each time, collecting them is expensive and we wan't to reduce that as much as possible. 
var wrap1 = document.getElementById('div1-HmS'),
    wrap2 = document.getElementById('div2-HmS'),
    invert = document.getElementById('invert'),
    cont = document.getElementById('container-HmS');

// start the scroll (because the function is hoisted don't be concerned this is above 
scrollPics();
// when they click on the invert button
invert.addEventListener('click', function() {
    scrollDirection *= -1; // change direction
}, false);
// when they mouse over the container
cont.addEventListener('mouseover', function() { 
    clearTimeout(timeout); // clear the timeout (pause the animation)
}, false);
// when they mouse out
cont.addEventListener('mouseout', function() {
    timeout = setTimeout(scrollPics, speed); // re-start the animation
}, false);

function scrollPics() {
    // set the left position
    wrap1.style.left = m + 'px';
    wrap2.style.left = n + 'px';
    // increment the new left position
    m += scrollDirection;
    n += scrollDirection;
    // reset the left if it is over the limits
    if (m == -713) {
        m = 713; // these limits can be obtained with window.getComputedStyle(cont).width
    }
    if (n == -713) {
        n = 713;
    }
    // make the function recursive with the timeout.
    timeout = setTimeout(scrollPics, speed);
}

演示：

---

该标记已被弃用，因为没有人喜欢它的效果：-）@Pointy，不是真的。我喜欢边看边动。哦，看看鼠标事件——特别是onmouseout和onmouseover，它与

标记相同。你介意详细说明一下吗？（旁注，我更喜欢支持浏览器的requestAnimationFrame，它更平滑）详细说明什么？暂停还是方向开关？我在我的答案中添加了一个JSFIDLE链接。你不需要setTimeout上的setInterval，你应该缓存你的元素，而不是每次都重新选择它们，而且你没有告诉他如何在小提琴中使用clearInterval。