3

我知道 html marquee 标记已被弃用，并且为了正确标记我们不应该使用它，所以我正在尝试用 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>

我完全没有想法……有人吗？

4

2 回答 2

4

使用setInterval而不是setTimeout. 您可以使用clearInterval来停止触发给定函数的间隔。要更改方向，只需执行speed *= -1.

这是它的外观示例：http: //jsfiddle.net/zapux/

于 2013-06-23T16:25:20.327 回答
2

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

资源：

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);
}

演示：

http://jsfiddle.net/zapux/3/

于 2013-06-24T12:28:07.973 回答