制作时间：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监听浏览器窗口大小变化事件 ： $(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})
}
不过，测试一下之后，发现切换回第一张时，出现了瑕疵。
那接下去就要解决这个问题。
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也归零。
这样就可以循环切换啦啦啦。。。。
自适应轮播图效果结束。
不积跬步无以至千里
