上回書我們說到原生js淡入淡出效果的輪播圖，這回我們說說左右滑動輪播圖，由于需要緩動動畫效果，原生js需要封裝緩動函數，個人覺得不如JQ來的實在，所以本渣渣直接引入JQ，用JQ相對簡單，重要的是思想。
1、思路
老規矩先來個大致思路，有個好的戰略計劃才能獲取戰斗的成功
1.1 css樣式布局
有好的布局才能進行js的操控，css大致布局如下圖
由上圖簡單的介紹一下布局
紅色的是最外層容器，固定寬高，老規矩相對定位，還有就是一定要有溢出隱藏（overflow:hidden）；ul根據圖片的多少寬度相對倍數改變，，同樣ul是絕對定位，js就是改變ul的絕對定位的left值控制顯示第幾張的圖片；焦點圖的布局和輪播圖（1）一樣的方法，不知道的去瞅瞅；左右按鈕就的容器也是絕對定位，用margin-top或者top值控制距離上部的距離，寬度也是100%；然后各自向左右浮動，margin值控制按鈕相距最外層左右的距離；
1.2 js的大致思路
js同樣要實現動態創建和圖片相同個數的焦點圖，計時器控制ul的left值，從而動態顯示最外層里所顯示的圖片，加上溢出隱藏，就成了動態輪播圖
2、開搞
2.1 html代碼
<div class="banner" id="banner">
<ul>
<li><a href="#">[站外圖片上傳中……(2)]</a></li>
<li><a href="#">[站外圖片上傳中……(3)]</a></li>
<li><a href="#">[站外圖片上傳中……(4)]</a></li>
<li><a href="#">[站外圖片上傳中……(5)]</a></li>
<li><a href="#">[站外圖片上傳中……(6)]</a></li>
<li><a href="#">[站外圖片上傳中……(7)]</a></li>
<li><a href="#">[站外圖片上傳中……(8)]</a></li>
</ul>
<span class="order">
<!-- <i class="on"></i><i></i><i></i><i></i><i></i><i></i><i></i> -->
</span>
<div class="ctrl">
<button title="上一張" class="prev"><</button>
<button title="下一張" class="next">></button>
</div>
</div>
2.2 css代碼
*{padding:0;margin:0;list-style: none;}
.banner{
width:500px;
height:312px;
overflow: hidden;
margin:0 auto;
position:relative;
}
.banner>ul{
height:312px;
width:3500px;
position: absolute;
left:0;
top:0;
}
.banner>ul li{
float:left;
width:500px;
}
.order{
display: block;
height:30px;
width:100%;
position: absolute;
top:90%;
left:0;
text-align: center;
}
.order i{
display:inline-block;
width:16px;
height:16px;
border-radius: 50%;
background:chocolate;
border:2px solid chocolate;
margin-right:10px;
cursor:pointer;
}
.order i:last-child{
margin-right: 0;
}
.order .on{
background:white;
}
.ctrl{
width:100%;
height:60px;
position: absolute;
top:120px;
left:0;
}
.ctrl button{
width:40px;
height:60px;
background: #ccc;
color:#FFF;
border:0;
outline:none;
opacity: 0.5;
font-size: 30px;
cursor:pointer;
}
.ctrl .prev{
float:left;
margin-left:10px;
}
.ctrl .next{
float:right;
margin-right:10px;
}
2.3 js代碼
$(function(){
//創建控制小圓點
var imgLis = $('#banner>ul li');
console.log(imgLis.length);
for(i=0;i<imgLis.length;i++){
$('<i order='+i+'></i>').appendTo('.order');
}
//在第一個小圓點添加類名“on”
$('.order i').eq(0).addClass('on');
//將放置圖片的容器ul里第一份”li“復制一份，追加到ul后面
imgLis.first().clone().appendTo('#banner ul');
console.log(imgLis.length);
$('#banner>ul').width($('#banner ul li').width()*(imgLis.length+1));
var num = 0;
var timer = null;
//狀態預設，是為防止用戶連續點擊左右按鈕，導致短時間內圖片切換頻率過高而犯神經，程序反應不來
var state = true;
function play(){
//從左向右時，判斷num，是否大于最大值
if(num < 0){
num = imgLis.length-1;
$('#banner>ul').css({left:-imgLis.length*500+'px'});
}
//從右向左時，判斷num，是否大于最大值
if(num > imgLis.length){
num = 1;
$('#banner>ul').css({left:'0'});
}
var left = num*500;
$('#banner>ul').animate({left:-left+'px'},function(){
state = true;
});
//焦點
$('.order i').removeClass('on');
$('.order i').eq(num).addClass('on');
if(num >= imgLis.length){
$('.order i').first().addClass('on');
}
}
//自動播放
function autoPlay(){
timer = setInterval(function(){
num++;
play();
},1000);
}
//添加鼠標移入暫停，移出繼續事件
$('#banner').mouseover(
function(){
clearInterval(timer);
timer = null;
}
).mouseout(
function(){
autoPlay();
}
);
//給左右按鈕添加點擊事件
$('.prev').click(function(){
if(state == true){
state = false;
num--;
console.log(num);
play();
}
});
$('.next').click(function(){
if(state == true){
state = false;
num++;
play();
}
});
//給焦點添加點擊事件
$('.order i').click(function(){
num = $(this).index()
play();
});
autoPlay();
});
3、注意
記得要引入jq，否則無法運行
這個輪播圖雖然可用，但是有個很大的弊病，就是點擊焦點時，所點擊的焦點的索引與此時所顯示圖片的索引相差的有1或者大于1時會跳躍式快速滑動到相對應所點擊的焦點索引的圖片，對于用戶來說體驗不太好，所以這個輪播圖適合沒有焦點圖，需要使用此輪播圖的童鞋，為了體驗，最好刪除掉焦點圖部分相關代碼。
下一篇會有一個專門應對焦點圖點擊有良好體驗的輪播圖類型，敬請期待！
