在網頁中用到圖片輪播效果，單純的隱藏、顯示，那再簡單不過了，要有動畫效果，如果是自己寫的話(不用jquery等)，可能要費點時間。css3的出現，讓動畫變得不再是問題，而且簡單易用。下面介紹我用css3與js寫的一個圖片輪播效果。
一般圖片輪播就是三四張圖片：
<div class="wrap"> <div class="carousel"> <div><img src="http://b204.photo.store.qq.com/psu?/41e4346e-5d60-4a3e-8af9-0492dd6f0e56/DAx8jd*wHkeZfn2KFFIozuCId3oyygApuIabRH0huoI!/b/Ydkzp3nFfQAAYrelonkwfwAA&bo=ngL2AQAAAAABAEw!" /></div> <div><img src="http://b206.photo.store.qq.com/psu?/41e4346e-5d60-4a3e-8af9-0492dd6f0e56/ajO.4FllSbmZVzpKUjPuydfO50ov0WWQ6cE0k0LIrOw!/b/Yci2zXo*cwAAYgFU0nokCAAA&bo=YwLqAQAAAAABAK0!&rf=viewer_4" /></div> <div><img src="http://b206.photo.store.qq.com/psu?/41e4346e-5d60-4a3e-8af9-0492dd6f0e56/0HDFCiFDzavtBxpA.3J3bzxmEzO2MqmnCO*9Us*s5PA!/b/YU5U1XoGcQAAYn3J0HqhcQAA&bo=TgKlAQAAAAABAM8!&rf=viewer_4" /></div> </div> </div>
首先將圖片左浮動成一排，最外層div設置寬度、高度，然后用 overflow:hidden 只顯示第一張圖片，隱藏超出的寬度部分的其他圖片。樣式表如下：
<style> .wrap { width: 600px; min-height:400px; margin: 0 auto; position: relative; overflow: hidden;//隱藏超出的內容 } .carousel { position: absolute;//定位圖片 transition: all 0.5s ease-in 0s;//輪播動畫 } img { width: 100%; } .carousel div { float: left; width: 33.333%; text-align: center; } .button { text-align: center; } </style>
其中最關鍵的就是：
transition: all 0.5s ease-in 0s;
這就是css3中的過渡屬性，當元素從一種樣式變換為另一種樣式時為元素添加效果。屬性中的每個值得意義：要過渡的屬性、完成過渡的時間、過渡的動畫效果、延遲開始時間
我把設置圖片的寬度和全部圖片的總寬度在js中進行，因為圖片的張數可能會變。如果在css中設置，那么圖片數變化的時候，就要修改css中相應的值，而在js中就可以一勞永逸。下面是js：
<script> (function () { var carousel = document.querySelector(".carousel"); var img = carousel.querySelectorAll("div"); var len = img.length; [].forEach.call(img, function (item) { item.style.width = (100 / len) + "%";//設置每張圖片寬度 }); carousel.style.left = "0%";//設置left carousel.style.width = (100 * len) + "%";//設置全部圖片寬度 var pre = document.querySelector(".pre"); var next = document.querySelector(".next"); var i = 0; next.onclick = function () { var left = carousel.style.left; if (i < len - 1) { carousel.style.left = (parseInt(left) - 100) + "%";//當還沒到最后一張圖片時left減100% i++; } else if (i == len - 1) { carousel.style.left = "0%";最后一張時，點擊按鈕跳到第一張 i = 0; } }; pre.onclick = function () { var left = carousel.style.left; if (i > 0) { carousel.style.left = (parseInt(left) + 100) + "%";//不是第一張時left加100% i--; } else if (i == 0) { carousel.style.left = -parseInt(carousel.style.width) + 100 + "%";//第一張時，點擊按鈕跳到最后一張 i = len - 1; } }; }()); </script>
當點擊按鈕時，改變元素的left值，就會出現動畫效果，因為css中設置了 transition: all 0.5s ease-in 0s ，就是當left改變時，立即慢速開始過渡效果，在0.5秒之內完成。
圖片輪播效果就已經完成了，貼出全部代碼：
<!DOCTYPE html> <html> <head> <title>圖片輪播</title> <meta charset="utf-8" /> <style> .wrap { width: 600px; min-height:400px; margin: 0 auto; position: relative; overflow: hidden; } .carousel { position: absolute; transition: all 0.5s ease-in 0s; } img { width: 100%; } .carousel div { float: left; text-align: center; } .button { text-align: center; } </style> </head> <body> <div class="wrap"> <div class="carousel"> <div><img src="http://b204.photo.store.qq.com/psu?/41e4346e-5d60-4a3e-8af9-0492dd6f0e56/DAx8jd*wHkeZfn2KFFIozuCId3oyygApuIabRH0huoI!/b/Ydkzp3nFfQAAYrelonkwfwAA&bo=ngL2AQAAAAABAEw!" /></div> <div><img src="http://b206.photo.store.qq.com/psu?/41e4346e-5d60-4a3e-8af9-0492dd6f0e56/ajO.4FllSbmZVzpKUjPuydfO50ov0WWQ6cE0k0LIrOw!/b/Yci2zXo*cwAAYgFU0nokCAAA&bo=YwLqAQAAAAABAK0!&rf=viewer_4" /></div> <div><img src="http://b206.photo.store.qq.com/psu?/41e4346e-5d60-4a3e-8af9-0492dd6f0e56/0HDFCiFDzavtBxpA.3J3bzxmEzO2MqmnCO*9Us*s5PA!/b/YU5U1XoGcQAAYn3J0HqhcQAA&bo=TgKlAQAAAAABAM8!&rf=viewer_4" /></div> </div> </div> <div class="button"><button class="pre">上一張</button><button class="next">下一張</button></div> <script> (function () { var carousel = document.querySelector(".carousel"); var img = carousel.querySelectorAll("div"); var len = img.length; [].forEach.call(img, function (item) { item.style.width = (100 / len) + "%"; }); carousel.style.left = "0%"; carousel.style.width = (100 * len) + "%"; var pre = document.querySelector(".pre"); var next = document.querySelector(".next"); var i = 0; next.onclick = function () { var left = carousel.style.left; if (i < len - 1) { carousel.style.left = (parseInt(left) - 100) + "%"; i++; } else if (i == len - 1) { carousel.style.left = "0%"; i = 0; } }; pre.onclick = function () { var left = carousel.style.left; if (i > 0) { carousel.style.left = (parseInt(left) + 100) + "%"; i--; } else if (i == 0) { carousel.style.left = -parseInt(carousel.style.width) + 100 + "%"; i = len - 1; } }; }()); </script> </body> </html>
點擊下面的兩個按鈕，就會出現輪播效果：
css3的出現真的給前端開發者帶來很多好處，以前要制作一些動畫，用flash或者用js寫一大堆代碼才能實現，現在的css3可能就用簡單幾行代碼加上簡單的的幾行js代碼就能實現。