轮播——左右轮播（加移动端的左右滑动）

最新推荐文章于 2022-03-09 08:36:36 发布

原创最新推荐文章于 2022-03-09 08:36:36 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#轮播

博客提及使用HTML、CSS和JS相关技术，结合标签可知可能是用于实现轮播功能。这些前端技术常用于网页开发，能构建出具有轮播效果的页面元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html
-

    <div class="small_screen ">
      <div class="d1_small">
           <div><img src="../img/index/anli1.png" alt=""></div>
           <div><img src="../img/index/anli2.png" alt=""></div>
           <div><img src="../img/index/anli3.png" alt=""></div>
           <div><img src="../img/index/anli4.png" alt=""></div>
           <div><img src="../img/index/anli5.png" alt=""></div>
           <div><img src="../img/index/anli6.png" alt=""></div>
       </div>
    </div>

.small_screen{margin-top: .5rem;text-align: center;width: 100%;touch-action: none;}
section .d1_small{width: 600%;overflow: hidden;display: inline-block;transition: all linear .3s;-moz-transition: all linear .3s; -webkit-transition: all linear .3s; -o-transition: all linear .3s;}
section .d1_small>div{display: inline-block;transition: all linear .3s;-moz-transition: all linear .3s; -webkit-transition: all linear .3s; -o-transition: all linear .3s;width: calc(100%/6)}
section .d1_small>div img{width: 70%}

$('.small_screen>div div').on('touchstart',function(event){
        //screenWidth:屏幕分辨率宽度
        var screenWidth = $(window).width();
        var that = this;
        //获取ul下的li总数
        var liCount = $('.small_screen>div div').length;
        //index:获取当前被点击的图片的索引值
        var index = $(that).index();
        //最小滑动距离，当左右滑动距离小于这个值时，图片返回原位置，不产生向左或者向右切换图片的效果
        var minMoveDis = 100;
        //获取点击x坐标
        var _touch = event.originalEvent.targetTouches[0];
        var clickX = _touch.pageX;
        $(".small_screen>div div").on('touchmove',function(event){
            //移动过程中，距离最开始点击位置的X距离
            var _sectouch = event.originalEvent.targetTouches[0];
            var distance = _sectouch.pageX - clickX ;
            var moveX = distance*(-1) + screenWidth * index * (-1);
            //滑动事件结束时
            $('.small_screen>div div').on('touchend',function(){
                $(".d2_small>span").removeClass('s_ac')
                if (0 < distance < minMoveDis ) {
                    moveX = index *screenWidth*(-1);
                }
                if(distance >=minMoveDis ){
                    if(index!=0){
                        moveX = (index-1) *screenWidth*(-1);
                        $(".d2_small>span").eq(index-1).addClass('s_ac')
                    }else{
                        $(".d2_small>span").eq(0).addClass('s_ac')
                    }
                }
                if(distance <=0){
                    if(index<liCount-1){
                        moveX = (index+1) *screenWidth*(-1);
                        $(".d2_small>span").eq(index+1).addClass('s_ac')
                    }else{
                        $(".d2_small>span").eq(liCount-1).addClass('s_ac')
                    }
                }
                $(".small_screen>div").css('margin-left',moveX+"px");

            });
        });
    });

这里写图片描述