图片轮播之：静若处子，动若脱兔（为何我不来写一篇关于图片轮播的博客呢？）

时间 2019-11-10

标签图片处子脱兔为何来写一篇关于博客繁體版

原文原文链接

1、闲聊：
css

图片轮播，一个你再熟悉不过的小东西了。或许在你刚开始学习web的时候就能作出来获得效果。可是你会发现当面对不一样的需求的时候又要从新写一个轮播。非常麻烦的对吧。LZ也是这样学习过来的，发现本身写的不少轮播的思路都不同了。此次写出的下一次也许就写不出来了，或者说是用更好的方式来实现了。下面一块儿来总结下都有什么样的需求。
html

2、需求：
web

1）首先是要能循环显示出来（不考虑循环效果）。
浏览器

2）鼠标移到图片上时中止切换，移开以后又自动开始循环。
缓存

3）带有图片标记，两个做用（一、能够给用户提示一共多少张，二、能够知道当前展现获得是第几张）。
服务器

4）带有切换按钮，当用按钮点击的时候就取消自动循环。让用户自由操做（切换按钮须要以上后出现，移开消失）。
app

3、思路：
ide

之前再最开始的时候作轮播是直接改变的图片 url 地址，可是如今不能这样作了。为何？由于没当变化一下url地址浏览器就会发送一个请求道服务器区拉取这个图片，这样对于性能来讲是很很差的。因此不能这样作。Now 那就经过移动图片吧。个人思路（也是在借鉴的基础上）将全部的图片联合成一副大的图片，这样只须要移动一副大的图片就能够实现轮播了。下面一块儿来看看怎样实现吧！
oop

4、实现步骤：
性能

HTML：

<!--picture-loop-wrapper-->
    <div class="picture-loop-wrapper"> //外部循环显示盒子
        <ul class="imgBox">            //组合长图盒子
            <li id="img1"><a href="#"><img src="img/1.jpg"></a></li>
            <li id="img2"><a href="#"><img src="img/2.jpg"></a></li>
            <li id="img3"><a href="#"><img src="img/3.jpg"></a></li>
            <li id="img4"><a href="#"><img src="img/4.jpg"></a></li>
            <li id="img5"><a href="#"><img src="img/5.jpg"></a></li>
        </ul>
        <div class="currentNum">        //显示标记盒子
            <span class="imgNum mark-color"></span>
            <span class="imgNum"></span>
            <span class="imgNum"></span>
            <span class="imgNum"></span>
            <span class="imgNum"></span>
        </div>
        <div class="control to-left"><img src="img/left-arrow.png"/></div>    //切换按钮组
        <div class="control to-right"><img src="img/right-arrow.png"/></div>
    </div>

分析：首先是外部的（picture-loop-wrapper）一个显示的盒子，控制显示的窗口大小。里面的 ul 这个就是把全部的图片组合起来做为一张长图。

CSS：

ul{
    margin: 0;    //消除自带的间距
    padding: 0;
}
/*picture-loop-wrapper*/
.picture-loop-wrapper{    //外部显示区域
    position: relative;
    width: 520px;
    height: 280px;
    overflow: hidden;    /*这里很重要，控制显示的范围*/
}
.imgBox{
    position: absolute;    //这里由于后面使用的是 left 属性
    width: 2600px;    /*组合长图，由于我是5张图，每张520px，因此长图就是5*520 = 2600px*/
    list-style-type: none;
}
.imgBox > li{
    float: left;     /*实现一排显示，由于li是块元素，因此采起浮动*/
    width: 520px;
}
.imgBox a{
    display: inline-block;     /*这里是为了不悬空，由于a是内联元素不会被撑开*/
}
.control{
    position: absolute;     /*绝对与wrapper盒子定位，实如今上面浮动*/
    top: 50%;
    margin-top: -20px;     /*锤子居中*/
    left: 20px;
    background: #000;
    opacity: .3;
    text-align: center;
    width: 40px;
    height: 40px;
    display: none;
    cursor: pointer;
}
.control img{
    margin-top: 8px;   /*图片居中*/
}
.control:hover{
    opacity: .8;
}
.to-right{
    left: 450px;
}
/*currentNum*/
.currentNum{
    position: absolute;
    left: 50%;
    top: 250px;
    margin-left: -35px;
    width: 70px;
    height: 11px;
}
/*spanNum*/
.imgNum{
    display: inline-block;
    float: left;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-radius: 9px;
    background: #b7b7b7;
    cursor: pointer;
}

