手写无缝轮播图

时间 2019-11-17

标签手写无缝繁體版

原文原文链接

轮播图几乎在每一个项目中都会有，今天写了一个无逢轮播图javascript

1、实现的功能：

1. 进入页面，轮播图自动向右切换css

2. 鼠标悬停在轮播图部分时，轮播图中止切换，鼠标离开继续自动切换html

3. 鼠标悬停在下方的小圆点上时，自动切换到对应的图片java

4. 鼠标点击向左或向右按钮时，图片会向左或向右切换jquery

先来看一下效果图吧！flex

这里只能看到图片，不能看到动态切换的效果，点击下面的连接看一下效果吧！动画

http://sandbox.runjs.cn/show/9b78sdiyui

2、无逢轮播图实现原理：

所谓无逢轮播，就是几张图片向左或者向右切换，使最后一张图片和第一张图片首尾相连this

第一张图片和最后一张图片之间的切换，也像相邻的图片之间的切换同样，实现几张图片左右滚动切换的效果spa

那么，问题来了

怎样使第一张图片和最后一张图片首尾相边呢？

我是这样作的

首先，须要一个div容器来包裹这个轮播图部分，我给这个容器添加了类名carouselContainer，这个容器的宽度和高度设置为图片的宽度和高度，我设置的是500px* 300px，还须要设置一个属性：overflow : hidden;

而后须要一个ul标签来放置多张图片，ul标签的ID为carousel

ul标签中放置多个li标签，每一个li标签中都有一个img标签，用来放置图片，这几个标签向左浮动，在实现图片切换的时候，只须要移动ul便可

这部分是重点！

若是有3张图片，那我须要4个li标签，前三个li标签中放的是这三张图片，最后一个li中放的是第一张图片

若是有4张图片，那就须要5个li标签，前4个li标签放的是这4张图片，最后一个li中放的是第一张图片以此类推

在这里，我就以3张图片为例啦！

为了方便理解，画了个草图

首先，容器中显示的是第一张图片，即索引为0的粉色部分，（0、一、二、3分别表明几张图片的索引值）向右切换时显示的应该是0、一、二、0、一、2...

那么3有什么做用呢？

这里就是重点中的重点啦

当图片切换到2时，下一张是3，这时再切换时，切换到3

当前图片是3，3和1是同一张图征，再切换应该切换到2

若是当前图片是3，同时又要向右切换，咱们就把整个ul的margin-left设置为0，而后再让整个ul向左移动，移动到1（这里咱们觉得看到的是第一张图片，实际上是由于第一张图片和最后一张图片是同样的，咱们这时看到的是最后一张图片）

若是当前图片是0，同时又要向左切换，咱们就把整个ul的margin-left设置为3*每张图片的宽度，再让整个ul向右移动，移动到2

这样就实现了第一张图片和最后一张图片的首尾相连。

好了，原理就是这样了

3、接下来就是具体的代码实现了

1. html部分　

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>无缝轮播图</title>
    <script type="text/javascript" src="js/jquery/jquery-3.2.1.min.js"></script>
</head>
<body>
<body>

<div class="container">
    <h2>无缝轮播图</h2>
    <div class="carouselContainer">        
        <ul id="carousel">
            <li><img src="img/01.jpg"></li>
            <li><img src="img/02.jpg"></li>
            <li><img src="img/03.jpg"></li>
            <li><img src="img/04.jpg"></li>
            <li><img src="img/05.jpg"></li>
            <li><img src="img/01.jpg"></li>
        </ul>
        <div class="arrowItems">
            <div class="left">‹</div>
            <div class="right">›</div>
        </div>
        <div class="dots">
            <div class="dot current"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </div>
</div>

</body>
</html>

2. css部分

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    .container {
        width: 600px;
        margin: 0 auto;
        margin-top: 100px;
        text-align: center;
    }
    .carouselContainer {
        width: 500px;
        height: 300px;
        border: 1px solid #eee;
        margin: 0 auto;
        margin-top: 20px;
        overflow: hidden;
        position: relative;
        border-radius: 5px;
    }
    #carousel {
        font-size: 0px;
        display: flex;
    }
    .arrowItems {
        position: absolute;
        width: 100%;
        font-size: 60px;
        display: flex;
        top: 50%;
        justify-content: space-between;
        height: 60px;
        transform: translateY(-50%);
    }
    .arrowItems div {
        width: 30px;
        text-align: center;
        line-height: 46px;
        vertical-align: middle;
        background: rgba(0, 0, 0, 0.2);
        cursor: pointer;
        color: rgba(255, 255, 255, 0.4);
    }
    .arrowItems div:hover {
        background: rgba(0, 0, 0, 0.5);
        color: rgba(255, 255, 255, 0.6);
    }
    .dots {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 25px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 3px;
    }
    .dot {
        width: 12px;
        height: 12px;
        background: #fff;
        float: left;
        border-radius: 6px;
        margin: 0 3px;
    }
    .current {
        background: red;
    }

