这个效果一般称为图片轮播，实现的方法有很多，像b站的这种较为简单，可以用css3来实现。
以4张图片为例：
1.基本布局：
将4张图片左浮动横向并排放入一个div容器内，图片设置统一尺寸，div宽度设置4个图片的总尺寸，然后放入相框容器div，
相框设置1个图片的大小并设置溢出隐藏，以保证正确显示一个照片。
2.设置动画：
然后使用css3动画，通过对photos进行位移，从而达到显示不同的图片，每次偏移一个图片的宽度，即可显示下一张图片。
4张图片，需要切换3次.
根据需要可以对各个图片添加相应的序号和图片简介。
3.代码如下：
<div id="frame" ><div id="photos" class="play">
<img src="images/1.jpg" >
<img src="images/3.jpg" >
<img src="images/4.jpg" >
<img src="images/5.jpg" >
<ul id="dis">
<li>111111111111111</li>
<li>22222222222222</li>
<li>33333333333333</li>
<li>44444444444444</li>
</ul>
</div>
</div> 1 <style>
2 #frame{position:absolutewidth:300pxheight:200pxoverflow:hiddenborder-radius:5px}
3 #dis{position:absoluteleft:-50pxtop:-10pxopacity:.5}
4 #dis li{display:inline-blockwidth:200pxheight:20pxmargin:0 50pxfloat:lefttext-align:centercolor:#fffborder-radius:10pxbackground:#000}
5 #photos img{float:leftwidth:300pxheight:200px}
6 #photos { position: absolutez-index:9 width: calc(300px * 4)/*---修改图片数量的话需要修改下面的动画参数*/ }
7 .play{ animation: ma 20s ease-out infinite alternate}
8 @keyframes ma {
9 0%,25% { margin-left: 0px }
10 30%,50% { margin-left: -300px }
11 55%,75% { margin-left: -600px }
12 80%,100% { margin-left: -900px }
13
14 }
15 </style>
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>CSS3仿JS轮播图</title> <link rel="stylesheet" href="lbimage.css"/></head><body> <div id="photo"> <!--//1--> <input type="radio" name="btn" id="img1" checked/> <div> <div><img src="images/img1.jpg"/></div> <div> <label for="img6" class="up leftjianbian"><</label> <label for="img2" class="down rightjianbian">></label> </div> </div> <!--//2--> <input type="radio" name="btn" id="img2"/> <div> <div><img src="images/img2.jpg"/></div> <div> <label for="img1" class="up leftjianbian"><</label> <label for="img3" class="down rightjianbian">></label> </div> </div> <!--//3--> <input type="radio" name="btn" id="img3"/> <div> <div><img src="images/img3.jpg"/></div> <div> <label for="img2" class="up leftjianbian"><</label> <label for="img4" class="down rightjianbian">></label> </div> </div> <!--//4--> <input type="radio" name="btn" id="img4"/> <div> <div><img src="images/img4.jpg"/></div> <div> <label for="img3" class="up leftjianbian"><</label> <label for="img5" class="down rightjianbian">></label> </div> </div> <!--//5--> <input type="radio" name="btn" id="img5"/> <div> <div><img src="images/img5.jpg"/></div> <div> <label for="img4" class="up leftjianbian"><</label> <label for="img6" class="down rightjianbian">></label> </div> </div> <!--//6--> <input type="radio" name="btn" id="img6"/> <div> <div><img src="images/img6.jpg"/></div> <div> <label for="img5" class="up leftjianbian"><</label> <label for="img1" class="down rightjianbian">></label> </div> </div> <div> <label for="img1" id="dot1"></label> <label for="img2" id="dot2"></label> <label for="img3" id="dot3"></label> <label for="img4" id="dot4"></label> <label for="img5" id="dot5"></label> <label for="img6" id="dot6"></label> </div> </div></body></html>
css：部分
@charset "utf-8"
body{
background-image: url("images/bbbefb51f8198618b654e23e48ed2e738ad4e69a.jpg")
background-size: cover
}
img{
width: 850px
height: 500px
}
.photo{
width: 900px
height: 550px
border: 1px solid #555555
margin: auto auto
position: relative
background: #ffffff
box-shadow: 0 10px 80px rgba(0,0,0,.6)
}
.photo input{
display: none
}
.image{
position: absolute
top: 0px
left: 0px
width: 800px
height: 450px
margin: 25px 25px
transform: scale(0)
opacity: 0
transition: all 0.7s
}
.image img{
}
.nav label{
width: 150px
height: 500px
margin: 25px 25px
position: absolute
z-index: 10
opacity: 0
display: none
cursor: pointer
transition: opacity 0.2s
color: #ffffff
font-size: 50px
line-height: 450px
text-align: center
text-shadow: 0 0 15px #555555)
}
.leftjianbian{
background: linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%)
background: -o-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%)
background: -ms-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%)
background: -moz-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%)
background: -webkit-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%)
}
.rightjianbian{
background: linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%)
background: -o-linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%)
background: -ms-linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%)
background: -moz-linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%)
background: -webkit-linear-gradient(left , rgba(250, 242, 239,0) 10% , rgba(158, 148, 166,0.5) 100%)
}
.image:hover + .nav label{
opacity: 0.5
}
.nav label:hover{
opacity: 1
}
.nav .down{
right: 0
}
input:checked + .control .image{
opacity: 1
transform: scale(1)
transition: all 1s
}
input:checked + .control .nav label{
display: block
}
.dots{
width:100%
height: 20px
position: absolute
bottom: 30px
text-align: center
}
.dot{
width: 10px
height: 10px
margin: 0px 5px
border-radius: 50%
position: relative
display: inline-block
background: rgba(0,0,0,0.3)
}
input#img1:checked ~ .dots label#dot1,
input#img2:checked ~ .dots label#dot2,
input#img3:checked ~ .dots label#dot3,
input#img4:checked ~ .dots label#dot4,
input#img5:checked ~ .dots label#dot5,
input#img6:checked ~ .dots label#dot6{
background: rgba(0,0,0,0.7)
}
1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。
2、这里是html文件，引入css和html代码文件，如图所示。
3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。
4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。
5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）