light-swiper/index.html at master · devmc12/light-swiper · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!--
/**
 * Created by PhpStorm.
 * User: Devmc
 * Date: 2021/8/25
 * Time: 2:36
 */
-->
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Light-Swiper</title>
    <link rel="stylesheet" href="./light-swiper.css">
    <style>
        html,
        body {
            margin: 0;
            min-height: 100vh;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        * {
            box-sizing: border-box;
        }
    </style>
</head>

<body>

<!--方式1-->
<div class="light-swiper" style="width: 480px; height: 270px;">
    <img src="./images/1.jpg" data-href="https://www.baidu.com" alt="">
    <img src="./images/2.jpg" alt="">
    <img src="./images/3.jpg" alt="">
</div>

<!--方式2-->
<div class="light-swiper-2" style="width: 480px; height: 270px; margin-top: 4rem"></div>

<!--JS-->
<script src="./light-swiper.js"></script>
<script>
    /**
     * LightSwiper
     *
     * 原理：
     *  1. 动画：利用 transform + transition
     *  2. 切换（first向左切换到last，last向右切换到first）：
     *      在列表开头添加设置的最后一张图片，在列表结束添加设置的第一张图片，因此总图片数为 length + 1；
     *      默认显示列表第二张图片，即设置的第一张图片；
     *      在做上述切换时，如first向左切换到last，先切换到列表第一张图片，再关闭动画，切换到列表倒数第二张图片。
     *      以此实现无缝切换，具体看代码效果。
     *
     * @param selector
     * @param options
     * {
     *     images: []               // 图片  [url] or [{url,href}]
     *     interval: 5000           // 图片切换间隔
     *     autoplay: true           // 是否自动播放
     *     duration: 1000           // 动画播放时间
     *     target: '_self'          // 链接打开位置  _self,_blank,_parent,_top
     *     draggable: false         // 图片是否可拖动
     *     leftButtonImage: ''      // 左边按钮的图片
     *     rightButtonImage: ''     // 右边按钮的图片
     *     stopOnMouseover: true    // 当鼠标悬浮在左右按钮、小圆点上时，停止自动播放
     *     showButtons: 'always'    // 切换箭头的显示时机  always,hover,never
     *     showDots: 'always'       // 切换圆点的显示时机  always,hover,never
     * }
     */


    // 方式1
    new LightSwiper('.light-swiper', {
        draggable: false,
        target: '_blank'
    });

    // 方式2
    new LightSwiper('.light-swiper-2', {
        images: [
            {
                url: './images/1.jpg',
                href: 'https://www.baidu.com'
            },
            {
                url: './images/2.jpg'
            },
            './images/3.jpg'
        ],
        autoplay: false,
        showDots: 'hover',
        showButtons: 'hover',
        target: '_blank'
    });
</script>
</body>
</html>