CSS 轮播图的实现(纯CSS,连续滑动无倒滑效果)
2019-12-06 本文已影响0人
鹿乐吾
简单demo:使用HTML+CSS 实现轮播图(三张图为例,分别为:红、绿、蓝)的效果。
实现效果:
不能发视频,截图来代替吧
示意图1.png 示意图2.png 示意图3.png实现思路
- 使用 div+ul+li 的页面布局方式(div 的宽度和 li 的宽度相同);
- 在 ul 中横向排列5个 li 元素(ul 的宽度 >= 5个 li 元素的和),排列顺序为 :轮播图3--轮播图1--轮播图2--轮播图3--轮播图1(为了滑动的连贯性不会出现倒滑现象做此设置),要设置 ul 的默认左边距,使页面默认显示第2个 li 元素(也就是轮播图1);
- 使 ul 进行动画移动,利用属性 “overflow: hidden” 使 li 依序显示出现轮滑效果。
HTML的代码如下:
<div class="swiper">
<ul class="swiper-wrapper">
<li>3</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
</ul>
</div>
CSS的代码如下:
.swiper {
position: relative;
margin: 60px auto;
width: 600px;
height: 600px;
text-align: center;
font-family: Arial;
color: #FFF;
overflow: hidden;
}
/*自动播放*/
.swiper .swiper-wrapper {
margin-left: -600px;
animation: swiperAnim 9s infinite;
padding: 0;
width: 3000px;
height: 100%;
}
.swiper li {
float: left;
width: 600px;
list-style: none;
line-height: 600px;
font-size: 100px;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
}
.swiper li:nth-child(1) {
background: blue;
/*background-image: url(../img/pic_8.png);*/
}
.swiper li:nth-child(2) {
background: red;
/*background-image: url(../img/pic_1.png);*/
}
.swiper li:nth-child(3) {
background: green;
/*background-image: url(../img/pic_2.png);*/
}
.swiper li:nth-child(4) {
background: blue;
/*background-image: url(../img/pic_8.png);*/
}
.swiper li:nth-child(5) {
background: red;
/*background-image: url(../img/pic_1.png);*/
}
/*动画*/
@keyframes swiperAnim {
0% {
margin-left: -600px;
}
28.5% {
margin-left: -600px;
}
33.3% {
margin-left: -1200px;
}
62% {
margin-left: -1200px;
}
66.7% {
margin-left: -1800px;
}
95.2% {
margin-left: -1800px;
}
100% {
margin-left: -2400px;
}
}
轮播示意图
1.显示 轮播图1(实际轮播的第2个元素li)
轮播示意图1.png
2.显示 轮播图2(实际轮播的第3个元素li)
{轮播示意图2.png
3.显示 轮播图3(实际轮播的第4个元素li)
轮播示意图3.png
4.显示 轮播图1(实际轮播的第5个元素li,之后会紧跟着重复以上动作)
轮播示意图4.png