移动端touch轮播图

支持左右滑动、下标点击

结构部分

<div class="box">
       <ul class="unit">
            <li>
                <img src="./images/0.jpg" alt="">
            </li>
            <li>
                <img src="./images/1.jpg" alt="">
            </li>
            <li>
                <img src="./images/2.jpg" alt="">
            </li>
            <li>
                <img src="./images/3.jpg" alt="">
            </li>
            <li>
                <img src="./images/4.jpg" alt="">
            </li>
        </ul>
        <ol>
            <li class="cur">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>

样式部分

<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul,ol,li{
        list-style: none;
    }
    .box{
        overflow: hidden;
        position: relative;
    }
    .box .unit{
        display: flex;
        position: relative;
        left: 0;
       /*  width: 500%; */
    }
    .box li{
       
    } 
    .box li img{
        width: 100%;
        vertical-align: middle;
    }
    ol{
        display: flex;
    }
    ol li{
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: darkcyan;
        text-align: center;
        line-height: 15px;
        font-size: 12px;
        margin: 0 10px;
        display: inline-block;
    }
    ol li.cur{
        width: 30px;
        border-radius: 8px;
        color: #333;
        background-color: darkturquoise;
    }
    ol{
        position: absolute;
        bottom: 10px;
        left: 0;
        justify-content: center;
        left: 50%;
        transform: translateX(-50%);
    }
</style>

引用资源

<script src="./js/zepto.js"></script>
<script src="./js/zepto.touch.js"></script>
<script src="./js/zepto.animate.js"></script>

script 代码

<script>
    //移动火车
    var unit = $(".unit");
    //信号量
    var inx =0;
    //移动量 li length
    var length = $(".unit li").length;
    $(".unit li:nth-child(1)").clone().appendTo(".unit");
    //动态设置小火车的总长度
    $(".unit").css("width",$(".unit li").length * 100 +"%");
    //li的宽度
    var liWidth = $(".unit li").width();
    //动画累积问题
    var flag = false;

    //获取底部小圆圈
    var circle = $("ol li");
    //小圆圈的下标
    var _inx = 0;
    unit.on("swipeLeft",function () {
        if(flag)return;
        flag = true;
        inx ++ ;
        unit.animate({
            "left": - liWidth * inx
        },400,function () {
            if(inx > length-1){
                inx = 0;
                unit.css("left",0);
            }
            //动画走完 放行
            flag = false;
        })

        //先去掉所有的cur
        circle.removeClass("cur");
        //由于有一张克隆图 所以inx会走到5，但实际只到4 所以重新统一下表 
        _inx = inx > length-1 ? 0 : inx;
        //重新设置cur
         $("ol li:nth-child(" + (_inx + 1) + ")").addClass("cur");
    })

    unit.on("swipeRight",function () {
        if(flag)return;
        flag = true;
        inx --;
        if(inx < 0){
            inx = length - 1;
            unit.css("left",-liWidth * length)
        }
        unit.animate({
            "left" :  -liWidth * inx
        },400,function () {  
            flag = false;
        })

         //先去掉所有的cur
         circle.removeClass("cur");
        //向右滑先变换位置 所以inx 和 _inx 一致         
         //重新设置cur
         $("ol li:nth-child(" + (inx + 1) + ")").addClass("cur");
    })
    circle.on("tap",function () {  
        //清除动画积累
        if(flag)return;
        flag=true
        //统一信号量
        inx = $(this).index();
        //设置cur
        circle.removeClass("cur");
        $("ol li:nth-child("+(inx+1)+")").addClass("cur");
        //移动小火车
        unit.animate({
            "left": -liWidth * inx
        },400,function () {  
            flag = false;
        })
    })
    
</script>