一、頁面結(jié)構(gòu)
對于左右切換式的輪播圖的結(jié)構(gòu)主要分為以下幾個(gè)部分：
1、首先是個(gè)外圍部分（其實(shí)也就是最外邊的整體wrapper)
2、其次就是你設(shè)置圖片輪播的地方（也就是一個(gè)container吧）
3、然后是一個(gè)圖片組（可以用新的div 也可以直接使用 ul–>li形式）
4宁舰、然后是圖片兩端的左箭頭和右箭頭
7、然后是一個(gè)按鈕層奢浑，用來定位圖片組的index吧,一般放在圖片的下方(div 或 ul–>li)
<div id="warpper">
<div class="container">
<!-- 圖片區(qū)域 -->
<ul class="imgList">
<li><img src="./images/img1.jpg" alt=""></li>
<li><img src="./images/img2.jpg" alt=""></li>
<li><img src="./images/img3.jpg" alt=""></li>
<li><img src="./images/img4.jpg" alt=""></li>
<li><img src="./images/img5.jpg" alt=""></li>
<li><img src="./images/img6.jpg" alt=""></li>
</ul>
<!-- 左右切換圖標(biāo) -->
<img src="./images/pre.png" width="40px" height="60px" class="pre">
<img src="./images/next.png" width="40px" height="60px" class="next">
<!-- 下方控制圖片按鈕 -->
<ul class="dollList">
<li class="sec"><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
二蛮艰、CSS樣式
左右切換式則是采用圖片li 浮動(dòng)，父層元素ul 總寬為總圖片寬雀彼，并設(shè)定為有限container寬度下隱藏超出寬度的部分;然后當(dāng)想切換到某序號的圖片時(shí)壤蚜，則采用其ul 定位 left樣式設(shè)定相應(yīng)屬性值實(shí)現(xiàn)
比如顯示第一張圖片初始定位left為0px, 要想顯示第二張圖片則需要left:-800px 處理;;
<style>
*{ margin: 0; padding: 0; }
ul{ list-style: none; }
a{ text-decoration: none; }
#warpper{ width: 800px; height: 600px; margin: 20px auto;}
.container{ width: 100%; height: 100%; overflow: hidden; position: relative; }
.imgList{ width: 4800px; position: absolute; z-index: 5; }
.imgList>li{ float: left; width: 800px; height: 600px; }
.imgList>li>img{ width: 100%; height: 100%; }
.pre,.next{ position: absolute; top: 275px; background: rgba(220,220,220,0.7); padding: 10px 0; z-index: 100; opacity: 0.6; filter: alpha(opacity=60); }
.pre:hover,.next:hover{ cursor: pointer; opacity: 1; filter: alpha(opacity=100); }
.pre{ left: 10px; }
.next{ right: 10px; }
.dollList{ width:180px; position: absolute; z-index: 10; bottom: 20px; left: 310px ; }
.dollList li{ float: left; margin-right: 10px; }
.dollList li.sec a{ background: orange; }
.dollList li a{ width: 15px; height: 15px; background: rgba(230,230,230,0.6); border-radius: 50%; display: inline-block; }
</style>
三、JS處理
（1）jquery處理：
<script>
$(function(){
//設(shè)置全局變量
var cur = 0; //當(dāng)前的圖片序號
imgLen = $(".imgList li").length; //獲取圖片的數(shù)量
timer = null; //設(shè)置定時(shí)定時(shí)器的名字详羡，方便后面關(guān)閉
//當(dāng)鼠標(biāo)移到向左和向右的圖標(biāo)上關(guān)閉定時(shí)器，離開時(shí)則重置定時(shí)器
$(".pre,.next").hover(function(){
clearInterval( timer );
},function(){
changeImg( );
});
//當(dāng)鼠標(biāo)移到圖片上關(guān)閉定時(shí)器嘿悬，離開時(shí)則重置定時(shí)器
$(".imgList").hover(function(){
clearInterval( timer );
},function(){
changeImg( );
});
//點(diǎn)擊向左圖標(biāo)根據(jù)cur進(jìn)行上一個(gè)圖片處理
$(".pre").click(function(){
cur = cur>0 ? (--cur) : (imgLen-1);
changeTo( cur );
});
//點(diǎn)擊向右圖標(biāo)根據(jù)cur進(jìn)行上一個(gè)圖片處理
$(".next").click(function(){
cur = cur<( imgLen-1 ) ? (++cur) : 0;
changeTo( cur );
});
//為下方的圓點(diǎn)按鈕綁定事件
$(".dollList li").hover(function(){
clearInterval(timer);
var index = $(this).index();
cur = index
changeTo(cur);
},function(){
changeImg();
});
//封裝圖片自動(dòng)播放函數(shù)
function changeImg(){
timer = setInterval(function(){
if( cur<imgLen-1 ){
cur++;
}else{
cur=0;
}
changeTo( cur );
},2000);
}
//調(diào)用函數(shù)
changeImg();
//圖片切換函數(shù)
function changeTo( num ){
var go = num*800;
$(".imgList").animate({ "left" : -go },500);
$(".dollList").find("li").removeClass("sec").eq(num).addClass("sec");
}
});
</script>
jquery這樣就能實(shí)現(xiàn)左右切換式輪播圖了实柠，簡便，原生JS代碼量就有些多了善涨；
（2）原生JS處理：
<script>
var cur = 0, //當(dāng)前的圖片序號
imgLis = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //獲取圖片組
imgLen = imgLis.length, //獲取圖片的數(shù)量
timer = null; //設(shè)置定時(shí)定時(shí)器的名字窒盐，方便后面關(guān)閉
dollLis = getElementsByClassName("dollList")[0].getElementsByTagName("li"); //獲取下方圓點(diǎn)
//封裝圖片自動(dòng)播放函數(shù)
function changeImg(){
timer = setInterval(function(){
if(cur < imgLen -1){
cur ++;
}else{
cur = 0;
}
//調(diào)用變換處理函數(shù)
changeTo(cur);
},2500);
}
changeImg();
//調(diào)用添加事件處理
addEvent();
//給左右箭頭和右下角的圖片index添加事件處理
function addEvent(){
for(var i=0;i<imgLen;i++){
//閉包防止作用域內(nèi)活動(dòng)對象item的影響
(function(_i){
//鼠標(biāo)滑過則清除定時(shí)器，并作變換處理
dollLis[_i].onmouseover = function(){
clearTimeout(timer);
changeTo(_i);
cur = _i;
};
//鼠標(biāo)滑出則重置定時(shí)器處理
dollLis[_i].onmouseout = function(){
changeImg();
};
})(i);
}
//給左箭頭prev添加上一個(gè)事件
var pre = getElementsByClassName("pre")[0];
pre.onmouseover = function(){
//滑入清除定時(shí)器
clearIntervcural(timer);
};
pre.onclick = function(){
//根據(jù)curIndex進(jìn)行上一個(gè)圖片處理
cur = (cur > 0) ? (--cur) : (imgLen - 1);
changeTo(cur);
};
pre.onmouseout = function(){
//滑出則重置定時(shí)器
changeImg();
};
//給右箭頭next添加下一個(gè)事件
var next = getElementsByClassName("next")[0];
next.onmouseover = function(){
clearInterval(timercur);
};
next.onclick = function(){
cur = (cur < imgLen - 1) ? (++cur) : 0;
changeTo(cur);
};
next.onmouseout = function(){
changeImg();
};
}
//左右切換處理函數(shù)
function changeTo(num){
//設(shè)置image
var imgList = getElementsByClassName("imgList")[0];
goLeft(imgList,num*800); //左移一定距離
//設(shè)置image的控制下標(biāo) index
var _curIndex = getElementsByClassName("sec")[0];
removeClass(_curIndex,"sec");
addClass(dollLis[num],"sec");
}
//圖片組相對原始左移dist px距離
function goLeft(elem,dist){
if(dist == 800){ //第一次時(shí)設(shè)置left為0px 或者直接使用內(nèi)嵌法 style="left:0;"
elem.style.left = "0px";
}
var toLeft; //判斷圖片移動(dòng)方向是否為左
dist = dist + parseInt(elem.style.left); //圖片組相對當(dāng)前移動(dòng)距離
if(dist<0){
toLeft = false;
dist = Math.abs(dist);
}else{
toLeft = true;
}
for(var i=0;i<= dist/20;i++){ //這里設(shè)定緩慢移動(dòng)钢拧，10階每階80px
(function(_i){
var pos = parseInt(elem.style.left); //獲取當(dāng)前l(fā)eft
setTimeout(function(){
pos += (toLeft)? -(_i * 20) : (_i * 20); //根據(jù)toLeft值指定圖片組位置改變
//console.log(pos);
elem.style.left = pos + "px";
},_i * 25); //每階間隔50毫秒
})(i);
}
}
</script>
