轮播图实现

2018-01-31 本文已影响0人白柏更好

原理

轮播图的原理（js对图片位置的修改+动画+逻辑对应）
1 将图片列表浮动并放置在尺寸小于列表尺寸的div中，再将溢出部分隐藏（overflow： hidden）
2 在图片所在列表中分别克隆包含首个图片的li和最后一张图片的li,并将克隆出的第一张放在最后，将克隆后的最后一张放在最前面
3 对上一页&下一页的按钮绑定点击事件，事件中分别添加函数playPre()&playNext()
4 在两个函数中分别添加动画，使其水平滑动（分别向左向右滑动一个图片的宽度imgWidth）
5 函数中应存在判断，一是防止在左右滑动中图片列表偏移大于图片列表的尺寸从而出现白屏；二是为了实现轮播图首尾循环（在函数中应用pageIndex标记滑动页数，对应轮播图中的图片页数。当标记数等于图片数n时，重新设置图片列表偏移距离，也就是恢复至第一张图片显示时的距离，并重置pageIndex为0；当标记数小于0时，重新设置图片列表的偏移距离，也就是最后一张图片显示时的距离，并将pageIndex重置为n-1）
6 轮播图中下方的标记块的功能实现
6.1 通过让全局变量pageIndex作为标记块列表的索引值，再对对应标记块添加类名active，使标记块和图片逻辑顺序相对应
6.2 对标记块绑定点击事件，通过this获得标记块的索引值，再与pageIndex做减法，差m大于零则playNext(m),小于零，则playPre(m)

抽象出的函数

playPre()

function playPre(len){
            if(isAnimate) return ;
            isAnimate = true;
            $imgGroup.animate({
                left: "+=" + len*imgWidth
            },function(){
                pageIndex -= len;
                if(pageIndex < 0){
                    $imgGroup.css("left", "-1400px");
                    pageIndex = 3;
                }
                setBullet();
                isAnimate = false
            });
        }

playNext()

function playNext(len){
            if(isAnimate) return ;
            isAnimate = true;
            $imgGroup.animate({
                left: "-=" + len*imgWidth
            },function(){
                    pageIndex +=len;
                    if(pageIndex === imgCount){
                        $imgGroup.css("left", "-350px");
                        pageIndex = 0;
                    }
                setBullet();
                isAnimate = false;
            });
        }

setBullet()

 function setBullet(){
            $bullet.removeClass("active").eq(pageIndex).addClass("active");
        }

代码实现

效果演示

<html>
<head>
    <meta charset="UTF-8">
    <title>carousel</title>
    <style>
        .img-ct img {
            width: 350px;
            height: 210px;
        }
        .carousel {
            width: 350px;
            height: 210px;
            overflow: hidden;
            position: relative;
        }           //设置展示台尺寸
        .carousel ul,
        .carousel li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .content {
            width: 2100px;
            overflow: hidden;
            position: absolute;
        }
        .img-ct {
            float: left;
        }
        .arrow {
            width: 40px;
            height: 40px;
            border: 3px solid #dddddd;
            border-radius: 50%;
            color: #dddddd;
            font-size: 40px;
            line-height: 35px;
            text-align: center;
            position: absolute;
            bottom: 50%;
            margin-bottom: -20px;
            z-index: 1;
            cursor: pointer;
        }       //左右箭头
        .pre {
            left: 5%;
        }
        .next {
            right: 5%;
        }
        .bullet {
            position: absolute;
            width: 100%;
            bottom: 10px;
            text-align: center;
            z-index: 1;
            font-size: 0;
        }
        .bullet li {
            display: inline-block;
            width: 30px;
            height: 10px;
            border: 1px solid #dddddd;
            border-radius: 3px;
            cursor: pointer;
            margin: 0 3px;
        }
        .active {
            background-color: #dddddd;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
    <div class="carousel">
        <ul class="content">
            <li class="img-ct"><a><img src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg"/></a></li>
            <li class="img-ct"><a><img src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg"/></a></li>
            <li class="img-ct"><a><img src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg"/></a></li>
            <li class="img-ct"><a><img src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg"/></a></li>
        </ul>
        <a class="pre arrow"><</a>
        <a class="next arrow">></a>
        <ul class="bullet">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var $ct = $(".carousel");
        var $img = $(".img-ct");
        var $imgGroup = $(".content");
        var imgCount = $img.length;
        var $preBtn = $(".pre");
        var $nextBtn = $(".next");
        var imgWidth = $img.width();
        var $bullet = $(".bullet li");

        var isAnimate = false;
        var pageIndex = 0;
        $imgGroup.css("left", "-350px");
        $(".content").append($img.first().clone());
        $(".content").prepend($img.last().clone());

        $preBtn.click(function(){
            playPre(1);
        });
        $nextBtn.click(function(){
            playNext(1);
        });
        function playPre(len){
            if(isAnimate) return ;
            isAnimate = true;
            $imgGroup.animate({
                left: "+=" + len*imgWidth
            },function(){
                pageIndex -= len;
                if(pageIndex < 0){
                    $imgGroup.css("left", "-1400px");
                    pageIndex = 3;
                }
                setBullet();
                isAnimate = false
            });
        }
        function playNext(len){
            if(isAnimate) return ;
            isAnimate = true;
            $imgGroup.animate({
                left: "-=" + len*imgWidth
            },function(){
                    pageIndex +=len;
                    if(pageIndex === imgCount){
                        $imgGroup.css("left", "-350px");
                        pageIndex = 0;
                    }
                setBullet();
                isAnimate = false;
            });
        }
        function setBullet(){
            $bullet.removeClass("active").eq(pageIndex).addClass("active");
        }

        $bullet.click(function(){
            var index = $(this).index();
            if(index > pageIndex){
                playNext(index - pageIndex);
            } else if (index < pageIndex) {
                playPre(pageIndex - index);
            }
        });
        setInterval(function(){playNext(1)},3000);    //自动轮播
    </script>
</body>
</html>