Do not understand how the code is implemented, but it is implemented, the code is as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title></title>
<style>
. Banner {
width:300px;
height:200px;
position:relative;
Overflow:hidden;
Background:url ("1.jpg"); Pictures of the width 300, height 200 of any picture
}
. Banner UL {
margin:0;
padding:0;
}
. Banner Li {
Display:block;
}
. Sliders {
width:100%;
height:100%;
Position:absolute;
left:0;
right:0;
Animation:. 5s Slider-init linear;
}
. Sliders Li {
Position:absolute;
Left:-100%;
top:0;
width:100%;
height:100%;
Animation:. 5s Slider-out linear;
}
#slider-1 {
Background:url ("1.jpg");
}
#slider-2 {
Background:url ("2.jpg");
}
#slider-3 {
Background:url ("3.jpg");
}
. Sliders Li:target {
left:0%;
Animation:. 5s slider-in linear;
}
@keyframes Slider-init {
0% {
Left:-100%
}
100% {
left:0%;
}
}
@keyframes Slider-out {
0% {
left:0%;
}
100% {
Left:-100%;
}
}
@keyframes slider-in {
0% {
left:100%;
}
100% {
left:0%;
}
}
. btns {
z-index:100;
Position:absolute;
bottom:0;
right:0;
Display:flex;
}
. btns a {
Display:block;
margin:0 1px;
Background-color:rgba (255, 255, 255, 0.5);
Color:white;
Text-decoration:none;
padding:10px 14px;
}
</style>
<body>
<div class= "banner" >
<ul class= "Sliders" >//Carousel three photos
<li id= "Slider-1" ></li>
<li id= "Slider-2" ></li>
<li id= "Slider-3" ></li>
</ul>
<div class= "Btns" >
<a href= "#slider-1" >1</a>
<a href= "#slider-2" >2</a>
<a href= "#slider-3" >3</a>
</div>
</div>
</body>
Click the button picture to draw from right to left
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
