首页 > 代码库 > 无缝滚动
无缝滚动
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{margin: 0;padding: 0;} 8 #wrap{width: 1000px;height: 200px;border: 1px solid red;overflow: hidden;margin: 100px auto;} 9 #con{width: 3000px;height: 200px;overflow: hidden;}10 #con img{float: left;width: 200px;height: 200px;}11 input{width: 50px;height: 50px;}12 </style>13 </head>14 <body>15 <div id="wrap">16 <div id="con">17 <img src="img/01.jpg" alt="">18 <img src="img/02.jpg" alt="">19 <img src="img/03.jpg" alt="">20 <img src="img/04.jpg" alt="">21 <img src="img/05.jpg" alt="">22 <img src="img/01.jpg" alt="">23 <img src="img/02.jpg" alt="">24 <img src="img/03.jpg" alt="">25 <img src="img/04.jpg" alt="">26 <img src="img/05.jpg" alt="">27 28 </div>29 </div>30 <input type="button" value="go">31 <input type="button" value="stop">32 33 <script>34 var wrap=document.getElementById(‘wrap‘);35 var con=document.getElementById(‘con‘);36 var imgs=con.getElementsByTagName(‘img‘);37 var inp=document.getElementsByTagName(‘input‘);38 var imgw=imgs[0].offsetWidth;39 var time1=null;40 function timego() {41 time1=setInterval(function() {42 wrap.scrollLeft+=1;43 if (wrap.scrollLeft>=imgw*5) {44 wrap.scrollLeft=0;45 };46 },10)47 };48 //封装函数减少代码量，函数代表的是计时器的执行49 50 timego();//进入页面自动执行；51 wrap.onmouseover=function() {52 clearInterval(time1);53 };54 wrap.onmouseout=function() {55 timego();56 };57 inp[0].onclick=function() {58 clearInterval(time1);59 timego();60 };61 inp[1].onclick=function() {62 clearInterval(time1);63 };64 </script>65 </body>66 </html>
无缝滚动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。