怎样用css实现无缝轮播图切换？-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

css实现无缝轮播图切换的方法：首先使用animation属性设置要绑定到选择器的keyframes的名称、完成动画所花费的时间、动画的速度曲线、动画的播放次数；然后使用@keyframes规则创建轮播动画，指定每个关键帧中图片的定位样式。

本教程操作环境：windows7系统、css3版，该方法适用于所有品牌电脑。

（推荐教程：CSS视频教程）

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

（实现一张一张的轮播，肉眼只看见一张图片）

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

<div class="out">
    <div class="imgs">
        <img src="img/beatuy.jpg"/>
        <img src="img/child.jpg"/>
        <img src="img/girl.jpg"/>
        <img src="img/milk.jpg"/>
        <img src="img/cup.jpg"/>
        <img src="img/dog.jpg"/>
        <img src="img/beatuy.jpg"/>
    </div>
</div>

最外层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实现无缝轮播图切换？的详细内容，更多文章请关注木庄网络博客！

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » 怎样用css实现无缝轮播图切换？

怎样用css实现无缝轮播图切换？

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论