直接附上程式碼
這是在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>
已邀請的邦友 {{ invite_list.length }}/5
讓ul內的圖片可以移動
可以再說清楚一點嗎? 你需要怎樣的移動
可以拖拉 還是拉到另一個DIV之類的?
整個JS看下來好像沒有移動 的程式阿
這個是你要的範例效果嗎?
https://codepen.io/ipphof/pen/dyyEdVQ
我主要是看這個影片做的
現在只是做出往左移動
https://www.youtube.com/watch?v=Csb3smLWENU&list=PLXfTLiJIRszzMwQS0IFcuHFD9J5dR_OPt&index=10
但是我總覺得我的oUl有問題
因為oUl.通常打出s應該都會有style可以選擇
但是他卻沒有可以選擇的
我把您JS那段複製過去我的程式碼裡
還是定格不會動
是因為我使用netbeans的關係
還是我有什麼地方出錯了?
複製過去後
JS最外層還是要加
window.onload = function(){};
iThome鐵人賽
看影片追技術