只用html图片轮播怎么不同步,如何使用css实现无缝轮播图切换

如何使用css实现无缝轮播图切换

发布时间：2020-12-01 10:07:40

来源：亿速云

阅读：89

作者：小新

小编给大家分享一下如何使用css实现无缝轮播图切换，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！css实现无缝轮播图切换的方法：首先使用animation属性设置要绑定到选择器的keyframes的名称、完成动画所花费的时间、动画的速度曲线、动画的播放次数；然后使用@keyframes规则创建轮播动画，指定每个关键帧中图片的定位样式。

使用CSS3实现：利用animation属性+@keyframes规则

(实现一张一张的轮播，肉眼只看见一张图片)

HTML部分比较简单，两个div下包着几个img标签；为了实现无缝轮播，注意第一张图片要与最后一张图片相同；

最外层div设置ovflow:hidden;position: relative;既然最外层div设置了position: relative;所以内层div需要设置position: absolute;使得其运动相对父元素而言；

CSS代码如下：.out{

width: 200px;

height: 100px;

overflow: hidden;

position: relative;

}

.imgs {

width: 1400px;

height: 100px;

position: absolute;

animation: ppt 10s linear infinite;

}

img {

float: left;

width: 200px;

height: 100px;

}

@keyframes ppt {

0% {

left: 0px

}

20% {

left: -250px

}

40% {

left: -500px

}

60% {

left: -750px

}

80% {

left: -1000px

}

100% {

left: -1200px

}

}

这样图片就可以轮播了。

但是鼠标放上去的时候图片还是一直在轮播的，如果我们想让鼠标放在图片上时，轮播停止，或者出现一些信息，我们需要加上：hover;设置动画的状态，代码很简洁：如下.out:hover .imgs{

animation-play-state:paused;

}

这样我们的轮播效果就出来啦；

看完了这篇文章，相信你对如何使用css实现无缝轮播图切换有了一定的了解，想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！