iT邦幫忙

1

JavaScript setInterval 無縫滾動請益

直接附上程式碼

這是在Netbeans上面運行
我想讓ul內的圖片可以移動
但是放入setInterval中卻沒有反應
試過oUl點的時候不會跑出style讓我選擇
不知道是這邊出問題了嗎?
另外程式碼我也跟網路上一些做過得比較過
貌似都沒有差別
拜託高手幫我解答
謝謝<(_ _)>

    <style>
        *{margin: 0; padding: 0;}
        #div1 {width: 800px;height: 120px; margin: 100px auto;position: relative;background: #99ffff;overflow: hidden;}
        #div ul {position: absolute;left: 0;top: 0;}
        #div1 ul li {float: left; width: 200px; height: 120px; list-style: none;}
    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            var oUl = oDiv.getElementsByTagName('ul')[0];
            var aLi = oDiv.getElementsByTagName('li');
            oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
            oUl.style.width = aLi.length*aLi[0].offsetWidth+'px';
            
            function move(){
                if(oUl.offsetLeft<-oUl.offsetWidth/2){
                    oUl.style.left = '0';
                }
                if(oUl.offsetLeft>0){
                    oUl.style.left = -oUl.offsetWidth/2+'px';
                }
                oUl.style.left = oUl.offsetLeft+2+'px';
            }
            var timer = setInterval(move,30);
            oDiv.onmouseover = function(){
                clearInterval(timer);
            };
            oDiv.onmouseout = function(){
                timer = setInterval(move,30);
            }
        };
    </script>

<body>
    <div id="div1">
        <ul>
            <li><img src="img2\1.jpg"></li>
            <li><img src="img2\2.jpg"></li>
            <li><img src="img2\3.jpg"></li>
            <li><img src="img2\4.jpg"></li>
        </ul>
    </div>
</body>
listennn08 iT邦研究生 3 級 ‧ 2019-11-25 16:31:47 檢舉
https://codepen.io/gitoxxvn/pen/RwwmQQm?editors=0110
這樣嗎
我就是想做到那樣,但是為什麼他們用oUl.style.left = oUl.offsetLeft+2+'px'就能做到?
裡面一定要改成oUl.style.marginLeft = n +'px'嗎?
listennn08 iT邦研究生 3 級 ‧ 2019-11-25 16:57:22 檢舉
不一定

1 個回答

4
咖冰拉
iT邦新手 1 級 ‧ 2019-11-25 16:22:28
最佳解答

讓ul內的圖片可以移動

可以再說清楚一點嗎? 你需要怎樣的移動
可以拖拉 還是拉到另一個DIV之類的?

整個JS看下來好像沒有移動 的程式阿/images/emoticon/emoticon04.gif

這個是你要的範例效果嗎?
https://codepen.io/ipphof/pen/dyyEdVQ

看更多先前的回應...收起先前的回應...

我主要是看這個影片做的
現在只是做出往左移動
https://www.youtube.com/watch?v=Csb3smLWENU&list=PLXfTLiJIRszzMwQS0IFcuHFD9J5dR_OPt&index=10
但是我總覺得我的oUl有問題
因為oUl.通常打出s應該都會有style可以選擇
但是他卻沒有可以選擇的

我把您JS那段複製過去我的程式碼裡
還是定格不會動
是因為我使用netbeans的關係
還是我有什麼地方出錯了?

咖冰拉 iT邦新手 1 級 ‧ 2019-11-25 16:56:59 檢舉

複製過去後
JS最外層還是要加

  window.onload = function(){};

成功了!!!!!
太感謝您了!!!
但是我想請教一下
原本我的程式碼有哪邊錯誤嗎?
兩者個差別我看不太出來~"~

不用了!!!
是我自己耍白癡....
style的第二個div沒加1..........
我在耍腦...

咖冰拉 iT邦新手 1 級 ‧ 2019-11-25 17:09:56 檢舉

/images/emoticon/emoticon04.gif

我要發表回答

立即登入回答