基于JS實(shí)現(xiàn)無(wú)縫滾動(dòng)思路及代碼分享
原理：
1.給ul一個(gè)絕對(duì)定位使其脫離文檔流，left設(shè)置為0，把圖片塞進(jìn)ul里，編寫(xiě)一個(gè)“移動(dòng)"函數(shù)，函數(shù)功能能夠使ul的left以一個(gè)正速度向右跑動(dòng)，
2.設(shè)置一個(gè)定時(shí)器，讓"移動(dòng)"函數(shù)每30(參數(shù)可變)毫秒執(zhí)行一次
3.因?yàn)閡l的長(zhǎng)度會(huì)“跑”完，此時(shí)可以使ul的content也就是img增加一倍，
oUl.innerHTML +=oUl.innerHTML;
4.此時(shí)因?yàn)閡l的content增加，其width也會(huì)隨著增大，根據(jù)實(shí)際項(xiàng)目展示圖片數(shù)量可能改動(dòng)或不確定性，
oUl.style.width = oLi.length*oLi[0].offsetWidth+'px';
5.往“移動(dòng)”函數(shù)里增添代碼。
5.1此時(shí)ul向右移動(dòng)，判斷當(dāng)ul的offsetLeft>0時(shí)，把ul向左拉“一半ul的寬度”，也就是使ul能夠向右一直無(wú)限制移動(dòng)
if(oUl.offsetLeft>0){
oUl.style.left = -oUl.offsetWidth/2+'px';
}
5.2當(dāng)ul向左移動(dòng)，其offsetLeft跑了ul一半的寬度時(shí)，把整個(gè)ul拉回至初始的left:0;
if (oUl.offsetLeft<-oUl.offsetWidth/2) {
oUl.style.left = 0;
}
上代碼：
html：
<div id="box"> <ul> <li><a href="#"><img src="1.jpg" /></a></li> <li><a href="#"><img src="2.jpg" /></a></li> <li><a href="#"><img src="3.jpg" /></a></li> <li><a href="#"><img src="4.jpg" /></a></li> </ul> </div>
css:
* {margin: 0;padding: 0;}
#box{ width: 480px; height: 110px; border: 1px red solid; margin: 100px auto;overflow: hidden; position: relative; }
#box ul{ position: absolute; left: 0; top: 5px;}
#box ul li{list-style: none; float: left; width: 100px; height: 100px; padding-left: 16px; }
#box ul li img{width: 100px; height: 100px;}
js:
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[0];
var oLi = oUl.getElementsByTagName('li');
var aA = document.getElementsByTagName('a');
var iSpeed = 10; //讓ul開(kāi)始就具有一個(gè)速度走動(dòng)
oUl.innerHTML +=oUl.innerHTML;
oUl.style.width = oLi.length*oLi[0].offsetWidth+'px';
aA[0].onclick = function(){
iSpeed = -10;
};
aA[1].onclick = function(){
iSpeed = 10;
};
function fnMove(){
if (oUl.offsetLeft<-oUl.offsetWidth/2) { //負(fù)數(shù)是因?yàn)閡l的left是負(fù)數(shù) oUl.style.left = 0;
}
else if(oUl.offsetLeft>0){ oUl.style.left = -oUl.offsetWidth/2+'px';
}
oUl.style.left = oUl.offsetLeft+iSpeed+'px'; //整個(gè)ul向右移動(dòng)
};
var timer = null;
clearInterval(timer);
timer = setInterval(fnMove,30);
oUl.onmouseover = function(){
clearInterval(timer);
};
oUl.onmouseout = function(){
timer = setInterval(fnMove,30); //當(dāng)鼠標(biāo)移開(kāi)的時(shí)候執(zhí)行這個(gè)定時(shí)器
};
};
</script>
以上所述是小編給大家分享的基于JS實(shí)現(xiàn)無(wú)縫滾動(dòng)思路及代碼，希望能夠幫助到大家，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的，在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
JavaScript編寫(xiě)棋盤(pán)覆蓋代碼詳解
這篇文章主要介紹了JavaScript編寫(xiě)棋盤(pán)覆蓋代碼詳解,需要的朋友可以參考下2017-08-08
詳解JS截取字符串的三個(gè)方法substring,substr,slice
js中有三個(gè)截取字符的方法，分別是substring()、substr()、slice()，平時(shí)我們可能都用到過(guò)，但總是會(huì)對(duì)這些方法有點(diǎn)混淆。本文將詳細(xì)介紹一下這三者的區(qū)別，需要的可以參考一下2022-03-03
這篇文章主要介紹了淺談JS包裝對(duì)象，對(duì)包裝對(duì)象感興趣的同學(xué)，一定要詳細(xì)看一下2021-04-04
淺談JavaScript 中有關(guān)時(shí)間對(duì)象的方法
下面小編就為大家?guī)?lái)一篇淺談JavaScript 中有關(guān)時(shí)間對(duì)象的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
Vue考試系統(tǒng)的后臺(tái)管理功能開(kāi)發(fā)示例解讀
這篇文章主要介紹了Vue考試系統(tǒng)后臺(tái)管理項(xiàng)目的登錄、記住密碼功能具體實(shí)現(xiàn)流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
基于javascript實(shí)現(xiàn)表格的簡(jiǎn)單操作
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)表格的簡(jiǎn)單操作，具有一定的參考價(jià)值，感興趣的朋友可以參考一下2016-05-05
JS實(shí)現(xiàn)單個(gè)或多個(gè)文件批量下載的方法詳解
在前端Web開(kāi)發(fā)中，下載文件是一個(gè)很常見(jiàn)的需求。這篇文章就來(lái)和大家介紹下幾種download解決方案，以及特殊Case的最佳方案選擇，希望對(duì)大家有所幫助2023-02-02
javascript實(shí)現(xiàn)的textarea運(yùn)行框效果代碼 不用指定id批量指定
今天在寫(xiě)一個(gè)網(wǎng)頁(yè)的時(shí)候用到了N多嵌套在textarea標(biāo)簽里的代碼，定義雙擊運(yùn)行其內(nèi)的代碼段。但是每次創(chuàng)建一個(gè)這樣的可運(yùn)行的實(shí)例都要給textarea元素自定義一個(gè)id值和寫(xiě)入雙擊事件，好不麻煩。2009-12-12
TypeScript調(diào)整數(shù)組元素順序算法
數(shù)組類(lèi)型在TS中可以使用多種方式,比較靈活,下面這篇文章主要給大家介紹了關(guān)于TypeScript調(diào)整數(shù)組元素順序算法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
這篇文章主要介紹了JavaScript事件用法,較為詳細(xì)的分析了javascript事件流、事件類(lèi)型及事件操作技巧,需要的朋友可以參考下2016-10-10