您好,登錄后才能下訂單哦!
這篇文章主要介紹純js怎么實(shí)現(xiàn)無縫滾動(dòng)功能代碼,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
HTML代碼
<!--父容器要使用overflow: hidden;--> <div id="imgsList" > <!--滾動(dòng)容器--> <div id="marquee_self"> <ul id="marquee_ul"> <li><img src="" width="180px" height="100px"></li> <li><img src="" width="180px" height="100px"></li> <li><img src="" width="180px" height="100px"></li> </ul> </div> </div>
CSS代碼
#marquee_self *{ margin: 0; padding: 0; } #marquee_self{ width: 1620px; //所有圖片長度個(gè)數(shù)*width height: 100px; //圖片高度 //margin: 100px auto; 居中 background-color: #646464; position: relative; overflow: hidden; } #marquee_self ul{ position:absolute; left:0; top:0; overflow: hidden; //li中超出部分隱藏掉 background-color: #3b7796; //背景色用來看問題 } #marquee_self ul li{ float: left; //左對(duì)齊變?yōu)閳D片水平 width: 180px; //圖片寬度 height: 100px; //圖片高度 list-style: none; //無間隙 }
JS代碼
<script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('marquee_self'); //容器節(jié)點(diǎn) var oUl = document.getElementById('marquee_ul'); //ul節(jié)點(diǎn) var speed = -2; //初始化速度,默認(rèn)往左 oUl.innerHTML += oUl.innerHTML;//ul中圖片內(nèi)容翻倍 var oLi= oUl.getElementsByTagName('li'); //獲取ul節(jié)點(diǎn)下所有l(wèi)i集合 oUl.style.width = oLi.length*180+'px';//設(shè)置ul的寬度翻倍后的寬度,使圖片可以放下 /*var oBtn1 = document.getElementById('btn_left'); 左移動(dòng)按鈕 var oBtn2 = document.getElementById('btn_right'); 右移動(dòng)按鈕*/ function move(){ if(oUl.offsetLeft<-(oUl.offsetWidth/2)){ //向左滾動(dòng),當(dāng)向左滾動(dòng)超過總ul長度一半時(shí) oUl.style.left = 0; //變?yōu)閺念^開始 } if(oUl.offsetLeft > 0){ //向右滾動(dòng),當(dāng)靠右的圖1移出邊框時(shí) oUl.style.left = -(oUl.offsetWidth/2)+'px'; } oUl.style.left = oUl.offsetLeft + speed + 'px'; //圖片移動(dòng) } /*oBtn1.addEventListener('click',function(){ //向左移動(dòng)按鈕點(diǎn)擊事件 speed = -2; },false); oBtn2.addEventListener('click',function(){ //向右移動(dòng)按鈕點(diǎn)擊事件 speed = 2; },false);*/ var timer = setInterval(move,30);//全局變量 ,保存返回的定時(shí)器 oDiv.addEventListener('mouseout', function () { //鼠標(biāo)移開添加計(jì)時(shí)器 timer = setInterval(move,30); },false); oDiv.addEventListener('mousemove', function () { //鼠標(biāo)移入清除定時(shí)器 clearInterval(timer); },false); } </script>
以上是“純js怎么實(shí)現(xiàn)無縫滾動(dòng)功能代碼”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。