首页 > 代码库 > 计时器——QQ仙灵
计时器——QQ仙灵
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style> 8 * 9 {10 margin: 0;11 padding: 0;12 }13 #all14 {15 width:1320px;16 height:124px; 17 border:1px solid #ccc;18 margin: 50px auto;19 overflow: hidden;20 }21 #con22 {23 height: 124px;24 width: 3000px;25 overflow: hidden;26 }27 #con img28 {29 float: left;30 width: 220px;31 height: 124px;32 }33 input34 {35 margin: 30px 150px;36 width: 50px;37 height: 50px;38 color: pink;39 40 }41 </style>42 <body>43 <div id="all">44 <div id="con">45 <img src="img/人物1.jpg" alt="">46 <img src="img/人物2.jpg" alt="">47 <img src="img/人物3.jpg" alt="">48 <img src="img/人物4.jpg" alt="">49 <img src="img/人物5.jpg" alt="">50 <img src="img/人物6.jpg" alt="">51 </div>52 </div>53 <input type="button" value="start">54 <input type="button" value="stop">55 56 <script>57 var all=document.getElementById(‘all‘);58 var con=document.getElementById(‘con‘);59 var imgs=con.getElementsByTagName(‘img‘);60 var inp=document.getElementsByTagName(‘input‘);61 var timer=null;62 con.innerHTML+=con.innerHTML;//实现图片内容的复制63 function timego () {64 timer=setInterval(function(){65 all.scrollLeft+=5;66 if (all.scrollLeft==imgs[0].offsetWidth*6) {67 all.scrollLeft=0;68 };69 },50);70 };71 timego();72 all.onmouseover=function() {73 clearInterval(timer);74 };75 all.onmouseout=function() {76 timego();77 };78 inp[0].onclick=function() {79 clearInterval(timer);80 timego();81 };82 inp[1].onclick=function() {83 clearInterval(timer);84 };85 </script>86 </body>87 </html>
计时器——QQ仙灵
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。