html 一轮多图轮播,通过html+css3实现图片轮播切换

摘要：图片轮播切换是网站banner图常用的功能，很多网站的这个功能都是通过js来实现的，自从css3新增动画功能后，图片轮播切换不需要js也可以实现了。

图片轮播切换是网站banner图常用的功能，很多网站的这个功能都是通过js来实现的，自从css3新增动画功能后，图片轮播切换不需要js也可以实现了。

下面就让我们来看看如何只通过html+css3实现图片轮播切换效果。

html代码：html>

css轮播

                

                

                

• 1
• 2
• 3

图片轮播切换前的css样式：

*{padding: 0;margin: 0;}

body{

width: 100vw;

height: 100vh;

background: #82ccdd;

display: flex;

justify-content: center;

align-items: center;

}

div.scroll-photo{

position: absolute;

width: 400px;

height: 300px;

overflow: hidden;

}

div.photos{

position: absolute;

width: 1200px;

height: 300px;

z-index: -1;

}

div.photos img{

position: relative;

width: 400px;

height: 300px;

float: left;

}

div.index ul{

position: absolute;

display: grid;

bottom: 20px;

left: 50%;

transform: translateX(-50%);

list-style: none;

width: 150px;

grid-template: 1fr/repeat(3,1fr);

justify-items: center;

}

div.index ul::after{

content: '';

position: absolute;

top: 0;

left: 12.5px;

width: 25px;

height: 25px;

border-radius: 50%;

z-index: -1;

background: #d63031;

}

div.index ul li{

position: relative;

width: 25px;

height: 25px;

border-radius: 50%;

color: #FFF;

background: rgba(0,0,0,.5);

display: grid;

justify-content: center;

align-items: center;

}

图片切换效果css：div.photos{

animation:scroll 6s steps(3,end);

animation-iteration-count: infinite;

}

div.index ul::after{

animation:index-scroll 6s steps(3,end);

animation-iteration-count: infinite;

}

@keyframes scroll{

to{

transform: translateX(-1200px);

}

}

@keyframes index-scroll{

to{

transform: translateX(150px);

}

}

只需把图片切换效果的css加到上面切换前的css后面即可。

这里用到的css3属性是animation，animation有个steps属性，它可以指定动画分几步来完成，这里的banner设置了3张图片，所以这里设置动画分3步完成。

transform: translateX(-1200px)：3张图片，每张图片的宽度是400，图片轮播是从左到有显示图片，但显示图片的窗口是不动的，所以可以当成把图片往左拉，因此translateX里面的参数是负值。

index-scroll对应的是数字高亮图标的运动。与图片的运动一样，不过方向相反。

最终效果