十一、实现碎片轮播图

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

十一、实现碎片轮播图

11.1 构建动画

1
2
3
4
5
6
7
8
<div id="box">
    <div class="front"></div>
    <div class="back"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="top"></div>
    <div class="down"></div>
</div>
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
#box {
    position: relative;
    margin: 100px auto;
    width: 625px;
    height: 90px;
    /* border: 1px solid red; */
    transform-style: preserve-3d;
    /* transform: rotateX(30deg) rotateY(30deg); */
    animation: donghua 2s linear 2s forwards;
}
@keyframes donghua {
    from {
        transform: rotateX(0) rotateY(0);
    }
    30% {
        transform: rotateX(30deg) rotateY(-70deg);

    }
    50% {
        transform: rotateX(30deg) rotateY(-70deg);

    }
    to {
        transform: rotateX(180deg) rotateY(0);
    }  
}
#box div {
    position: absolute;
    left: 0;
    top: 0;
}
.front{
    width: 625px;
    height: 90px;
    background-color: rgba(255, 255, 0, .5);
    transform: translateZ(5px);
}
.back {
    width: 625px;
    height: 90px;
    background-color: rgba(255, 0, 255, .5);
    transform: translateZ(-5px);
}
.left {
    width: 10px;
    height: 90px;
    transform: rotateY(90deg) translateZ(-5px);
    background-color: rgba(0, 0, 255, .5);
}
.right {
    width: 10px;
    height: 90px;
    transform: rotateY(90deg) translateZ(620px);    
    background-color: rgba(0, 255, 255, .5);
}
.top {
    width: 625px;
    height: 10px;
    background-color: rgba(0, 255, 0, 0.5);
    transform: rotateX(90deg) translateZ(5px);
}
.down {
    width: 625px;
    height: 10px;
    background-color: rgba(255, 0, 0, .5);
    transform: rotateX(90deg) translateZ(-85px);
}

U8Q8aR.png

11.2 添加事件

11.2.1 dom结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="carousel">
    <div class="leftbox">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="down"></div>
    </div>
    <div class="rightbox">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="down"></div>
    </div>
</div>
<button id="prev">上一张</button>
<button id="next">下一张</button>

11.2.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
#carousel {
    width: 900px;
    height: 60px;
    border: 1px solid red;
    margin: 100px auto;
    position: relative;
}

.leftbox, .rightbox {
    position: absolute;
    width: 450px;
    height: 60px;
    transform-style: preserve-3d;
    top: 0;
}
.leftbox {
    left: 0;
    /* animation: left1 2s linear 2s forwards; */
}
.rightbox {
    right: 0;
    
    /* animation: right1 2s linear 2s forwards; */
}

@keyframes left1 {
    from {
        transform: rotateX(0) rotateY(0);
    }

    30% {
        transform: rotateX(30deg) rotateY(-70deg);

    }

    50% {
        transform: rotateX(30deg) rotateY(-70deg);

    }

    to {
        transform: rotateX(180deg) rotateY(0);
    }
}
@keyframes right1 {
    from {
        transform: rotateX(0) rotateY(0);
    }

    30% {
        transform: rotateX(30deg) rotateY(70deg);

    }

    50% {
        transform: rotateX(30deg) rotateY(70deg);

    }

    to {
        transform: rotateX(180deg) rotateY(0);
    }
}

.leftbox div, .rightbox div {
    position: absolute;
    left: 0;
    top: 0;
}

.front {
    width: 450px;
    height: 60px;
    transform: translateZ(5px);
}

.back {
    width: 450px;
    height: 60px;
    transform: translateZ(-5px);
}

.left {
    width: 10px;
    height: 60px;
    transform: rotateY(90deg) translateZ(-5px);
    background-color: #ccc;
}

.right {
    width: 10px;
    height: 60px;
    transform: rotateY(90deg) translateZ(445px);
    background-color: #ccc;
}

.top {
    width: 450px;
    height: 10px;
    background-color: #ccc;
    transform: rotateX(90deg) translateZ(5px);
}

.down {
    width: 450px;
    height: 10px;
    background-color: #ccc;
    transform: rotateX(90deg) translateZ(-55px);
}

