2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

原生JS實(shí)現(xiàn)圖片滾動(dòng)

一、原理

黑色盒子是最終顯示滾動(dòng)圖像的區(qū)域，綠色盒子為其子容器，其寬度要大于黑色外層盒子，這樣才能通過設(shè)置黑色盒子的scrollLeft實(shí)現(xiàn)圖像的滾動(dòng)。最內(nèi)層的藍(lán)色盒子用于包裹所有滾動(dòng)的圖像，而紫色的盒子的內(nèi)容將來將與藍(lán)色盒子相同，以實(shí)現(xiàn)無縫的圖像滾動(dòng)。 通過JS的定時(shí)器每隔一定的時(shí)間，更改黑色盒子的scrollLeft屬性的值，使圖像向左進(jìn)行滾動(dòng)，同時(shí)判斷scrollLeft的值，如果其值到達(dá)黑色盒子容器的最右側(cè)時(shí)，說明藍(lán)色盒子已經(jīng)向左側(cè)滾動(dòng)出了黑色盒子，紫色盒子剛好全部位于黑色盒子內(nèi)部。此時(shí)，需要將黑色盒子的scrollLeft的值設(shè)置為0，重新開始。

二、代碼

1.html代碼

<!\-\- 最外層盒子 --\> <div id="box"> <div id="boxin"> <div id="neirong"> <img src="Images/C_2.jpg" alt=""> <img src="Images/C_3.jpg" alt=""> <img src="Images/C_4.jpg" alt=""> <img src="Images/C_5.jpg" alt=""> <img src="Images/C_6.jpg" alt=""> </div> <div id="neirong2"></div> </div> </div>

2.CSS代碼

*{margin: 0; padding: 0; } #box{ height: 100px; width: 500px; overflow: hidden; } #boxin{ width: 1064px; height: 100px; }#neirong{float: left;}#neirong2{float: left;}img{width: 100px;height: 100px;} </style>

3.JS代碼

<script>var timer;var speed=10;var box=document.getElementById("box");var boxin=document.getElementById("boxin");var neirong=document.getElementById("neirong");var neirong2=document.getElementById("neirong2");neirong2.innerHTML=neirong.innerHTML;function move(){if(neirong2.scrollWidth-box.scrollLeft<=0){box.scrollLeft=0;}else{box.scrollLeft++;} }box.onmouseover=function(){clearInterval(timer);}box.onmouseout=function(){timer=setInterval(move,speed);}timer=setInterval(move,speed);</script>

轉(zhuǎn)載于:https://my.oschina.net/u/3537796/blog/3047527

總結(jié)

以上是生活随笔為你收集整理的原生JS实现图片滚动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。