制作時間：13:30 - 15:30
基本實現步驟如下：
1. 圖片橫向排列
html代碼：
<div id="box">
<ul>
<li><img src="./images/華為輪播1.jpg"></li>
<li><img src="./images/華為輪播2.jpg"></li>
<li><img src="./images/華為輪播3.jpg"></li>
</ul>
<div id="btn">
<a href="javascript:;" class="active"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
css代碼：
*{ padding: 0; margin: 0; }
ul{ list-style: none; }
a{ text-decoration: none; cursor: pointer;display: inline-block; }
#box{ min-width: 1000px; height: 396px; position: relative; overflow: hidden; }
#box ul{ position: absolute; left: 0; }
#box ul li{ float: left; }
#box ul li img{ position: relative; }
#btn{ position: absolute; bottom: 0; text-align: center; width: 100%; }
#btn a{ width: 11px; height: 11px; background-color: #666; cursor: pointer; display: inline-block; }
#btn a.active{ background-color: #fff; }
#btn a:hover{ background-color: #fff; }
為了讓所有圖片排成一列笔咽，那勢必要把 ul 的寬度設置正確。
js代碼：
var $oBox = $("#box");
var $oUl = $("ul");
var $aLi = $("li");
var $aImg = $("img");
var $oBtn = $("#btn");
var $aBtn = $("a");
var imgWidth = 1920;
$oUl.css({width:imgWidth*$aImg.length+"px"});
2. 每張圖片居中顯示
原因：圖片很寬霹期，有1920px叶组，比瀏覽器可視窗口寬。
解決思路：
計算圖片左偏移.png
js代碼：
for(var i=0;i<$aImg.length;i++){
$aImg.eq(i).css({ left:-(imgWidth-viewWidth)/2 });
}
3. 以1000px為分界線历造，如果瀏覽器窗口大于1000px則要求圖片自適應甩十，小于1000則出現滾動條.
涉及的知識點：
jquery獲取瀏覽器可視窗口寬度 ： $(window).width()
jquery監(jiān)聽瀏覽器窗口大小變化事件 ： $(window).resize(function(){})
所以js代碼如下：
function reSize(){
var viewWidth = $(window).width();
if(viewWidth > 1000){
for(var i=0;i<$aImg.length;i++){
$aImg.eq(i).css({ left:-(imgWidth-viewWidth)/2 });
}
}
}
reSize();
$(window).resize(function(){
reSize();
})
頁面效果如下：
頁面效果
4. 實現點擊切換
涉及的知識點：
addClass() ： 添加class
removeClass() ： 移除class
siblings() ：獲取同輩元素
$(" xx ").index() ： 獲取元素的索引值
所以js代碼如下：
Paste_Image.png
劃紅線處是計算元素的偏移。
我們通過下面的圖來看一下是如何怎么計算的吭产。
計算偏移.png
假如我們點第二個按鈕侣监，也就是顯示第二張圖，那么偏移的就是一張圖片的寬度臣淤。即
1*imgWidth假如點擊第三個按鈕使第三張圖顯示橄霉，那么圖3就要移動兩張圖片的寬度。即
2*imgWidth所以可以看出邑蒋，其實是
圖片的索引值*imgWidth
5. 實現自動切換
注意的一點是當切換到最后一張的時候姓蜂，要切換到第一張。
這里需要定義一個計數器 inow
function autoSwitch(){
setInterval(run,5000);
}
autoSwitch();
function run(){
var imgNum = $aImg.length;
if(inow == imgNum-1){
inow=0;
}else{
inow++;
}
$aBtn.eq(inow).addClass("active").siblings().removeClass("active");
$oUl.animate({left:-inow*imgWidth})
}
不過医吊，測試一下之后钱慢，發(fā)現切換回第一張時，出現了瑕疵卿堂。
那接下去就要解決這個問題束莫。
6. 無縫切換
當切換到最后一張時，想要實現無縫切換的解決辦法：
將第一張偏移到最后一張的后面草描，那么動畫接下去就是緊接著切換回第一張的視覺效果览绿。
無縫切換
這里需要再添加一個計數器：
inow2js代碼改進：
function autoSwitch(){
setInterval(run,5000);
}
autoSwitch();
function run(){
var imgNum = $aImg.length;
if(inow == imgNum-1){
inow=0;
$aLi.eq(0).css({position: "relative"});
$aLi.eq(inow).css({left: imgNum*imgWidth});
}else{
inow++;
}
inow2++;
$aBtn.eq(inow).addClass("active").siblings().removeClass("active");
$oUl.animate({left:-inow*imgWidth})
}
到這里已經解決了一半了。那接下來就是切回第一張后陶珠，應該怎么做挟裂？就是一切歸零享钞，從頭開始揍诽，洗心革面诀蓉。。暑脆。
在 $oUl.animate({left:-inow*imgWidth}) 上動手腳渠啤。
添加一個回調函數。
回調函數
判斷 inow == 0 就是已經切換回第一張了添吗。
接下來要將第一張的position值改為static沥曹。
inow2也歸零。
這樣就可以循環(huán)切換啦啦啦碟联。妓美。。鲤孵。
自適應輪播圖效果結束壶栋。
不積跬步無以至千里
