使用css来实现幻灯片的效果
（1）自动轮播，鼠标移入停止播放，鼠标移出继续播放，但是不能设置按钮自动播放，不能点击一个点跳转到对应的图片
思路：切换图片就是像上面js那样的想法，有一个大的容器装着所有的图片，每次想要切换一张图片的时候就用translate来执行左移，但是每次左移之后，我们又不希望立马左移下面一张图片，所以保留一段时间给这张照片停留在那里，所以这个时候下一帧的动画的translate应该跟上一张一样。
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
.banner{
width: 640px;
height: 300px;
overflow: hidden;
margin: 20px auto;
}
.inner{
width: 3200px;
height: 300px;
position: relative;
animation: animate ease 16s infinite 2s running;
}
.innerwrapper{
width: 640px;
height: 300px;
float: left;
}
.innerwrapper img{
width: 640px;
height: 300px;
}
@keyframes animate {
0%{
transform: translateX(0px);
}
/*图片在这个期间进行切换，时间为16s*(5)% = 0.8s*/
5%{
transform: translateX(-640px);
}
/*图片在这个期间静止，时间为16s*(25-5)% = 1.2s*/
25%{
transform: translateX(-640px);
}
30%{
transform: translateX(-1280px);
}
50%{
transform: translateX(-1280px);
}
55%{
transform: translateX(-1920px);
}
75%{
transform: translateX(-1920px);
}
80%{
transform: translateX(-2560px);
}
100%{
transform: translateX(-2560px);
}
}
.inner:hover{
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="banner">
<div class="inner">
<div class="innerwrapper"><img src="../img/1.jpg" alt="banner1"></div>
<div class="innerwrapper"><img src="../img/2.jpg" alt="banner2"></div>
<div class="innerwrapper"><img src="../img/3.jpg" alt="banner3"></div>
<div class="innerwrapper"><img src="../img/4.jpg" alt="banner4"></div>
<div class="innerwrapper"><img src="../img/1.jpg" alt="banner1"></div>
<!--为了实现最后一张再切换到第一张的效果，所以这里就多插入一张最后一张-->
</div>
</div>
</body>
</html>
但是这样写是没有办法再添加点击切换的（纯css的状况下）
提供一种不是轮播，但是点击可以切换的代码
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
.viewport {
width: 500px;
height: 500px;
position: relative;
overflow: hidden;
}
.wrap {
position: relative;
width: 1500px;
height: 500px;
overflow: hidden;
}
.wrap img {
display: inline-block;
width: 500px;
height: 500px;
float: left;
}
/*当pic1是选中状态的时候，选中它后面的wrap*/
#pic1:checked ~ .wrap {
left: 0;
transition: 2s linear;
}
#pic2:checked ~ .wrap {
left: -500px;
transition: 2s linear;
}
#pic3:checked ~ .wrap {
left: -1000px;
transition: 2s linear;
}
.arrow label {
display: none;/*不显示*/
width: 2rem;
height: 2rem;
border-top: 1rem solid #000;
border-right: 1rem solid #000;
transform: rotate(-135deg);
}
/*设置选中后左箭头的样式*/
#pic1:checked ~ .arrow label:nth-of-type(3),
#pic2:checked ~ .arrow label:nth-of-type(1),
#pic3:checked ~ .arrow label:nth-of-type(2) {
display: inline-block;
position: absolute;
top: 50%;
left: 5rem;
}
</style>
</head>
<body>
<div class="viewport">
<input type="radio" name="slider" id="pic1" checked>
<input type="radio" name="slider" id="pic2">
<input type="radio" name="slider" id="pic3">
<div class="wrap">
<img src="../img/1.jpg" alt="">
<img src="../img/2.jpg" alt="">
<img src="../img/3.jpg" alt="">
</div>
<div class="page">
<label for="pic1"></label>
<label for="pic2"></label>
<label for="pic3"></label>
</div>
<div class="arrow">
<!--左箭头-->
<label for="pic1"></label>
<label for="pic2"></label>
<label for="pic3"></label>
</div>
</div>
</body>
</html>
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
