js原生之焦点图转换加定时器
在jQuery之焦点图转换-左右的基础上，将jQuery代码改成js原生，并添加定时器（setInterval()和clearInterval()）
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>焦点图转换--原生和定时器</title> 6 <link rel="stylesheet" href="css/reset.css"> 7 <style type="text/css"> 8 .pic-show{width: 480px;overflow: hidden;} 9 #pic{width: 1920px;height: 320px;position: relative;} 10 #pic img{display: block;float: left;} 11 .pic-show>img{display: block;cursor: pointer;opacity: 0.8; position: absolute;top: 142px;left: 30px;} 12 .pic-show>img:last-child{display: block; position: absolute;left: 414px; } 13 ul{width: 120px;height: 18px;position: absolute;top: 280px;left: 185px;} 14 li{float: left;width: 20px;height: 18px;margin-left: 5px;} 15 a{display: block;width: 20px;height: 18px;text-decoration: none;border: 1px solid #ccc;border-radius: 50%;background-color: #ccc;opacity: 0.6;} 16 a:hover{background-color: #094a99;} 17 .aCss{background-color: #094a99;} 18 p{width: 480px;text-align: center;} 19 20 </style> 21 </head> 22 <body> 23 <div class="pic-show"> 24 <div id="pic"> 25 <img src="images/1.jpg" alt=""> 26 <img src="images/2.jpg" alt=""> 27 <img src="images/3.jpg" alt=""> 28 <img src="images/4.jpg" alt=""> 29 </div> 30 <img id="prev" src="images/slider-prev.png" alt=""> 31 <img id="next" src="images/slider-next.png" alt=""> 32 </div> 33 <ul id="list"> 34 <li><a href="#" title="日落"></a></li> 35 <li><a href="#" title="钢琴"></a></li> 36 <li><a href="#" title="大海"></a></li> 37 <li><a href="#" title="秋色"></a></li> 38 </ul> 39 <p id="p">这是一段测试文字</p> 40 <script src="js/jquery-3.0.0.js"></script> 41 <script type="text/javascript"> 42 var num=0; 43 function G(id){ 44 return document.getElementById(id) 45 } 46 var pic = G('pic') 47 var next = G('next') 48 var prev = G('prev') 49 var p = G('p') 50 var list = G('list') 51 var arr = G('list').getElementsByTagName('a')
//点击next 52 next.onclick=function(){ 53 if(num<3){ 54 num=num+1; 55 } 56 else{ 57 num=0; 58 } 59 console.log(num); 60 var mlNum=num * -480+'px'; 61 pic.style.marginLeft=mlNum; 62 for(var j=0;j<arr.length;j++){ 63 arr[j].style.backgroundColor='#ccc'; 64 } 65 arr[num].style.backgroundColor="#094a99"; 66 event.preventDefault(); 67 68 var txt=arr[num].getAttribute("title"); 69 console.log(txt); 70 p.textContent=txt; 71 }
//点击prev 72 prev.onclick=function(){ 73 if(num>0){ 74 num=num-1; 75 } 76 else{ 77 num=3; 78 } 79 console.log(num); 80 var mlNum2=num * -480+'px'; 81 pic.style.marginLeft=mlNum2; 82 for(var j=0;j<arr.length;j++){ 83 arr[j].style.backgroundColor='#ccc'; 84 } 85 arr[num].style.backgroundColor="#094a99"; 86 event.preventDefault(); 87 88 var txt=arr[num].getAttribute("title"); 89 console.log(txt); 90 p.textContent=txt; 91 } 92 for(var i=0;i<arr.length;i++){ 93 arr[i].index=i;//创建索引值 94 arr[i].onclick=function(event){ 95 num=this.index; 96 var mlNum3=num * -480+'px'; 97 pic.style.marginLeft=mlNum3; 98 for(var j=0;j<arr.length;j++){ 99 arr[j].style.backgroundColor='#ccc'; 100 } 101 this.style.backgroundColor='#094a99'; 102 event.preventDefault(); 103 104 var txt=this.getAttribute("title"); 105 p.textContent=txt; 106 } 107 }
//函数封装 108 function lunbo(){ 109 if(num<3){ 110 num=num+1; 111 } 112 else{ 113 num=0; 114 } 115 console.log(num); 116 var mlNum=num * -480+'px'; 117 pic.style.marginLeft=mlNum; 118 for(var j=0;j<arr.length;j++){ 119 arr[j].style.backgroundColor='#ccc'; 120 } 121 arr[num].style.backgroundColor="#094a99"; 122 event.preventDefault(); 123 124 var txt=arr[num].getAttribute("title"); 125 console.log(txt); 126 p.textContent=txt; 127 }
//通过定时器调用封装好的函数 128 var stop=setInterval(lunbo,1500);
//鼠标放上和离开时定时器的状态 129 pic.onmouseenter=function(){ 130 clearInterval(stop) 131 } 132 pic.onmouseleave=function(){ 133 stop=setInterval(lunbo,1500) 134 } 135 </script> 136 137 </body> 138 </html>
