自动轮播:
实现切换图片,图片循环播放;鼠标悬停某张图片, 则暂停切换。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;
}