.mark-color{
    background: #f40;
}

分析：css代码没什么可说的，主要就是注意定位的使用。补充（在Position属性值为absolute的同时，若是有一级父对象（不管是父对象仍是祖父对象，或者再高的辈分，同样）的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精肯定位是颇有帮助的。）和 overflow 的使用。

JS:

$(document).ready(function(){
    var $iBox = $('.imgBox'),
        $iNum = $('.imgNum'),  //缓存优化
        indexImg = 1,          //初始下标
        totalImg = 5,          //图片总数量
        imgSize = 520,         //图片尺寸 宽度
        moveTime = 1100,        //切换动画时间
        setTime = 2500,        //中间暂停时间
        clc = null;

    function moveImg(){
        if(indexImg != totalImg){
            $iBox.animate({
                left: -(indexImg*imgSize) + 'px'
            }, moveTime);
            $iNum.removeClass('mark-color')
                .eq(indexImg)
                .addClass('mark-color');
            indexImg++;
        }
        else{
            indexImg = 1;
            $iNum.removeClass('mark-color')
                .eq(indexImg - 1)
                .addClass('mark-color');
            $iBox.animate({
                left: 0
            }, moveTime);
        }
    }
    $iNum.hover(function(){              //鼠标放在下方标记上面
        $iBox.stop();                    //结束当前动画
        clearInterval(clc);              //暂停循环
        $iNum.removeClass('mark-color');
        $(this).addClass('mark-color');
        indexImg = $(this).index();
        $iBox.animate({
            left: -(indexImg*imgSize) + 'px'
        }, 500);
    },function(){
        clc = setInterval(moveImg, setTime);
    });

    //鼠标放在图片上中止动画
    $iBox.hover(function(){
        $('.control').fadeIn(200);       //出现切换按钮
        clearInterval(clc);              //暂停循环
    },function(){
        $('.control').hide();            //隐藏切换
        clc = setInterval(moveImg, setTime);
    });
    //显示左右
    $('.control').hover(function(){       //放在切换按钮上中止动画和循环
        clearInterval(clc);
        $('.control').show();
//        return false;容许传播
    });
    //向右边前进
    $('.to-right').click(function(){
        if(indexImg != totalImg){
            $iBox.animate({
                left: -(indexImg*imgSize) + 'px'
            }, moveTime);
            $iNum.removeClass('mark-color')
                .eq(indexImg)
                .addClass('mark-color');
            indexImg++;
        }
        else{
            indexImg = 1;
            $iNum.removeClass('mark-color')
                .eq(indexImg - 1)
                .addClass('mark-color');
            $iBox.animate({
                left: 0
            }, moveTime);
        }
    });
    //向左边前进
    $('.to-left').click(function(){
        indexImg--;              //下标减一
        if(indexImg != 0){
            $iBox.animate({
                left: -((indexImg - 1)*imgSize) + 'px'
            }, moveTime);
            $iNum.removeClass('mark-color')
                .eq((indexImg - 1))
                .addClass('mark-color');
        }
        else{
            indexImg = totalImg;
            $iNum.removeClass('mark-color')
                .eq(indexImg - 1)
                .addClass('mark-color');
            $iBox.animate({
                left: -((indexImg - 1)*imgSize) + 'px'
            }, moveTime);
        }
    });
    clc = setInterval(moveImg, setTime);   //自动循环图片切换
});

示意图：

这里对js代码作点说明：基本参数是能够随意改动的。就在最上面的初始。css代码和js代码均可以很好的兼容。勇气来也很方便。

5、总结：

这个例子能作到上面的全部需求，可是有一个问题就是：当最后一张的时候它会又从新到第一张。若是你不喜欢这样的话，那么不要紧。我已经作出来了，一直向前不回到第一张的例子。下面会继续写出来的。（发现用这个写博客真心很差写啊，有些很差说。很简单，可是又很关键的。不过应该思路你是明白了。值了！）

效果演示： http://www.jiuni.com.cn/myworks/picture-loop/index.html

（本篇完）