第三十二节 JavaScript无缝滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ 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; border-radius: 15px; cursor: pointer; opacity: 0.5; } .right{ left: 1010px; top: 124px; } </style> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('slide') var oUl = document.getElementsByTagName('ul')[0]; var oBtn01 = document.getElementById('btn01'); var oBtn02 = document.getElementById('btn02'); oUl.innerHTML += oUl.innerHTML; // 再copy一份li元素,总共变成10个li元素 var iLeft = 0; var iSpeed = 2; var iNowspeed = 0; function moving(){ iLeft += iSpeed; // 当向左拉动完10个li时,瞬间将left拉到第五个图片结尾,以便无缝继续滚动 if(iLeft<-1000){ iLeft = 0; } if(iLeft>0){ iLeft = -1000; } oUl.style.left = iLeft + 'px'; } var timer = setInterval(moving,30); oBtn01.onclick = function(){ iSpeed = -2; } oBtn02.onclick = function(){ iSpeed = 2; } // 鼠标停留事件onmouseover oDiv.onmouseover = function(){ iNowspeed = iSpeed; iSpeed = 0; } // 鼠标离开事件onmouseover oDiv.onmouseout = function(){ iSpeed = iNowspeed; } } </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> <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>