html：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<link rel="stylesheet" href="static/css/lun_bo_style1.css" target="_blank" rel="external nofollow" >
<script src="static/js/lun_bo_js1.js"></script>
</head>
<body>
<div id="wrap">
<ul>
<li class="active"><a><img src="static/imgs/1.jpg"></a></li>
<li><a><img src="static/imgs/2.jpg"></a></li>
<li><a><img src="static/imgs/3.jpg"></a></li>
<li><a><img src="static/imgs/4.jpg"></a></li>
<li><a><img src="static/imgs/5.jpg"></a></li>
<li><a><img src="static/imgs/6.jpg"></a></li>
<li><a><img src="static/imgs/7.jpg"></a></li>
<li><a><img src="static/imgs/8.jpg"></a></li>
</ul>
<div id="list-num">
<ul>
<li class="list-active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="left"> < </div>
<div id="right"> > </div>
</div>
</body>
</html>
css：
body,div,ul,li,a,img,html{
margin:0;
padding:0;
}
li{
list-style:none;
}
a{
text-decoration:none;
}
#wrap{
width:790px;
height:340px;
margin:40px auto;
border:1px solid #ccc;
position:relative;
}
#wrap>ul>li{
opacity:0;
position:absolute;
top:0;
left:0;
transition:opacity 0.4s linear;
}
#wrap>ul>.active{
opacity:1;
}
#list-num{
width:150px;
height:16px;
background:rgba(255,255,255,0.3);
border-radius:16px;
position:absolute;
bottom:20px;
left:50%;
margin-left:-75px;
}
#list-num>ul>li{
width:11px;
height:11px;
border-radius:11px;
background:rgba(255,255,255,0.6);
float:left;
margin-left:7px;
margin-top:2.5px;
}
#list-num>ul>.list-active{
background:red;
}
#right,#left{
width:30px;
height:60px;
color:#fff;
font-size:24px;
background:rgba(0,0,0,0.3);
position:absolute;
top:50%;
margin-top:-30px;
line-height:60px;
text-align:center;
cursor:pointer;
display:none;
}
#right{
right:0;
}
#right:hover,#left:hover{
background:rgba(0,0,0,0.6);
}
js：
window.onload = function(){
// 擷取最外層div
var oDiv = document.getElementById("wrap");
// 通過div得到圖檔的li(通過children子元素獲得;children[0]得到的是div的第一個子元素)
var lis = oDiv.children[0].children;
// 擷取小圓點外div
var oDiv1 = document.getElementById("list-num");
var lists = oDiv1.children[0].children;
// console.log(lists);
// 設一個index代表li的第一個索引
var index = 0;
var len = lis.length;
// 焦點圖自動切換；
var run;
function playgo(){
// 因為下段代碼會循環執行，是以用定時器，一直執行下去；
run = setInterval(function(){
// 上一個li去掉class為active 下一個增加class
// 下邊小圓點的效果；
//1.小圓點跟着焦點圖切換背景顔色；小圓點的index與上邊的li是一樣的
removeClass(index);
index++;//++後就是下一個div
if(index == len){
index = 0;
}
addClass(index);
},2000);
}
playgo();
//滑鼠移到外邊大的div上的時候焦點圖停止切換；
// 焦點圖停止切換即停止上邊的定時器；滑鼠滑到div上的時候，左右按鈕出現；
oDiv.onmouseover = function(){
clearInterval(run);
left.style.display = "block";
right.style.display = "block";
}
// 滑鼠離開div定時器開啟；
oDiv.onmouseout = function(){
playgo();
left.style.display = "none";
right.style.display = "none";
}
for(var i = 0;i<lists.length;i++){
lists[i].onmouseover = (function(i){
return function(){
removeClass(index);
index = i;
addClass(index);
}
})(i);
}
//滑鼠點選左邊按鈕的效果；
left.onclick = function(){
removeClass(index);
index--;
if(index < 0){
index = len-1;
}
addClass(index);
}
//滑鼠點選右邊按鈕的效果；
right.onclick = function(){
removeClass(index);
index++;
if(index == len){
index = 0;
}
addClass(index);
}
function removeClass(i){
lis[i].removeAttribute("class");
lists[i].removeAttribute("class");
}
function addClass(i){
lis[i].setAttribute("class","active");
lists[i].setAttribute("class","list-active");
}
}
個人總結，希望對你們有用；
![javascript--8緩動動畫架構>>>手風琴為例[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)