11.2.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
<script>
// 封装一个类jquery的选择器
function $(selector) {
    return document.querySelectorAll(selector);
}
// 获得所有的图片
var imgarr = [].slice.call($('#imgs img'));
// 获得前面的元素
var fronts = [].slice.call($('.front'));
// 获得背面的元素
var backs = [].slice.call($('.back'));
// 声明一个信号量
var idx = 0;
// 设置图片
fronts.forEach(function(value, index) {
        // 设置背景图
        value.style.backgroundImage = 'url(imgs/' + idx + '.jpg)';
        if (index % 2 == 0) {
            // 左边的
            value.style.backgroundPosition = '0 0';
        } else {
            // 右边的
            value.style.backgroundPosition = '-450px 0';
        }
    });
// 绑定下一张
$('#next')[0].onclick = function() {
    // 更改信号量
    idx++;
    // 进行边界判断
    idx = idx > 7 ? 0: idx;
    // 设置背面的图片
    backs.forEach(function(value, index) {
        // 设置背景图
        value.style.backgroundImage = 'url(imgs/' + idx + '.jpg)';
        value.style.transform = 'rotateX(180deg)';
        if (index % 2 == 0) {
            // 左边的
            value.style.backgroundPosition = '0 0';
            value.parentNode.style.animation = 'left1 2s linear 0s forwards';
        } else {
            // 右边的
            value.style.backgroundPosition = '-450px 0';
            value.parentNode.style.animation = 'right1 2s linear 0s forwards';
        }
    });
    
}
</script>

11.3 最终效果

11.3.1 dom结构

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
<div id="carousel">
    <div class="leftbox">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="down"></div>
    </div>
    <div class="rightbox">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="down"></div>
    </div>
    <div class="leftbox">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="down"></div>
    </div>
    <div class="rightbox">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="down"></div>
    </div>
    <div class="leftbox">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="down"></div>
    </div>
    <div class="rightbox">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="down"></div>
    </div>
    <div class="leftbox">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="down"></div>
    </div>
    <div class="rightbox">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="down"></div>
    </div>
    <div class="leftbox">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="down"></div>
    </div>
    <div class="rightbox">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="down"></div>
    </div>
    <div class="leftbox">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="down"></div>
    </div>
    <div class="rightbox">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="down"></div>
    </div>
    <div class="leftbox">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="down"></div>
    </div>
    <div class="rightbox">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="down"></div>
    </div>
    <div class="leftbox">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="down"></div>
    </div>
    <div class="rightbox">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="down"></div>
    </div>
    <div class="leftbox">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="down"></div>
    </div>
    <div class="rightbox">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="down"></div>
    </div>
    <div class="leftbox">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="down"></div>
    </div>
    <div class="rightbox">
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="down"></div>
    </div>
</div>
<div id="btns">
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
</div>

11.3.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
#carousel {
    width: 900px;
    height: 600px;
    border: 1px solid red;
    margin: 0 auto;
    position: relative;
}

.leftbox,
.rightbox {
    position: absolute;
    width: 450px;
    height: 60px;
    transform-style: preserve-3d;
    top: 0;
}

.leftbox {
    left: 0;
}

.rightbox {
    right: 0;
}

@keyframes left1 {
    from {
        transform: rotateX(0) rotateY(0);
    }

    30% {
        transform: rotateX(30deg) rotateY(-70deg);

    }

    50% {
        transform: rotateX(30deg) rotateY(-70deg);

    }

    to {
        transform: rotateX(180deg) rotateY(0);
    }
}
@keyframes left0 {
    from {
        transform: rotateX(180deg) rotateY(0);
    }

    30% {
        transform: rotateX(210deg) rotateY(70deg);

    }

    50% {
        transform: rotateX(210deg) rotateY(70deg);

    }

    to {
        transform: rotateX(360deg) rotateY(0);
    }
}

@keyframes right1 {
    from {
        transform: rotateX(0) rotateY(0);
    }

    30% {
        transform: rotateX(30deg) rotateY(70deg);

    }

    50% {
        transform: rotateX(30deg) rotateY(70deg);

    }

    to {
        transform: rotateX(180deg) rotateY(0);
    }
}
@keyframes right0 {
    from {
        transform: rotateX(180deg) rotateY(0);
    }

    30% {
        transform: rotateX(210deg) rotateY(-70deg);

    }

    50% {
        transform: rotateX(210deg) rotateY(-70deg);

    }

    to {
        transform: rotateX(360deg) rotateY(0);
    }
}

.leftbox div,
.rightbox div {
    position: absolute;
    left: 0;
    top: 0;
}

.front {
    width: 450px;
    height: 60px;
    transform: translateZ(5px);
}

.back {
    width: 450px;
    height: 60px;
    transform: translateZ(-5px);
}

