效果 : 滑鼠移入圖片 停止滾動, 滑鼠移出自動滾動
可以調整向左或右方向滾動
以上是一個簡單的佈局,以下是主要的Javascript 程式碼
window.onload = function() {
var oDiv = document.getElementById("div1");
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
無功速度 = 2;
oUl.innerHTML = oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length 'px';
函數 move() {
if (oUl.offsetLeft
oUl.style.left = '0';
}
if (oUl.offsetLeft > 0) {
oUl.style.left = -oUl.offsetWidth / 2 'px';
}
oUl.style.left = oUl.offsetLeft 速度 'px';
}
var time = setInterval(move, 30);
oDiv.onmouseover = function() {
清除間隔(計時器);
};
oDiv.onmouseout = function() {
計時器 = setInterval(move, 30);
};
document.getElementsByTagName('a')[0].onclick = function() {
速度 = -2;
};
document.getElementsByTagName('a')[1].onclick = function() {
速度 = 2;
};
}
>腳本
簡單講下思路:
先設定ul裡面的圖片共有8張 oUl.innerHTML = oUl.innerHTML;
在計算ul的寬度為li的實際寬度*8
之後將多餘的內容隱藏
注意: oUl.offsetLeft 一定是負值
所以判斷的時候不要把負號漏掉
if (oUl.offsetLeft
oUl.style.left = '0';
}
這段表示 圖片滾動到一半了,迅速把圖片拉回來,因為程式執行的太快,所以幾乎看不出來 實現無縫滾動
最後使用 變數 speed 來控制左右方向的滾動。
以上程式碼只是實現了最基本的功能,小夥伴們可以在此基礎上繼續完善。