使用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页面: