二十九、案例:碎图轮播图

发表于 | 更新于: | 分类于 ， ， |
| 字数: 2.3k | 时长 ≈ 12 分钟

二十九、jquery项目:碎图轮播图

UZU4KA.png

29.1 html

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DsignStudio</title>
    <!-- 清楚默认样式 -->
    <link rel="stylesheet" href="css/reset.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- header部分 -->
        <div class="header">
            <div class="inner">
                <h1 class="logo">
                    <a href="#">DesignStudio</a>
                </h1>
                <div class="nav">
                    <ul>
                        <li class="cur"><a href="">About</a></li>
                        <li><a href="">Services</a></li>
                        <li><a href="">Gallery</a></li>
                        <li><a href="">Privacy</a></li>
                        <li><a href="">Contacts</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- content部分 -->
        <div class="content">
            <div class="inner">
                <div class="carousel" id="carousel">
                    <div class="circles" id="circles">
                        <ol>
                            <li class="cur"><a href="javascript:void(0)"><span>01</span></a></li>
                            <li><a href="javascript:void(0)"><span>02</span></a></li>
                            <li><a href="javascript:void(0)"><span>03</span></a></li>
                            <li><a href="javascript:void(0)"><span>04</span></a></li>
                        </ol>
                    </div>
                    <div class="imgs" id="imgs">
                        <ul>
                            <li class="active">
                                <img src="images/slider-img1.jpg" alt="">
                                <div class="mask">
                                    <div class="close"></div>
                                    <h3>GoodCook1</h3>
                                    <h4>ONLINE COOKING RECIPES</h4>
                                    <div class="txt">
                                        <p>Esse cillum dolore eu fugiat nilla pariatur</p>
                                        <p>excepteur sint occaecat cupidatat non</p>
                                        <p>priident, sunt in culpa qui officia</p>
                                        <p>deserunt mollit anim.</p>
                                    </div>
                                    <a href="javascript:void(0)" class="more">Read More</a>
                                </div>
                            </li>
                            <li>
                                <img src="images/slider-img2.jpg" alt="">
                                <div class="mask">
                                    <div class="close"></div>
                                    <h3>GoodCook2</h3>
                                    <h4>ONLINE COOKING RECIPES</h4>
                                    <div class="txt">
                                        <p>Esse cillum dolore eu fugiat nilla pariatur</p>
                                        <p>excepteur sint occaecat cupidatat non</p>
                                        <p>priident, sunt in culpa qui officia</p>
                                        <p>deserunt mollit anim.</p>
                                    </div>
                                    <a href="javascript:void(0)" class="more">Read More</a>
                                </div>
                            </li>
                            <li>
                                <img src="images/slider-img3.jpg" alt="">
                                <div class="mask">
                                    <div class="close"></div>
                                    <h3>GoodCook3</h3>
                                    <h4>ONLINE COOKING RECIPES</h4>
                                    <div class="txt">
                                        <p>Esse cillum dolore eu fugiat nilla pariatur</p>
                                        <p>excepteur sint occaecat cupidatat non</p>
                                        <p>priident, sunt in culpa qui officia</p>
                                        <p>deserunt mollit anim.</p>
                                    </div>
                                    <a href="javascript:void(0)" class="more">Read More</a>
                                </div>
                            </li>
                            <li>
                                <img src="images/slider-img4.jpg" alt="">
                                <div class="mask">
                                    <div class="close"></div>
                                    <h3>GoodCook4</h3>
                                    <h4>ONLINE COOKING RECIPES</h4>
                                    <div class="txt">
                                        <p>Esse cillum dolore eu fugiat nilla pariatur</p>
                                        <p>excepteur sint occaecat cupidatat non</p>
                                        <p>priident, sunt in culpa qui officia</p>
                                        <p>deserunt mollit anim.</p>
                                    </div>
                                    <a href="javascript:void(0)" class="more">Read More</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    <!-- 引入jquery包 -->
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

29.2 css

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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
/* 公共样式 */
a {
    color: #fff;
    text-decoration: none;
}
a:hover {
    color: #60B001;
}
.inner {
    width: 980px;
    margin: 0 auto;
}
body {
    font-size: 14px;
    font-family: "Arial", "Microsoft Yahei", "SimSun";
    line-height: 22px;
}
/* header部分 */
.header {
    height: 196px;
    background-color: #080808;
    overflow: hidden;
}
.header .logo {
    float: left;
    width: 367px;
    height: 72px;
    padding: 34px 0 0 30px;
}
.header .logo a {
    display: block;
    width: 266px;
    height: 47px;
    background: url(../images/logo.png);
    text-indent: -888em;
    overflow: hidden;
}
.header .nav {
    float: left;
    padding: 25px 0px 26px 0px;
}
.header .nav ul li {
    float: left;
}
.header .nav ul li a {
    display: block;
    padding: 0px 30px 0px 26px;
    background: url(../images/menu-spacer.png) no-repeat right top;
    line-height: 55px;
    font-size: 15px;
    font-weight: bold;
}
.header .nav ul li:last-child a {
    background-image: none;
}
.header .nav ul li.cur a {
    color: #60B001;
}

/* content部分 */
.content {
    background: url(../images/content-bg.jpg) no-repeat center top;
    background-size: cover;
    padding: 30px 0px;
}
.content .carousel {
    margin-top: -120px;
    width: 950px;
    height: 470px;
    background: url(../images/slider-bg.png);
    padding: 20px 0px 0px 30px;
}
.content .carousel .circles {
    float: left;
    width: 100px;
}
.content .carousel .circles ol li {
    width: 100px;
    height: 70px;
    margin-bottom: 1px;
}
.content .carousel .circles ol li a {
    display: block;
    width: 90px;
    height: 60px;
    background: url(../images/pagination-a.png) 0px -70px;
    padding: 10px 0px 0px 10px;
}
.content .carousel .circles ol li a span {
    display: block;
    width: 50px;
    height: 50px;
    background: url(../images/pagin-1.png);
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
}
.content .carousel .circles ol li:nth-child(2) a span {
    background: url(../images/pagin-2.png);
}
.content .carousel .circles ol li:nth-child(3) a span {
    background: url(../images/pagin-3.png);
}
.content .carousel .circles ol li:nth-child(4) a span {
    background: url(../images/pagin-4.png);
}
.content .carousel .circles ol li a:hover,
.content .carousel .circles ol li.cur a {
background-position: 0 0;
}
.content .carousel .imgs {
    float: left;
    width: 830px;
    height: 431px;
    position: relative;
}
.content .carousel .imgs ul li {
    position: absolute;
    width: 830px;
    height: 431px;
    top: 0;
    left: 0;
}
.content .carousel .imgs ul li.active {
    z-index: 10;
}
.content .carousel .imgs .mask {
    position: absolute;
    width: 300px;
    height: 370px;
    top: 0;
    right: 0;
    background: url(../images/banner-bg.png);
    padding-top: 61px;
    text-align: center;
    color: #fff;
}
.content .carousel .imgs .mask .close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 13px;
    height: 13px;
    background: url(../images/close.png);
    cursor: pointer;
}
.content .carousel .imgs .mask h3 {
    font-size: 39px;
    line-height: 71px;
    font-weight: bold;
}
.content .carousel .imgs .mask h4 {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 34px;
}
.content .carousel .imgs .mask .txt {
    line-height: 24px;
    font-size: 12px;
    margin-bottom: 34px;
}
.content .carousel .imgs .mask .more {
    display: block;
    width: 120px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #fff;
    color: #000;
    margin: 0 auto;
    font-size: 12px;
}

29.3 js

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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
(function(){
    // 我们将所有语句写入IIFE中，可以有效防止各个引入的js文件中变量之间相互污染
    // 获取元素
    var $imgs = $("#imgs ul li");
    var $carousel = $("#carousel");
    var $circles = $("#circles ol li");

    // 创建猫腻图容器 外面有了双引号，里面要用单引号
    var $maoni = $("<li class='maoni'></li>").appendTo($("#imgs ul"));
    // 图片width=830;height=431;均分成3行6列，每一个宽138.33，高143.66

    // 定义一个数组，用于保存18张碎图片
    var arr = (function(){
        // 定义数组
        var temp = [];
        // 将图片分为3*6的形式
        for (var i = 0 ; i < 3 ; i++){
            for (var j = 0 ; j < 6 ; j++){
                // 创建18个div追加到猫腻容器中
                temp.push($("<div></div>").css({
                    "width": 0,  // 138.33
                    "height": 0,  // 143.66
                    // 注意复合属性中的空格
                    "background": "url(images/slider-img1.jpg) no-repeat " + j * -138.33 + "px " + i * -143.66 + "px", 
                    "position": "absolute",
                    "left": j * 138.33,
                    "top": i * 143.66
                }).appendTo($maoni));
            }
        }
        return temp;
    })();
    // console.log(arr);

    // 定义2个信号量
    // 小圆点的信号量
    var small_idx = 0;
    // 定义大图的信号量
    var big_idx = 0;

    // 函数节流
    // 定义锁
    var lock = true;

    // 定义定时器
    var timer = setInterval(function(){
        // 小圆点信号量改变
        small_idx ++;
        // 判断信号量，保证信号量的有效值
        if(small_idx > $circles.length - 1){
            small_idx = 0;
        }
        // console.log(small_idx);
        // 自执行函数this指向window，要改变this指向(谁调用指向谁)
        change.call($circles.eq(small_idx));
    },6000);
    // 当鼠标进入carousel停止定时器
    $carousel.mouseenter(function(){//console.log(this)
        // 清除定时器
        clearInterval(timer);
    });
    // 当鼠标离开 重启定时器
    $carousel.mouseleave(function(){
        // 设表先关
        clearInterval(timer);
        // timer 重新赋值
        timer = setInterval(function(){
            // 小圆点信号量改变
            small_idx ++;
            // 判断信号量，保证信号量的有效值
            if(small_idx > $circles.length - 1){
                small_idx = 0;
            }
            // console.log(small_idx);
            // 自执行函数this指向window，要改变this指向(谁调用指向谁)
            change.call($circles.eq(small_idx));
        },6000);
    });

    // 添加点击事件
    $circles.click(change);
    // 定义一个函数用于复用
    function change(){
        // 如果lock是false 什么都不做
        if(!lock){
            return;
        }
        // 关闭锁
        lock = false;
        // 改变小圆点的信号量
        small_idx = $(this).index();
        // console.log(small_idx);
        // 当小圆点的信号量等于大图的信号量时，什么也不做
        if(small_idx === big_idx){
            // 开锁
            lock = true;
            return;
        }
        // 当前小圆点加cur
        $(this).addClass("cur").siblings().removeClass("cur");
        // 原来大图蒙版消失
        $(".mask").eq(big_idx).stop(true).fadeOut(1000);
        // 猫腻图出现
        $maoni.addClass("active");
        // 轮换猫腻图
        $.each(arr,function(index, value){
            // console.log(value);
            // 让对应小圆点信号量的大图的猫腻图出现
            // 设置随机出现 范围：>=0 <3300
            // console.log(small_idx + 1);
            value.css("backgroundImage", "url(images/slider-img" + (small_idx + 1) + ".jpg)").animate({
                "width": 138.33,
                "height": 143.66
            },300 + Math.random() * 3000);
        });
        // 定义延时器。在所有碎图片完成之后要做的事情：真图出现
        setTimeout(function(){
            // 当所有碎图显示之后，width，height 要变为0
            // 使用$.each
            $.each(arr,function(index, value){
                value.css({
                    "width": 0,
                    "height": 0
                });
            });
            // 猫腻图显示之后，应该出现真图
            // 改变大图的信号量
            big_idx = small_idx;
            // 大图出现，加active，所有兄弟包括猫腻图去掉active
            $imgs.eq(big_idx).addClass("active").siblings().removeClass("active");
            // 定义大图的蒙版淡入
            $(".mask").eq(big_idx).fadeOut(0).stop(true).fadeIn(1000);
            // 所有事情完毕之后，开锁
            lock = true;
        },3300);

    }

    // 点击close，让对应的蒙版mask消失
    $(".close").click(function(){
        $(this).parent().fadeOut(1000);
    });

    // 页面加载的时，第一个蒙版淡入 淡入的对象需要有display:none; 可以先淡出，让其自动拥有display:none;样式
    $(".mask").eq(0).fadeOut(0).stop(true).fadeIn(1000);
})();
相关文章
点击查看

本文标题:二十九、案例:碎图轮播图

文章作者:Mango

发布时间:2020年07月08日 - 22:33:48

最后更新:2020年07月08日 - 22:35:39

原始链接:https://mango185.github.io/post/fb0ebc50.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------
欢迎光临
❤️
Mango小站
请多关照
❤️
❤️