實現(xiàn)思路：
一、布局部分：
1、采用div>ul>li>img布局窜管，來展示輪播的圖片banner;
2、采用div>>ul>li>a標簽稚机，來顯示小紅點幕帆；
整個布局入下圖所示：途中的，圖中的第一個li和最后一個li標簽是用來做動畫過渡時使用赖条，就不會產生空白抖動的情況失乾，這個兩個圖，暫時稱之為“站位圖”
二纬乍、JS代碼部分
1碱茁、先處理好左右（上一張，下一張）兩個按鈕的點擊事件仿贬，點擊之后纽竣，能夠正常的切換當前圖片；
2茧泪、在圖片切換之后蜓氨，控制相對應的圓點標簽，高亮顯示當前圖片對應的圓點队伟；
3穴吹、在1中的切換圖片里面添加動畫效果；
4嗜侮、開啟輪播定時器港令，每隔兩秒執(zhí)行一次啥容，調用“下一張按鈕”的onclick；
5顷霹、如果當前輪播定時器或者動畫效果定時器正在執(zhí)行咪惠，點擊了“下一張按鈕”，會產生時間沖突泼返，所以在，每次點擊“下一張/上一張按鈕”的時候姨拥，清掉所有的動畫绅喉，并且讓當前索引的圖片完整的（沾滿整個屏幕），顯示在界面上
6叫乌、給圓點標簽柴罐，添加onmouseover和out事件；
實現(xiàn)部分：
1憨奸、html文件：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
margin: 0px;
padding: 0px;
}
ul li{
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
a{
margin: 0px;
padding: 0px;
}
#wrapper{
margin: 0 auto;
width: 1280px;
height: 800px;
position: relative;
}
#imgs{
width: 1280px;
height: 100%;
overflow: hidden;
float: left;
position: relative;
}
#imgs ul{
position: absolute;
z-index: 1;
width: 7680px;
height: 400px;
left: -1280px;
}
#nav{
width: 100px;
height: 20px;
float: left;
position: absolute;
right: 10px;
bottom: 10px;
z-index: 5;
}
#nav ul li a{
width: 20px;
height: 20px;
line-height: 20px;
display: inline-block;
background: #FFF;
border-radius: 10px;
margin-right: 5px;
text-align: center;
font-size: 12px;
}
#preous,#next{
width: 100px;
background: #000;
font-size: 20px;
font-weight: 900;
text-align: center;
height: 80px;
line-height: 80px;
position: absolute;
top: 50%;
color: #FFF;
z-index: 3;
}
#preous{
left: 0px;
}
#next{
right: 0px;
}
#nav ul li a.current{
background: red;
color: #FFF;
}
#nav ul li a.hidden{
background: #FFF;
color: #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="imgs">
<ul>
<li><a href=""><img src="../image/4.jpg" alt=""></a></li>
<li><a href=""><img src="../image/1.jpg" alt=""></a></li>
<li><a href=""><img src="../image/2.jpg" alt=""></a></li>
<li><a href=""><img src="../image/3.jpg" alt=""></a></li>
<li><a href=""><img src="../image/4.jpg" alt=""></a></li>
<li><a href=""><img src="../image/1.jpg" alt=""></a></li>
</ul>
</div>
<div class="clear"></div>
<div id="nav">
<ul>
<li><a class="current">1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
</ul>
</div>
<div id="preous"><</div>
<div id="next">></div>
</div>
</body>
</html>
在靜態(tài)頁當中革屠，需要注意：
1、給圖片輪播的ul外層的div標簽排宰，設置為一張圖片的寬度（我這是1280px）,并且設置溢出的不顯示
2似芝、給圖片輪播的ul標簽的寬度必須為li標簽的總數每張的寬度（我這是61280）
3、圓點標簽的div板甘，設置的z-index必須必圖片輪播的div優(yōu)先級要高
二党瓮、JS業(yè)務邏輯部分
獲取到所有需要操作的對象
獲取到所有需要操作的對象
var imgs_div=document.getElementById("imgs");
var nav_div=document.getElementById("nav");
//獲取到圖片輪播的ul對象數組
var imgsUl=imgs_div.getElementsByTagName("ul")[0];
//獲取到遠點的ul對象數組
var nav=nav_div.getElementsByTagName("ul")[0];
//上一個
var prious=document.getElementById("preous");
//下一個
var next =document.getElementById("next");
1、先處理好左右（上一張盐类，下一張）兩個按鈕的點擊事件寞奸，點擊之后，能夠正常的切換當前圖片在跳；
prious.onclick=function(){
//上一張枪萄，圖片需要向右移動，（X軸正軸方向）猫妙，所以加1280
var offset=parseInt(imgsUl.offsetLeft)+1280;
imgsUl.style.left=offset+"px";
}
next.onclick=function(){
//下一張瓷翻，圖片像左移動，（X軸負軸方向）割坠，所以減1280
var offset=parseInt(imgsUl.offsetLeft)-1280;
imgsUl.style.left=offset+"px";
}
如圖所示：當前在用戶界面上可見的為li的第一張圖逻悠，如果我點擊了“下一個”， 那么整個ul標簽需要像左滑動一個圖片寬度的單位（1280px）,于是成了下圖：
2韭脊、在圖片切換之后童谒，控制相對應的圓點標簽，高亮顯示當前圖片對應的圓點：
這里封裝一個函數沪羔，首先讓圓點li標簽的所有class都變成hidden, 然后在通過傳進來的下標在減去1饥伊，則是當前可見的li標簽：
var index=1;//表示默認當前就是展示的第一張圖片
prious.onclick=function(){
//上一張象浑，圖片需要向右移動，（X軸正軸方向）琅豆，所以加1280
var offset=parseInt(imgsUl.offsetLeft)+1280;
imgsUl.style.left=offset+"px";
//這里需要判斷當前的下標是否小于1愉豺，小于了，則說明現(xiàn)在當前是第一張圖片茫因，再返回蚪拦，就是要到第四張圖片，讓index=4冻押，每次點擊之后讓index的值減1
if(index<1){
index=4;
}
index-=1;
btnShow（index）驰贷；
}
next.onclick=function(){
//下一張，圖片像左移動洛巢，（X軸負軸方向）括袒，所以減1280
var offset=parseInt(imgsUl.offsetLeft)-1280;
imgsUl.style.left=offset+"px";
//這里需要判斷當前的下標是否大于4，大于了稿茉，則說明現(xiàn)在當前是第四張圖片锹锰，再返下一張，就是要到第一張圖片漓库，讓index=1恃慧，每次點擊之后讓index的值+1
if(index>4){
index=1;
}
index+=1;
btnShow（index）；
}
function btnShow(cur_index){
var list=nav.children;
for(var i=0;i<nav.children.length;i++){
nav.children[i].children[0].className="hidden";
}
nav.children[cur_index-1].children[0].className="current";
}
3渺蒿、在1中的切換圖片里面添加動畫效果：
在animate函數中糕伐，對newLeft(總偏移量)進行判斷，如果大于-1280px;說明當前展示的是第一張圖片蘸嘶，現(xiàn)在需要改成展示第四張圖片良瞧，（第四張圖片的left值為-1280*4 px）；
如果小于-5120px,說明當前展示的是第四張圖片训唱，現(xiàn)在需要改成展示第一張圖片（第一張圖片的left值為：-1280px）褥蚯；
var animTimer;
prious.onclick=function(){
index-=1;
if(index<1){
index=4;
}
animate(1280);
btnShow(index);
}
next.onclick=function(){
initImgs(index);
index+=1;
if(index>4){
index=1;
}
animate(-1280);
btnShow(index);
}
function animate(offset){
var newLeft=parseInt(imgsUl.offsetLeft)+offset;
if(newLeft>-1280){
donghua(-5120);
}else if(newLeft<-5120){
donghua(-1280);
}else{
donghua(newLeft);
}
}
function donghua(offset){
clearInterval(animTimer);
animTimer=setInterval(function(){
//動畫原理： 盒子本身的位置 + 步長
imgsUl.style.left=imgsUl.offsetLeft+(offset-imgsUl.offsetLeft)/10 + "px";
//因為采用的動畫原理計算方法，得到的值不可能精確到我們需要偏移的像素單位上况增，所以我這里判斷赞庶，在還有20px的時候，就讓動畫停止澳骤。
if(imgsUl.offsetLeft-offset<10&&imgsUl.offsetLeft-offset>-10){
imgsUl.style.left=offset+"px";
clearInterval(animTimer);
}
},20);
}
4歧强、開啟輪播定時器，每隔兩秒執(zhí)行一次为肮，調用“下一張按鈕”的onclick摊册； ```
var timer;
function play(){
timer=setInterval(function(){
next.onclick();
},2000)
}
>5、如果當前輪播定時器或者動畫效果定時器正在執(zhí)行颊艳，點擊了“下一張按鈕”茅特，會產生時間沖突忘分，所以在，每次點擊“下一張/上一張按鈕”的時候白修，清掉所有的動畫妒峦，并且讓當前索引的圖片完整的（沾滿整個屏幕），顯示在界面上
//其中cur_index兵睛，表示是當前圖片的index值肯骇；
function initImgs(cur_index){
clearInterval(timer);
clearInterval(animTimer);
var off=cur_index*1280;
imgsUl.style.left=-off+"px";
}
>6、給圓點標簽祖很，添加onmouseover和out事件笛丙；
在onmouseover中，因為圓點標簽的下標是從0開始的突琳， 而圖片輪播的下標的第一張圖若债，我們在開始的時候默認定義為1符相，所以在調用其他函數的時候拆融，傳遞過去的i+1
for(var i=0;i<nav.children.length;i++){
nav.children[i].index=i;
var sd=nav.children[i].index;
nav.children[i].onmouseover=function(){
var now_index=this.index;
//這里很重要，要讓當前的圖片的index的值等于鼠標選中的圖片
index=this.index+1;
initImgs(this.index+1);
btnShow(this.index+1);
}
nav.children[i].onmouseout=function(){
play();
}
}
