怎样实现banner自动播放html,纯CSS3实现banner图片自动轮播效果方式总结

最新推荐文章于 2024-01-03 10:33:23 发布

吴章金falcon

最新推荐文章于 2024-01-03 10:33:23 发布

阅读量1.1k

点赞数 1

文章标签：怎样实现banner自动播放html

本文介绍了两种CSS方法实现自动轮播图片，一种通过`opacity`和`animation`控制图片透明度，另一种利用`left`定位进行切换。鼠标悬停时图片会暂停播放。适合初学者了解CSS3动画在轮播中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自动轮播：

实现切换图片，图片循环播放；鼠标悬停某张图片，则暂停切换。css

方法一、opacity控制透明度实现轮播效果

依照需求咱们选择用CSS3的animation动画进行实现；transition动画须要触发才能启动，html

因此咱们选择自动触发的animation属性；动画

思路就是：将三个图片进行绝对定位重叠以后，将三个图片的动画放在一条时间轴上，分别在不一样时间点控制透明度，在样式代码中的细节code

写的很好理解了，在不用DOM的状况下是一种办法。orm

html:htm

css:图片

.banner{

height: 378px;

width: 100%;

position: relative;

img{

width:100%;

height: 378px;

position: absolute;

top: 0;

}

&__pics1{

opacity: 1;

animation:pics1 5s linear 0s infinite normal both running;

}

@keyframes pics1 {

// 0%{opacity: 1;}

// 33%{opacity: 1;}

// 33.3%{opacity: 0;}

// 66.6%{opacity: 0;}

// 100%{opacity: 1;}

from{

opacity: 1;

}

32%{

opacity: 1;

}

33%{

opacity: 0;

}

to{

opacity: 0;

}

&__pics2{

opacity: 0;

animation:pics2 5s linear 0s infinite normal both running;

}

@keyframes pics2 {

// 0%{opacity: 0;}

// 33.3%{opacity: 1;}

// 63.6%{opacity: 1;}

// 66.6%{opacity: 0;}

// 100%{opacity: 0;}

from{

opacity: 0;

}

30%{

opacity: 0;

}

31%{

opacity: 1;

}

60%{

opacity: 1;

}

61%{

opacity: 0;

}

to{

opacity: 0;

}

&__pics3{

opacity: 0;

animation:pics3 5s linear 0s infinite normal both running;

}

@keyframes pics3 {

// 0%{opacity: 0;}

// 33.3%{opacity: 0;}

// 66.6%{opacity: 1;}

// 96.6%{opacity: 1;}

// 100%{opacity: 0;}

from{

opacity: 0;

}

60%{

opacity: 0;

}

61%{

opacity: 1;

}

to{

opacity: 1;

}

// &:hover{

// &__pics1, &__pics2, &__pics3{

// cursor: pointer;

// animation-play-state: paused;

// }

}

.banner:hover img{

animation-play-state: paused;

cursor: pointer;

}

方法二、left定位控制向左实现轮播效果

.banner{

height: 378px;

width: 1900px;

margin: 0 auto;

overflow: hidden;

position: relative;

img{

width:100%;

height: 378px;

position: absolute;

top: 0;

}

&__pics1{

animation:pics1 15s linear 0s infinite normal both running;

}

@keyframes pics1 {

from{

left: 2000px;;

}

2%{

left: 0;

}

31%{

left: 0;

}

33%{

left: -2000px;

}

to{

left: -2000px;

}

&__pics2{

animation:pics2 15s linear 0s infinite normal both running;

}

@keyframes pics2 {

from{

left: 2000px;

}

31%{

left: 2000px;

}

33%{

left: 0;

}

64%{

left: 0;

}

66%{

left: -2000px;

}

to{

opacity: -2000px;

}

&__pics3{

animation:pics3 15s linear 0s infinite normal both running;

}

@keyframes pics3 {

from{

left: 2000px;

}

64%{

left: 2000px;

}

66%{

left: 0;

}

98%{

left: 0;

}

to{

left: -2000px;

}

.banner:hover img{

animation-play-state: paused;

cursor: pointer;

}