3

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>

私は完全にアイデアがありません....誰か？

4

2 に答える 2

4

setIntervalの代わりに使用しsetTimeoutます。を使用clearIntervalして、間隔が特定の関数をトリガーするのを停止できます。方向を変えるには、ただspeed *= -1.

これがどのように見えるかの例です: http://jsfiddle.net/zapux/

于 2013-06-23T16:25:20.327 に答える