您的位置：首页 > Web前端 > CSS

使用css实现轮播效果

2018-02-03 11:12 351 查看

使用css制作简单的轮播效果，参考了以下代码：css实现的轮播和点击切换(无js版)

之前写过一个点击切换的教程，这里附上链接：使用css实现点击切换效果

与点击切换一样，首先先制作一个容器，用来容纳所显示的内容：

HTML代码：

<html>
<head>
<meta charset="utf-8">
<link href="css/test.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div class="contain">
<ul>
<li class="one">one</li>
<li class="two">two</li>
<li class="three">three</li>
</ul>
</div>
</div>
</body>
</html>

同点击切换一样，根据需要设置ul的长度，这里先制作三个切换窗口，因此将ul的宽度设置为容器宽度的300%，li即为每次切换时显示的子元素，宽度设置为显示容器的100%；为了将多出来的部分隐藏起来，此时就要给父元素（即显示窗口）设置overflow:hidden;属性
CSS代码：

.contain{
position: relative;
margin:auto;
width: 600px;
height: 200px;
text-align: center;
font-family: Arial;
color: #FFF;
overflow: hidden;
}

.contain ul{
margin:10px 0;
padding:0;
width: 1800px;
}

.contain li{
float: left;
width: 600px;
height: 200px;
list-style: none;
line-height: 200px;
font-size: 36px;
}

.one{
background: #9fa8ef;
}

.two{
background: #ef9fb1;
}

.three{
background: #9fefc3;
}

由于我们将ul设置成了一个宽度为父容器300%长条，此时，就可以通过修改margin-left属性值将其左移，以此实现切换效果，接下来，创建一个动画：
CSS代码：

@keyframes marginLeft{
0%{margin-left: 0;}
28.5%{margin-left: 0;}
33.3%{margin-left: -600px;}
62%{margin-left: -600px;}
66.7%{margin-left: -1200px;}
95.2%{margin-left: -1200px;}
100%{margin-left: 0;}
}

令ul标签使用这个动画，这里将动画的长度设置为10.5s，无限次播放
HTML代码：

<html>
<head>
<meta charset="utf-8">
<link href="css/test.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div class="contain">
<ul class="slide-auto">
<li class="one">one</li>
<li class="two">two</li>
<li class="three">three</li>
</ul>
</div>
</div>
</body>
</html>

CSS代码：

.contain .slide-auto{
animation:marginLeft 10.5s infinite;
}

设置0.5秒的平滑过渡
CSS代码：

.contain ul{transition:all 0.5s;}

这样，轮播效果就做好了，demo页面：
https://www.shijiewubaiqiang.top/old/test/test-1.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML css 前端

相关文章推荐

新的分享

章节导航