JS+css3焦點輪播圖PC端
阿新 • • 發佈：2017-08-07
this pos none name index else -h head pointer
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js原生web輪播圖</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 list-style: none; 11 -moz-user-select: none;/*文字不可選擇*/ 12 -khtml-user-select: none;/*文字不可選擇*/ 13 user-select: none;/*文字不可選擇*/ 14 } 15 #container{ 16 width: 600px; 17 height: 400px; 18 position: relative; 19 overflow: hidden; 20 } 21 #slider{ 22 margin-left:-600px; 23 width: 4200px; 24 height: 400px; 25 } 26 #slider li{ 27 width: 600px; 28 height: 400px; 29 float: left; 30 } 31 img{ 32 width: 600px; 33 height: 400px; 34 } 35 #prev{ 36 position: absolute; 37 top:40%; 38 left:0px; 39 width: 50px; 40 height: 50px; 41 background-color: #eee; 42 z-index: 999; 43 line-height:50px; 44 text-align: center; 45 } 46 #prev:hover{ 47 cursor: pointer; 48 } 49 #next{ 50 position: absolute; 51 top:40%; 52 right:0px; 53 width: 50px; 54 height: 50px; 55 background-color: #eee; 56 z-index: 999; 57 line-height:50px; 58 text-align: center; 59 } 60 #next:hover{ 61 cursor: pointer; 62 } 63 #dotul{ 64 position: absolute; 65 bottom:100px; 66 left:38%; 67 width: 150px; 68 height: 20px; 69 } 70 .dot{ 71 background-color: green; 72 } 73 #dotul li{ 74 margin-left:10px; 75 width: 20px; 76 height: 20px; 77 float: left; 78 border-radius: 10px; 79 z-index: 999; 80 } 81 li{ 82 background-color: red; 83 } 84 </style> 85 </head> 86 <body> 87 <div id="container"> 88 <ul id="slider"> 89 <li><img src="5.jpg" alt=""></li> 90 <li><img src="1.jpg" alt=""></li> 91 <li><img src="2.jpg" alt=""></li> 92 <li><img src="3.jpg" alt=""></li> 93 <li><img src="4.jpg" alt=""></li> 94 <li><img src="5.jpg" alt=""></li> 95 <li><img src="1.jpg" alt=""></li> 96 </ul> 97 <ul id="buttons"> 98 <li id="prev">上一張</li> 99 <li id="next">下一張</li> 100 </ul> 101 <div id="dots"> 102 <ul id="dotul"> 103 <li index="1" class="dot"></li> 104 <li index="2"></li> 105 <li index="3"></li> 106 <li index="4"></li> 107 <li index="5"></li> 108 </ul> 109 </div> 110 </div> 111 112 <script> 113 var container = document.getElementById(‘container‘); 114 var slider = document.getElementById(‘slider‘); 115 var prev=document.getElementById(‘prev‘); 116 var next=document.getElementById(‘next‘); 117 var dots=document.getElementById(‘dotul‘).getElementsByTagName(‘li‘); 118 var index=1; 119 var timer; 120 function dotsInit(){ 121 for (var i = 0; i < dots.length; i++) { 122 console.log(dots[i]); 123 dots[i].onclick=function(){ 124 var $index=parseInt(this.getAttribute("index")); 125 slider.style.marginLeft=($index)*(-600)+"px"; 126 index=$index; 127 } 128 } 129 } 130 dotsInit(); 131 function animate(option){ 132 var sliderLeft=slider.offsetLeft; 133 slider.style.marginLeft=parseInt(sliderLeft)+option+‘px‘; 134 } 135 function dotsTurn(){ 136 for(var i=0;i<dots.length;i++){ 137 if(dots[i].getAttribute(‘index‘)==index){ 138 dots[i].className=‘dot‘ 139 }else{ 140 dots[i].className=‘‘ 141 } 142 } 143 } 144 prev.onclick=function(){ 145 if(slider.offsetLeft % 600 !=0){ 146 return; 147 } 148 slider.style.transition="0.5s"; 149 animate(600); 150 (index==1)?(index=5):index--; 151 } 152 next.onclick=function(){ 153 if(slider.offsetLeft % 600 !=0){ 154 return; 155 } 156 slider.style.transition="0.5s"; 157 animate(-600); 158 (index==5)?(index=1):index++; 159 } 160 slider.addEventListener("transitionend",function(){ 161 if(slider.offsetLeft==-3600){ 162 slider.style.transition="0s"; 163 slider.style.marginLeft="-600px"; 164 } 165 if(slider.offsetLeft==0){ 166 slider.style.transition="0s"; 167 slider.style.marginLeft="-3000px"; 168 } 169 dotsTurn(); 170 }); 171 function init(){ 172 slider.style.transition="0.5s"; 173 timer=setInterval(next.onclick,5000); 174 } 175 init(); 176 slider.addEventListener(‘mouseenter‘,function(){ 177 clearInterval(timer); 178 }) 179 slider.addEventListener(‘mouseout‘,init) 180 </script> 181 </body> 182 </html>
JS+css3焦點輪播圖PC端