js實現輪播圖
阿新 • • 發佈：2017-05-05
display lex tee 添加 har scrip con tle win
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>輪播圖</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding:0; 10 } 11 .carousel{ 12 margin:0 auto; 13 width:400px; 14 height: 300px; 15 position: relative; 16 } 17 span{ 18 width:20px; 19 height:20px; 20 background: rgba(0,0,0,.6); 21 border-radius: 50%; 22 } 23 a{ 24 text-decoration: none; 25 color:#fff; 26 } 27 p{ 28 width:200px; 29 text-align: center; 30 line-height: 20px; 31 position: absolute; 32 top:260px; 33 left:100px; 34 display: flex; 35 justify-content: space-around; 36 } 37 </style> 38 <script type="text/javascript"> 39 window.onload =function () { 40 var aNode = document.getElementsByTagName("a"); 41 var divNode = document.getElementsByTagName("div")[0]; 42 var imgNode = document.createElement("img"); 43 for (var position in aNode) { 44 aNode[position].onclick = function () { 45 var index = this.innerText; 46 carousel(index); 47 } 48 } 49 function carousel(index) { 50 imgNode.src = ‘images/‘ + index + ‘.jpg‘ + ‘/‘; 51 divNode.appendChild(imgNode); 52 } 53 var i = 1; 54 imgNode.src = ‘images/‘ + i + ‘.jpg‘ + ‘/‘; 55 function change() { 56 imgNode.src = ‘images/‘ + i + ‘.jpg‘ + ‘/‘; 57 i++; 58 if (i == 7) { 59 i = 1; 60 } 61 } 62 divNode.appendChild(imgNode); 63 setInterval(change, 1500); 64 } 65 </script> 66 </head> 67 <body> 68 <div class="carousel"> 69 <p> 70 <span><a href="#" onclick="carousel(1)">1</a></span> 71 <span><a href="#" onclick="carousel(2)">2</a></span> 72 <span><a href="#" onclick="carousel(3)">3</a></span> 73 <span><a href="#" onclick="carousel(4)">4</a></span> 74 <span><a href="#" onclick="carousel(5)">5</a></span> 75 <span><a href="#" onclick="carousel(6)">6</a></span> 76 </p> 77 </div> 78 </body> 79 </html>
註意：圖片需要自己去添加images文件，大小我用的是400*300，可以更改的！
還有其他方法使用js實現輪播圖，比如點擊以後讓圖片transform：translate；點擊後改變其display，點擊後改變z-index，不點擊讓他自己產生動態移動就是使用：setInterval
技術不重要，重要的是思想！
js實現輪播圖