JavaScript定時(shí)器實(shí)現(xiàn)無(wú)縫滾動(dòng)圖片
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)無(wú)縫滾動(dòng)圖片的具體代碼,供大家參考,具體內(nèi)容如下
文本:
- setInterval 開啟間隔型定時(shí)器
- clearTimeout 關(guān)閉定時(shí)器
- offsetWidth 獲取寬度
- offsetLeft 獲取向左偏移量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>無(wú)縫移動(dòng)</title> <style> *{margin: 0; padding: 0;} #div1{width:520px; height:170px; margin:20px auto; position: relative; /* !!! div1 的位置是相對(duì)的 */ background: pink; overflow: hidden} /* !!! overflow: hidden */ #div1 ul{position: absolute; left:0; top:0;} /* !!! ul 的 position:絕對(duì)的,控制left的值 */ #div1 ul li{float:left; width:130px; height:170px; list-style: none} </style> <script> window.onload=function () { var oDiv=document.getElementById('div1'); var oUl=oDiv.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li'); var speed = 2; oUl.innerHTML+=oUl.innerHTML; // 相當(dāng)于 4*2 張圖像在移動(dòng) oUl.style.width=aLi[0].offsetWidth * aLi.length + 'px'; // !!!!!! offsetWidth function Move() { if(oUl.offsetLeft < - oUl.offsetWidth/2){ // 移動(dòng)到左邊的一半 就 回來(lái) oUl.style.left='0'; } if(oUl.offsetLeft>0){ // // 移動(dòng)到右邊的一半就回來(lái) oUl.style.left = - oUl.offsetWidth/2 +'px'; } oUl.style.left=oUl.offsetLeft + speed + 'px'; // !!!!!!!! offsetLeft } var Timer1= setInterval(Move, 30); // setInterval 開啟間隔型定時(shí)器 oDiv.onmouseover=function () { clearTimeout(Timer1); }; oDiv.onmouseout=function () { Timer1=setInterval(Move, 30); }; document.getElementsByTagName('a')[0].onclick=function () { speed=-2; // 向左的速度 }; document.getElementsByTagName('a')[1].onclick=function () { speed=2; // 向右的速度 }; }; </script> </head> <body> <a href="javascript:;" >向左移動(dòng)</a> <a href="javascript:;" >向右移動(dòng)</a> <div id="div1"> <ul> <li><img src="img/aa.jpg"/></li> <li><img src="img/bb.jpg"/></li> <li><img src="img/cc.jpg"/></li> <li><img src="img/dd.jpg"/></li> </ul> </div> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)可動(dòng)的canvas環(huán)形進(jìn)度條
這篇文章主要介紹了如何利用JavaScript canvas繪制一個(gè)可以動(dòng)的環(huán)形進(jìn)度條。文中的示例代碼講解詳細(xì),感興趣的小伙伴可以動(dòng)手試一試2022-02-02js實(shí)現(xiàn)帶緩動(dòng)動(dòng)畫的導(dǎo)航欄效果
本篇文章主要分享了js實(shí)現(xiàn)帶緩動(dòng)動(dòng)畫的導(dǎo)航欄效果的示例代碼。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01javascript 計(jì)算兩個(gè)整數(shù)的百分比值
用來(lái)計(jì)算兩個(gè)整數(shù)的百分比值的代碼,需要的可以看看。2009-12-12JavaScript設(shè)計(jì)模式之享元模式實(shí)例詳解
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之享元模式,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript享元模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2019-01-01JavaScript自定義日期格式化函數(shù)詳細(xì)解析
下面的一個(gè)例子就是以獨(dú)立函數(shù)寫出的JavaScript日期格式化函數(shù),獨(dú)立的format函數(shù)?;氐礁袷交倪@一知識(shí)點(diǎn)上,我們考查的是怎么實(shí)現(xiàn)的、運(yùn)用了哪些原理2014-01-01javascript實(shí)現(xiàn)的登陸遮罩效果匯總
小編給大家推薦幾款使用Javascript實(shí)現(xiàn)的遮罩效果登陸框,其實(shí)這種效果是很常見(jiàn)的,在許多互動(dòng)的社區(qū)及其它的一些地方,彈出框應(yīng)用想當(dāng)流行,在不妨礙網(wǎng)頁(yè)運(yùn)行的情況下,用戶可以輸入登錄信息,實(shí)現(xiàn)完美登錄。2015-11-11javascript實(shí)現(xiàn)限制上傳文件大小
這篇文章主要介紹了javascript實(shí)現(xiàn)限制上傳文件大小的方法和示例,需要的朋友可以參考下2015-02-02