.left {
    width: 10px;
    height: 60px;
    transform: rotateY(90deg) translateZ(-5px);
    background-color: #ccc;
}

.right {
    width: 10px;
    height: 60px;
    transform: rotateY(90deg) translateZ(445px);
    background-color: #ccc;
}

.top {
    width: 450px;
    height: 10px;
    background-color: #ccc;
    transform: rotateX(90deg) translateZ(5px);
}

.down {
    width: 450px;
    height: 10px;
    background-color: #ccc;
    transform: rotateX(90deg) translateZ(-55px);
}
#btns {
    position: fixed;
    bottom: 60px;
    left: 50%;
    margin-left: -60px;
    width: 120px;
    /* border: 1px solid red; */
}

11.3.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
<script>
    // 封装一个类jquery的选择器
    function $(selector) {
        return document.querySelectorAll(selector);
    }
    // 获得左边的盒子
    var leftarr = [].slice.call($('.leftbox'));
    // 获得右边的盒子
    var rightarr = [].slice.call($('.rightbox'));
    // 获得所有的图片
    var imgarr = [].slice.call($('#imgs img'));
    // 获得前面的元素
    var fronts = [].slice.call($('.front'));
    // 获得背面的元素
    var backs = [].slice.call($('.back'));
    // 声明一个信号量
    var idx = 0;
    // 声明一个点击的信号量
    var click = 0;
    // 声明锁
    var lock = true;

    // 设置左边盒子的定位置
    leftarr.forEach(function(value, index) {
        value.style.top = index * 60 + 'px';
    });
    // 设置右边盒子的定位置
    rightarr.forEach(function(value, index) {
        value.style.top = index * 60 + 'px';
    });
    // 设置图片
    fronts.forEach(function (value, index) {
        // 设置背景图
        value.style.backgroundImage = 'url(imgs/' + idx + '.jpg)';
        // 设置背景图片的Y值
        value.style.backgroundPositionY = -(parseInt(index / 2)) * 60 + 'px';
        // 设置背景图片的X值
        if (index % 2 === 0) {
            // 左边
            value.style.backgroundPositionX =  '0px';
        } else {
            // 右边
            value.style.backgroundPositionX =  '-450px';

        }
    });
    // 绑定下一张
    $('#next')[0].onclick = function () {
        // 函数节流
        if (!lock) {
            return;
        }
        // 更改锁
        lock = false;
        // 更改信号量
        idx++;
        // 进行边界判断
        idx = idx > 8 ? 0 : idx;
        // 调用change
        change();
    }
    // 绑定上一张
    $('#prev')[0].onclick = function () {
        // 函数节流
        if (!lock) {
            return;
        }
        // 更改锁
        lock = false;
        // 更改信号量
        idx--;
        // 进行边界判断
        idx = idx < 0 ? 8: idx;
        // 调用change
        change();
    }


    // 封装一个函数
    function change() {
        // 更改点击的信号量
        click++;
        
        // 设置背面的图片(相对于我们而言的，该数组应该是切换的)
        var arr = [fronts, backs];
        arr[click % 2].forEach(function (value, index) {
            // 设置背景图
            value.style.backgroundImage = 'url(imgs/' + idx + '.jpg)';
            value.style.transform = 'rotateX('+ 180 * (click % 2)+'deg)';
            // 设置背景图片的Y值
            value.style.backgroundPositionY = -(parseInt(index / 2)) * 60 + 'px';
            // 延迟的设置
            setTimeout(function() {
                if (index % 2 == 0) {
                    // 左边的
                    value.style.backgroundPositionX = '0';
                    console.log('left' + (click % 2) + ' 2s linear 0s forwards');
                    value.parentNode.style.animation = 'left' + (click % 2) + ' 2s linear 0s forwards';
                } else {
                    // 右边的
                    value.style.backgroundPositionX = '-450px';
                    value.parentNode.style.animation = 'right' + (click % 2) + ' 2s linear 0s forwards';
                }
            },(parseInt(index / 2)) * 1000);
            // 设置一个开锁的
            setTimeout(function() {
                // 重置锁
                lock = true;
            },11000);
            
        });
    }
</script>

11.3.4 显示效果

U8QgRf.png

相关文章
点击查看

本文标题:十一、实现碎片轮播图

文章作者:Mango

发布时间:2020年07月14日 - 13:13:39

最后更新:2020年07月14日 - 13:27:10

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

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

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