jQuery实现自动轮播图

Leave a reply

1、演示地址：http://www.yusian.com/jquery/carousel.html

2、源代码

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <title>Bootstrap</title>
    <style>
        .container {
            margin:0 auto;
            width: 800px;
            overflow: hidden;
            position:relative;
        }
        .carousel{
            margin-top: 100px;
            position:relative;
            font-size: 0;
            box-sizing: border-box;
        }
        .carousel a{
            position: relative;
            display: inline-block;
            width: 800px;
            height: 300px;
            font-size: 200px;
            color: white;
            text-align: center;
            text-decoration: none;
        }
        .mark{
            position:absolute;
            bottom: 20px;
            right: 20px;
        }
        .mark a{
            color:white;
            font-size: 24px;
            padding: 0 10px;
            background: red;
            text-decoration: none;
            border-radius: 10%;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 轮播图片 -->
        <div class="carousel">
            <a href="javascript:" rel="1"><img src="https://dummyimage.com/800x300/933/fff/?text=1" alt=""></a>
            <a href="javascript:" rel="2"><img src="https://dummyimage.com/800x300/393/fff/?text=2" alt=""></a>
            <a href="javascript:" rel="3"><img src="https://dummyimage.com/800x300/339/fff/?text=3" alt=""></a>
        </div>
        <!-- 序号标记 -->
        <div class="mark">
            <a href="javascript:" rel="1">1</a>
            <a href="javascript:" rel="2">2</a>
            <a href="javascript:" rel="3">3</a>
        </div>
    </div>
 
    <script>
        // 初始变量
        let items = $('.carousel a');   // 轮播图链接集合
        let count = items.length;       // 轮播图数量
        let width = parseInt(items.first().css('width'));// 单张轮播图宽度
        let car_w = width*count + 'px'; // 轮播图控件总宽度
        $('.carousel').css({width:car_w});
        // 序号标记点击事件
        $('.mark a').click(function(e){
            $('.carousel').stop();
            // 根据当前点击序号，找到对应轮播图添加active类
            let index = $(this).attr('rel') - 1;
            items.removeClass('active');
            items.eq(index).addClass('active');
            // 调用自动轮播方法，并标记为手动触发
            autoScroll(true);
        });
        // 默认自动循环轮播
        var play = setInterval(function(){
            autoScroll();
        }, 1500);
        // 控件默认鼠标上浮则暂停轮播，移开则继续
        $('.container').hover(function(){
            clearInterval(play);
        },function(){
            play = setInterval(function(){
                autoScroll();
            }, 1500)
        });
 
        // 轮播方法主体
        function autoScroll(click=false){
            if (click) items.first().css({left:0});
            // 找到当前active的轮播图，如果没有默认为第一张
            let item = $('.carousel').find('.active');
            if (item.length === 0){
                item = items.first();
                item.addClass('active');
            }
            // 计算需要滑动的距离，实现控件动画
            let offset = item.position().left;
            $('.carousel').animate({
                left:-offset
            },600,function(){
                // 如果当前是第一张，动画结束后需要还原第一张的原始位置
                if (item.attr('rel') === items.first().attr('rel')){
                    resetPos();
                }
                // 动画结束后取下一张为active，如果是最后一张则跳到第一张
                items.removeClass('active');
                let next = item.next();
                if (next.length === 0){
                    next = items.first();
                    // 第一张默认放到第三张后面
                    next.css({left:(offset+width)});
                }
                next.addClass('active');
            });
        }
        // 还原当前位置
        function resetPos(){
            let item = $('.carousel').find('.active');
            let index = item.attr('rel') - 1;
            let offset = index * width;
            items.first().css({left:0});
            $('.carousel').css({left:-offset});
        }
    </script>
</body>
</html>

Leave a Reply