能够用手指滑动的焦点轮播图——swipe.js

最新推荐文章于 2021-02-08 12:58:29 发布

落花新月

最新推荐文章于 2021-02-08 12:58:29 发布

阅读量8.7k

点赞数 8

分类专栏： Web前端文章标签： swipe.js 手机轮播图焦点轮播 swipe swipe-master

本文链接：https://blog.csdn.net/luohuaxinyue/article/details/50963640

版权

Web前端专栏收录该内容

68 篇文章 1 订阅

订阅专栏

1.swipe.js 专门用来制作手指滑动的焦点轮播图

使用步骤：

下载swipe.js文件——》新建HTML5页面——》添加视口约束——》添加两个div，第一个的id名称可以任意，第二个固定为：“swipe-wrap”——》插入放置轮播图的div,而不是ul(因为swipe.js库只支持div)——》添加CSS样式——》引用JQuery 和swipe.js库——》。。。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机滑动轮播图</title>
    <meta content="width=device-width,minimum-scale=1.00001,maximum-scale=1.00001,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: 100%;
    }
    .yuandian {
        right:10px;
        bottom:10px;
        position: absolute;
        /*height: 40px;*/
    }
    .yuandian li{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: blue;
        float: left;
        margin-right: 10px;

    }
    .yuandian .cur{
        background:red;
    }

</style>
<body>
<div id="lunbotu">
    <div class="swipe-wrap">    <!--此处class的名称是固定的-->
        <div><img src="images/daiyu.png"  ></div>
        <div><img src="images/baochai.jpg"  ></div>
        <div><img src="images/xiangyun.png"  ></div>
        <div><img src="images/tanchun.png" ></div>
        <div><img src="images/wangxifeng.png" ></div>
        <div><img src="images/liwan.png"  ></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>