這可以說是一種非常簡單的實現輪播圖的方法了，由於時間倉促所以沒寫自動輪播部分。簡單說一下原理吧，就是把所有圖片堆疊在一個盒子里，設置所有圖片的透明度為0，這樣就把所有圖片都隱藏了，第一張圖片除外（第一張透明度設為1），當要切換到某張圖片時，在把該圖片的透明度設為1，而其他的圖片透明度設為0，這樣就實現了簡單的輪播啦。
代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>淡入淡出輪播圖</title> 6 <!-- css樣式 --> 7 <style type="text/css"> 8 /*清除邊距*/ 9 div,ul,li{ 10 margin: 0; 11 padding: 0; 12 } 13 14 /*首先准備一個放圖片的容器*/ 15 .container{ 16 width: 500px; 17 height: 280px; 18 position: relative; 19 top: 100px; 20 left: 30%; 21 /*border: 1px solid #ccc;*/ 22 } 23 24 /*圖片樣式*/ 25 .container img{ 26 position: absolute; /*把所有圖片放在同一個位置*/ 27 width: 100%; 28 transition-duration: 1s; /*設置過渡時間*/ 29 opacity: 0; /*把所有圖片變透明*/ 30 } 31 /*圖片顯示開關*/ 32 .container img.on{ 33 opacity: 1; /*用於顯示圖片*/ 34 } 35 36 /*左右按鈕 按鈕用圖片更好點,這里為了簡便就用大於小於號*/ 37 .left, .right{ 38 position: absolute; 39 top: 30%; 40 width: 60px; 41 height: 100px; 42 line-height: 100px; 43 background-color: #666; 44 opacity: 0.5; 45 text-align: center; 46 font-size: 60px; 47 color: #ccc; 48 display: none; /*先隱藏按鈕*/ 49 cursor: pointer; /*設置鼠標懸停時的樣式*/ 50 } 51 .left{ 52 left: 0; 53 } 54 .right{ 55 right: 0; 56 } 57 .container:hover .left, .container:hover .right{ 58 display: block; /*鼠標懸停才容器范圍內時顯示按鈕*/ 59 } 60 .left:hover, .right:hover{ 61 color: #fff; 62 } 63 64 /*焦點*/ 65 .container ul{ 66 position: absolute; 67 bottom: 0; 68 max-width: 500px; 69 padding: 5px 200px; 70 } 71 .container ul li{ 72 list-style: none; 73 float: left; 74 width: 10px; 75 height: 10px; 76 border-radius: 50%; 77 margin-left: 10px; 78 background-color: #ccc; 79 cursor: pointer; 80 } 81 .container ul li.active{ 82 background-color: #fff; /*焦點激活時的樣式*/ 83 } 84 85 </style> 86 </head> 87 <body> 88 <div class="container"> 89 <!-- 圖片 --> 90 <!-- 先把第一張圖片顯示出來 --> 91 <img class="on" src="img/1.jpg" /> 92 <img src="img/2.jpg" /> 93 <img src="img/3.jpg" /> 94 <img src="img/4.jpg" /> 95 <img src="img/5.jpg" /> 96 97 <!-- 左右按鈕 --> 98 <div class="left"><</div> 99 <div class="right">></div> 100 101 <!-- 焦點 --> 102 <ul> 103 <li class="active"></li> 104 <li></li> 105 <li></li> 106 <li></li> 107 <li></li> 108 </ul> 109 </div> 110 111 <!-- js部分 --> 112 <script type="text/javascript"> 113 //1、找到container下的所有img標簽,li標簽,左右按鈕 114 var aImgs = document.querySelectorAll('.container img'); 115 var aLis = document.querySelectorAll('.container li'); 116 var btnLeft = document.querySelector('.container .left'); 117 var btnRight = document.querySelector('.container .right'); 118 119 // //檢驗是否找到 120 // console.log(aImgs); 121 // console.log(aLis); 122 // console.log(btnLeft); 123 // console.log(btnRight); 124 125 //點擊事件 126 //點擊按鈕圖片切換 127 var index = 0; //當前圖片下標 128 var lastIndex = 0; 129 btnRight.onclick = function(){ 130 //記錄上一張圖片的下標 131 lastIndex = index; 132 //清除上一張圖片的樣式 133 aImgs[lastIndex].className = ''; 134 aLis[lastIndex].className = ''; 135 136 index++; 137 index %= aImgs.length; //實現周期性變化 138 //設置當前圖片的樣式 139 aImgs[index].className = 'on'; 140 aLis[index].className = 'active'; 141 } 142 //左邊按鈕類似 143 btnLeft.onclick = function(){ 144 //記錄上一張圖片的下標 145 lastIndex = index; 146 //清除上一張圖片的樣式 147 aImgs[lastIndex].className = ''; 148 aLis[lastIndex].className = ''; 149 150 index--; 151 if (index < 0) { 152 index = aImgs.length - 1; 153 } 154 //設置當前圖片的樣式 155 aImgs[index].className = 'on'; 156 aLis[index].className = 'active'; 157 } 158 </script> 159 </body> 160 </html>