js动画之无缝滚动
效果圖如下:
HTML代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>無(wú)縫滾動(dòng)</title><style type="text/css">body,ul{margin:0;padding:0;}.list_con{width:1000px;height:200px;border:1px solid #000;margin:10px auto 0;background-color:#f0f0f0;position:relative;overflow:hidden;}.list_con ul{list-style:none;width:2000px;height:200px;position:absolute;left:0;top:0;}.list_con li{width:180px;height:180px;float:left;margin:10px;}.btns_con{width:1000px;height:30px;margin:50px auto 0;position:relative;}.left,.right{width:30px;height:30px;background-color:gold;position:absolute;left:-40px;top:124px;font-size:30px;line-height:30px;color:#000;font-family: 'Arial';text-align:center;cursor:pointer;border-radius:15px;opacity:0.5;}.right{left:1010px; top:124px; }</style><script src="js/move.js"></script> </head> <body><div class="btns_con"><div class="left" id="btn01"><</div><div class="right" id="btn02">></div></div><div class="list_con" id="slide"><ul id="list"><li><a href=""><img src="images/goods001.jpg" alt="商品圖片"></a></li><li><a href=""><img src="images/goods002.jpg" alt="商品圖片"></a></li><li><a href=""><img src="images/goods003.jpg" alt="商品圖片"></a></li><li><a href=""><img src="images/goods004.jpg" alt="商品圖片"></a></li><li><a href=""><img src="images/goods005.jpg" alt="商品圖片"></a></li></ul></div> </body> </html>JS代碼如下：
window.onload = function(){// alert(1)// 1、自動(dòng)播放-- 左側(cè) 多次循環(huán) left減小var oList = this.document.getElementById('list')var oBtn01 = document.getElementById('btn01')var oBtn02 = document.getElementById('btn02')var oSlide = document.getElementById('slide')var num = 0 // left取值var speed = -5var oTimer = null// 程序復(fù)制兩份產(chǎn)品oList.innerHTML += oList.innerHTML// oList.innerHTML = oList.innerHTML + oList.innerHTMLoTimer = setInterval(fnMove, 50)function fnMove(){num += speed// 如果left小于-1000，回到left為0繼續(xù)左側(cè)移動(dòng)if(num < -1000){num = 0}if(num>0){num = -1000}oList.style.left = num +'px'}// 2、左右箭頭單擊，右 -- 右側(cè)移動(dòng) 左 -- 左側(cè)移動(dòng)oBtn02.onclick = function(){speed = 5}oBtn01.onclick = function(){speed = -5}// 3、鼠標(biāo)滑過(guò)停止播放 - 鼠標(biāo)離開(kāi)繼續(xù)播放oSlide.onmouseover = function(){// 停止定時(shí)器clearInterval(oTimer)}oSlide.onmouseout = function(){// 開(kāi)啟定時(shí)器oTimer = setInterval(fnMove, 50)} }
?
???????????????????????????????????????????????????????????????????-------??知識(shí)無(wú)價(jià)，汗水有情，如需搬運(yùn)請(qǐng)注明出處，謝謝！
總結(jié)
- 上一篇： iOS9的几个新关键字（nonnull、
- 下一篇： 2018 美团、腾讯、头条、蔚来 社招面