</style>

3. js部分

<script type="text/javascript">

    var picIndex = 0;
    //为小圆点绑定鼠标通过事件
    $('.dots div').mouseover(function(){
        picIndex = $(this).index();
        var left = -(picIndex) * 500 + 'px';
        //鼠标通过小圆点时，切换对应的图片
        $('#carousel').stop().animate({'margin-left': left});
        //当前小圆点为红色，其余为白色
        $(this).addClass('current').siblings().removeClass('current');
    });


    //自动播放
    autoplayCarousel();

    var timeId;
    function autoplayCarousel(){
        timeId = setInterval(function(){
            $('.arrowItems .right').click();
        }, 1000)
    }

    //右边按钮
    $('.arrowItems .right').click(function(){
        
        if(picIndex == $('#carousel li').length - 1) {
            picIndex = 0;
            $('#carousel').css({'margin-left': '0px'});
        }
        picIndex ++;
        var left = -(picIndex) * 500 + 'px';
        $('#carousel').stop().animate({'margin-left': left});

        //控制小圆点
        if(picIndex == $('#carousel li').length - 1) {
            $('.dots div').eq(0).addClass('current').siblings().removeClass('current');
        }else {
            $('.dots div').eq(picIndex).addClass('current').siblings().removeClass('current');
        }
    });
    //左边按钮
    $('.arrowItems .left').click(function(){
        
        if(picIndex == 0) {
            picIndex = $('#carousel li').length - 1;
            $('#carousel').css({'margin-left': -($('#carousel li').length - 1) * 500 + 'px'});
        }
        picIndex --;
        var left = -(picIndex) * 500 + 'px';
        $('#carousel').stop().animate({'margin-left': left});

        //控制小圆点
        if(picIndex == $('#carousel li').length - 1) {
            $('.dots div').eq(0).addClass('current').siblings().removeClass('current');
        }else {
            $('.dots div').eq(picIndex).addClass('current').siblings().removeClass('current');
        }
    });

    $('.carouselContainer').mouseover(function(){
        clearInterval(timeId);
    });
    $('.carouselContainer').mouseout(function(){
        autoplayCarousel();
    });
</script>

以上就是所有的全码了。

还能在线调试功能哦！

http://runjs.cn/code/9b78sdiy

4、在实现这个无逢轮播图地过程当中也学到了一些知识，顺便记录下来

1. 子盒子在父盒子里面水平垂直居中

垂直居中：

之前的垂直居中用的都是设置子盒子top: 50%; margin-top为负的子盒子高度的一半

这个方法有局限性，若是之后子盒子的高度变了，还须要再改一次子盒子的margin-top值

如今发现了一个完美的方式来设置子盒子在父盒子里面垂直居中：

给子盒子设置top: 50%; transform: translateY(-50%);

top是相对于父盒子的高度设置的，transform是相对于子盒子自身的高度设置的，这样，之后父盒子、子盒子的高度无论怎样变化，子盒子都会在父盒子里面垂直居中

水平居中也是同样的，设置left: 50%; transform: translateX(-50%);

2. 动画要先中止再动

在使用jquery的animate动画时，若是屡次触发动画，会出现动画错乱的现象，好比轮播图中的小圆点，若是鼠标一直在上面来回切换，图片就会左右乱动

出现这个现象的缘由就是前一个动画还没中止，又要执行下一个动画

解决办法很简单，就是先让上一个动画中止再执行下一个动画，执行动画前先中止上一个动画

即代码中的$('#carousel').stop().animate({'margin-left': left});

加stop()就解决这个问题了

3. 清除定时器

在这个轮播图的例子中我设置了定时器来使图片自动播放，当鼠标悬停在轮播图区域时，须要中止自动播放，在鼠标离开轮播图区域时，再开始自动播放

作法就是在须要自动播放时，设置定时器，给定时器绑定一个ID，var timeId = setInterval(function(){}, 1000);

在须要中止的时候经过clearInterval(timeId);来清除计时器

再须要自动播放时再经过timeId = setInterval(function(){}, 1000);来实现自动播放

这里须要注意的是，这个timeId要设置成一个全局变量，不然，若是每次自动播放时都写成var timeId = setInterval(function(){}, 1000);这里的timeId是一个新的变量，清除计时器时清除的也不是同一个计时器，这样就会出现播放错乱的现象，因此要设置成一个全局变量。

4. 图片放在一块儿时会有逢隙

图片放在一块儿时，中间会有逢隙，好比轮播图中，我给ul标签中的li设置了float: left; 向左浮动，可是图片之间会有一个逢隙，这样很差控制图片的移动。

网上的解决办法有不少，在这里，我采用了最简单的解决办法，就是给父盒子设置，font-size: 0px;

这样，图片之间就没胡逢隙了。

若是对您有帮助，记得点赞哦！须要您的支持与鼓励，同时也欢迎您留下宝贵意见！