效果图如下:HTML代码如下：<!DOCTYPE html><html lan...
效果图如下:
HTML代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>无缝滚动</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、自动播放-- 左侧 多次循环 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 = -5 var oTimer = null // 程序复制两份产品 oList.innerHTML += oList.innerHTML // oList.innerHTML = oList.innerHTML + oList.innerHTML oTimer = setInterval(fnMove, 50) function fnMove(){ num += speed // 如果left小于-1000，回到left为0继续左侧移动 if(num < -1000) { num = 0 } if(num>0) { num = -1000 } oList.style.left = num +'px' } // 2、左右箭头单击，右 -- 右侧移动 左 -- 左侧移动 oBtn02.onclick = function(){ speed = 5 } oBtn01.onclick = function(){ speed = -5 } // 3、鼠标滑过停止播放 - 鼠标离开继续播放 oSlide.onmouseover = function(){ // 停止定时器 clearInterval(oTimer) } oSlide.onmouseout = function(){ // 开启定时器 oTimer = setInterval(fnMove, 50) }}
------- 知识无价，汗水有情，如需搬运请注明出处，谢谢！
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
上一篇：2018年十大数据泄露事件看看都有哪些？|中机智库 下一篇：面试问题
