无缝滚动——QQ仙灵

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>]
  6     <style>
  7         *
  8         {
  9             margin: 0;
 10             padding: 0;
 11         }
 12         #div1
 13         {
 14             width: 660px;
 15             height: 125px;
 16             border: 1px solid #ccc;
 17             overflow: scroll;
 18             margin: 80px auto;
 19         }
 20         #div2
 21         {
 22             width: 1500px;
 23             height: 124px;
 24             overflow: hidden;
 25         }
 26         #div2 img
 27         {
 28             width: 220px;
 29             height: 124px;
 30             float: left;
 31         }
 32         #div3
 33         {
 34             text-align: center;
 35         }
 36         #div3 button
 37         {
 38             width: 80px;
 39             height: 40px;
 40         }
 41     </style>
 42 </head>
 43 <body>
 44     <div id="div1">
 45         <div id="div2">
 46             <img src="images/人物1.jpg" alt="">
 47             <img src="images/人物2.jpg" alt="">
 48             <img src="images/人物3.jpg" alt="">
 49         </div>
 50     </div>
 51     <div id="div3">
 52         <button>关闭</button>
 53         <button>左转三圈</button>
 54         <button>右转三圈</button>
 55     </div>
 56     <!-- =================================================JS====================================================== -->
 57     <script>
 58 
 59         var div1=document.getElementById('div1');
 60         var div2=document.getElementById('div2');
 61         var imgs=div2.getElementsByTagName('img');
 62         var time1=null,time2=null,time3=null,time4=null;
 63         var div3=document.getElementById("div3");
 64         var bt=div3.getElementsByTagName("button");
 65         var a=1;
 66         div2.innerHTML+=div2.innerHTML;
 67 
 68         function rightMove() {//图片向左滚动
 69             a=1;
 70             div1.scrollLeft++;
 71                 if (div1.scrollLeft>=imgs[0].offsetWidth*3) {
 72                     div1.scrollLeft=0;
 73                 };                        
 74                 if (div1.scrollLeft%imgs[0].offsetWidth==0) {
 75                     clearInterval(time1);
 76                     time2=setTimeout(function() {
 77                     time1=setInterval(rightMove,20);
 78                 },1000);    
 79             };                
 80         }            
 81         function leftMove () {//图片向右滚动
 82             a=0;
 83             div1.scrollLeft--;
 84                 if (div1.scrollLeft<=0) {
 85                     div1.scrollLeft=imgs[0].offsetWidth*3;
 86                 };                        
 87                 if (div1.scrollLeft%imgs[0].offsetWidth==0) {
 88                     clearInterval(time4);
 89                     time3=setTimeout(function() {
 90                     time4=setInterval(leftMove,20);
 91                 },1000);    
 92             };                
 93         }    
 94         div1.onmouseover=function() {
 95             clearInterval(time1);
 96             clearTimeout(time2);
 97             clearInterval(time4);
 98             clearTimeout(time3);
 99         };
100         div1.onmouseout=function() {
101             if (a) {
102                 time1=setInterval(rightMove,20);
103             }else{
104                 time4=setInterval(leftMove,20);
105             };
106         };
107         bt[1].onclick=function() {
108             clearInterval(time1);
109             clearTimeout(time2);
110             clearInterval(time4);
111             clearTimeout(time3);
112             time1=setInterval(rightMove,20);
113         };
114         bt[2].onclick=function(){
115             clearInterval(time1);
116             clearTimeout(time2);
117             clearInterval(time4);
118             clearTimeout(time3);
119             time4=setInterval(leftMove,20);
120         };
121         bt[0].onclick=function() {
122             window.close();
123         };
124     </script>
125 </body>
126 </html>
View Code