banner切换

html代码

   <div id="d1">
            <!-- 图片轮播 -->
            <div id="box">
                <a> <img src="../imgs/p1.png" alt=""></a>
                <a> <img src="../imgs/p2.jpg" alt=""></a>
                <a> <img src="../imgs/p3.jpg" alt=""></a>
                <a> <img src="../imgs/p4.jpg" alt=""></a>
                <a> <img src="../imgs/p5.jpg" alt=""></a>
            </div>
        </div>

css代码

#d1{
    position: relative;
    width: 376px;
    height: 375px;
    overflow: hidden;
    
}
#d1 #box{
    position: absolute;
    width: 376px;
    overflow: hidden;

}

#d1 img{
  
    height: 375px;
    float: left;
   
}

js代码

$(function () {

    let banWidth = 375,
        index = 0,
        imgcount = $('#box').children().length;
        
    $('#box').append($('#box a:eq(0)').clone());
    $('#box').width(banWidth * $('#box').children().length)
    //右切换
    function hideright() {
        if (index >= imgcount) {

            $('#box').css('left', '0px');
            index = 0;
        }
        $('#box').stop(true, true).animate({
            left: '-=' + banWidth + 'px'
        }, function () {
            index++;
        })
    }
    //左切换
    function hideleft() {
        if (index <= 0) {

            $('#box').css('left', -((imgcount) * banWidth) + 'px');
            index = imgcount;
        }
        $('#box').stop(true, true).animate({
            left: '+=' + banWidth + 'px'
        }, function () {
            index--;
        })
    }
    guest();
    settime();
    //定时滑动
    function settime(){
        hideright()
        setTimeout(settime,2000)
    }
}

//手势滑动

    function guest() {
        let startX, startY, endX, endY;

        $(document).on('touchstart', function (e) {
            startX = e.touches[0].pageX;
            startY = e.touches[0].pageY;

        });
        $(document).on('touchend', function (e) {
            endX = e.changedTouches[0].pageX;
            endY = e.changedTouches[0].pageY;

            //手势滑动 rx  lx
            let offsetrX = endX - startX;
            if (offsetrX > 60) {
                hideleft()
            }
            let offsetlX = startX - endX
            if (offsetlX > 60) {
                hideright()

            }
        });
    }