自适应轮播图

制作时间：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. 无缝切换

当切换到最后一张时，想要实现无缝切换的解决办法：
将第一张偏移到最后一张的后面，那么动画接下去就是紧接着切换回第一张的视觉效果。

无缝切换
这里需要再添加一个计数器： inow2
js代码改进：

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也归零。
这样就可以循环切换啦啦啦。。。。

自适应轮播图效果结束。

不积跬步无以至千里