移动端手指滑动实现轮播效果

最新推荐文章于 2022-04-23 00:30:47 发布

maggie_xff

最新推荐文章于 2022-04-23 00:30:47 发布

阅读量2.9k

点赞数

本文介绍了一种使用jQuery插件swipe.js实现移动端轮播图的方法。通过手指滑动即可切换图片，并展示了具体的HTML、CSS及JavaScript代码示例。

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

之前，在网上看到一个移动端的租房界面，里边的房屋类型展现是以轮播形式出现的，和以往一样没感觉什么不同。。。但是仔细思考一下，我们平常做的轮播图要不是通过按钮触发下一个图片，要不就是给定一个时间函数，比如3000ms后自动跳转，诸如此类的一些。那么问题来了，手机上是怎样做到通过手指触摸滑动发生跳转的

通过查询后，我了解到这是 jquery 的一个插件 swipe.js .

代码如下，仅供参考

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>手机焦点滑动轮播图</title>
    <meta content="width=device-width,minimum-scale=1,maximum-scale=1,shrink-to-fit=no,
    user-scalable=no,minimal-ui" name="viewport">
</head>
<style type="text/css">
    *{
        margin:0;
        padding: 0;
        list-style: none;
    }
    /* Swipe 2 required styles */

    #lunbotu {
        overflow: hidden;
        visibility: hidden;
        position: relative;
    }
    .swipe-wrap {
        overflow: hidden;
        position: relative;
    }
    .swipe-wrap > div {
        float:left;
        width:100%;
        position: relative;
    }
    /* END required styles */
    .swipe-wrap img{
        width: 30%;
    }
    .yuandian {
        right:10px;
        bottom:5px;
        position: absolute;
        /*height: 40px;*/
    }
    .yuandian li{
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: floralwhite;
        float: left;
        margin-right: 10px;

    }
    .yuandian .cur{
        background:red;
    }

</style>
<body>
<div id="lunbotu">
    <div class="swipe-wrap">    <!--此处class的名称是固定的-->
        <div><img src="1.jpg" alt="" / style="padding-left:8px;padding-right:10px;"><img src="4.jpg" alt="" / style="padding-right:10px;"><img src="2.jpg" alt="" /></div>
        <div><img src="2.jpg" alt="" / style="padding-left:8px;padding-right:10px;"><img src="4.jpg" alt="" / style="padding-right:10px;"><img src="2.jpg" alt="" /></div>
        <div><img src="3.jpg" alt="" / style="padding-left:8px;padding-right:10px;"><img src="4.jpg" alt="" / style="padding-right:10px;"><img src="2.jpg" alt="" /></div>
        <div><img src="4.jpg" alt="" / style="padding-left:8px;padding-right:10px;"><img src="4.jpg" alt="" / style="padding-right:10px;"><img src="2.jpg" alt="" /></div>
        <div><img src="5.jpg" alt="" / style="padding-left:8px;padding-right:10px;"><img src="4.jpg" alt="" / style="padding-right:10px;"><img src="2.jpg" alt="" /></div>
        <div><img src="6.jpg" alt="" / style="padding-left:8px;padding-right:10px;"><img src="4.jpg" alt="" / style="padding-right:10px;"><img src="2.jpg" alt="" /></div>
    </div>
    <ul class="yuandian">
        <li class="cur"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>


<script src="js/jquery-1.11.3.min.js"></script>
<script src='js/swipe.js'></script>
<script>

    // pure JS
    var elem = document.getElementById('lunbotu');
    window.mySwipe = Swipe(elem, {
        // startSlide: 4,
         auto: 3000,        //每隔3000ms，自动轮播一次
        // continuous: true,
        // disableScroll: true,
        // stopPropagation: true,

//        回调函数表示没做完一个轮播，就执行下面的内容
         callback: function(index, element) {
//             console.log(index);           //在控制台输出index的值

//             让自己的li添加cur类，其他的兄弟li移除cur类，也就是一种排他
             $(".yuandian li").eq(index).addClass("cur").siblings().removeClass("cur");

         }
        // transitionEnd: function(index, element) {}
    });

//    点击小圆点，图片会有一个slide的效果
    $('.yuandian li').click(function(){
        mySwipe.slide($(this).index());
    });

    // with jQuery
    // window.mySwipe = $('#mySwipe').Swipe().data('Swipe');

</script>
</body>
</html>

效果如下，pc端通过按钮进行切换，移动端手指触摸即可，在不做任务处理时是自动播放的：