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>
