輪播圖是常用的一種頁面動畫效果，這裏給出兩種不同效果的實現方式和基本原理。
一、利用CSS3transition屬性實現
主要思路：通過改變opacity的值去實現圖片的出現與消失。結合setInterval實現定時輪播。
當然這只是一個demo，沒有實現前一張圖，後一張圖的功能，如果有需要，可以在這個demo上進行添加即可。實現起來並不複雜，關鍵地方進行了註釋。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>輪播圖</title>
<style>
.slide {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 800px;
opacity: 0;
transition: opacity 5s linear
}
.active {
opacity: 1;
}
. container {
position: relative;
}
</style>
</head>
<body>
<div id="slider" class="container">
<img src="./1.jpg" class="slide active" />
<img src="./2.jpg" class="slide" />
<img src="./3.jpg" class="slide" />
</div>
</body>
<script>
window.onload = function() {
var slider = document.getElementsByClassName("slide");
var timer = setInterval(changeOpacity, 10000);
function changeOpacity() {
var count = slider.length;
for(var i=0; i<count; i++) {
if(/active/.test(slider[i].className)){
//修改標籤的active
slider[i].className = "slide";
//這種方式可以保證數組索引不會出現負數
slider[(i + 1) % count].className = "slide active";
break;
}
}
}
//mouseenter和mouseleave是IE的,mouseover和mouseout存在冒泡穿透觸發問題，所以需要阻止冒泡
addListener(document.getElementById("slider"), "mouseover", function(e) {
e.preventDefault();
e.cancelBubble = true;
clearInterval(timer);
});
addListener(document.getElementById("slider"), "mouseout", function(e) {
e.preventDefault();
e.cancelBubble = true;
timer = setInterval(changeOpacity, 10000);
})
function addListener(dom, event, func) {
if(dom.addEventListener) {
dom.addEventListener(event, func);
} else if(dom.attachEvent) {
dom.attachEvent("on"+event, func);
} else {
dom["on"+event] = func;
}
}
function removeListener(dom, event) {
if(dom.removeEventListener) {
dom.removeEventListener(event);
} else if (dom.detachEvent) {
dom.detachEvent("on"+event);
} else {
dom["on"+event] = null;
}
}
}
</script>
</html>
二、利用JS設置scrollLeft的方式實現從左往右無縫滾動輪播
主要思路：設置<li>的display：inline-block，同時ul的寬度大於所有li的寬度總和，這樣才能保證所有圖片在一行顯示，同時在外部container寬度要比ul小（設置一個固定寬度，不能被撐開），同時兩者都設置overflow：hidden，隱藏滾動條。
然後通過修改container的scrollLeft來移動圖片，當一張圖片拖離視區後，利用appendChild()方法的特性(如果已經存在這個child，那麼移動原來的child到末尾)將第一張圖放置到最後，同時重置container的scrollLeft爲0。
具體實現如下，修改圖片的路徑即可立即使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>輪播圖2</title>
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
ul, ol {
list-style: none;
}
.container {
width: 1000px;
box-sizing: border-box;
overflow: hidden;
}
.slider {
overflow: hidden;
}
.photo {
width: 400px;
height: 400px;
display: inline-block;
float: left;
}
</style>
</head>
<body>
<div id="container" class="container">
<ul id="slider" class="slider">
<li class="photo"><img src="./1.jpg" width="400px" height="400px"></li>
<li class="photo"><img src="./1.jpg" width="400px" height="400px"></li>
<li class="photo"><img src="./1.jpg" width="400px" height="400px"></li>
</ul>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
var box = document.getElementById("container");
var slider = document.getElementById("slider");
var photos = document.getElementsByClassName("photo");
var photoWidth = photos[0].offsetWidth;//獲取每個<li>佔據的實際寬度
var speed = 50;//圖片移動速度，值越大，速度越慢
var interval = 5;//圖片移動間隔
slider.style.width = photos.length * photoWidth + "px";
//console.log(photos.length * photoWidth,"heh ");
var func = function() {
box.scrollLeft += 2;
//滾動條滾完一張圖片的寬度後，將第一張圖片加到最後，並且重置scrollLeft爲零
if(photoWidth - box.scrollLeft === 0) {
//利用appendChild的特性，如果已經存在這個child，那麼移動原來的child到末尾
slider.appendChild(slider.getElementsByClassName("photo")[0]);
box.scrollLeft = 0;
}
}
var timer = setInterval(func, speed);
addListener(box, "mouseover", function(e) {
e.preventDefault();
e.cancelBubble = true;
clearInterval(timer);
})
addListener(box, "mouseout", function(e) {
e.preventDefault();
e.cancelBubble = true;
timer = setInterval(func, speed);
})
}
function addListener(dom, event, func) {
if(dom.addEventListener) {
dom.addEventListener(event, func);
} else if(dom.attachEvent) {
dom.attachEvent("on"+event, func);
} else {
dom["on"+event] = func;
}
}
</script>
</html>