Question

我知道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>

我完全没有想法......任何人？

Answer 1

使用setInterval代替setTimeout。您可以使用clearInterval来停止触发给定功能的间隔。要更改路线，请执行speed *= -1。

以下是一个示例：http://jsfiddle.net/zapux/

Answer 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/

javascript替代marquee与悬停暂停

2 个答案: