利用CSS实现一个轮播图，实现无缝衔接、平滑过渡、hover暂停效果。
本文利用纯CSS实现一个轮播图，代码简捷、实现简单，没有js的接入，为一定场景下的轮播图提供一个简单的实现。先看效果图：
1. 思路解析
我们把整个轮播分为三个区域解析：分别是外层的视口区域，负责展示轮播内容，然后是整个内容区，在内容区下附加一个填充区域，补充区域的内容和轮播首屏的内容一致。
当内容区的最后一屏数据向上滚动的时候，补充区的数据随之滚动。当滚动动作结束之后，立即让内容区的第一屏数据和补充区域的数据返回原位。因为补充区域的数据和内容区的第一屏数据是一致的，所以，此次的回复原位不会让用户在视觉上感受到，从而做到平滑无感替换。具体滚动过程详见：
把填充区域的颜色设置成和内容区一样的颜色，效果：
把视口区域设置查出区域不可见，就得到了我们最初的轮播效果：
2.代码实现
根据以上思路，我们编写代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css轮播</title>
</head>
<body>
<div class='wrapDiv' >
<ul class="ul-scroll">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<ul class="ul-scroll ul-fill">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<style>
.wrapDiv{
width:300px;
height:150px;
overflow:hidden;
border:1px solid blue;
position:relative;
}
.ul-scroll{
position:absolute;
width:100%;
height:300px;
animation:run 4s infinite;
margin-top:0px;
padding:0px;
}
.ul-fill{
top:300px;
}
ul li {
background-color: '#ddd';
height:26px;
padding:2px 0;
background-color: #99a9bf;
background-clip: content-box;
text-align: center;
list-style:none;
margin:0
}
@keyframes run {
0% {
transform:translateY(0);
}
40% {
transform:translateY(0);
}
50%{
transform:translateY(-50%);
}
90%{
transform:translateY(-50%);
}
100%{
transform:translateY(-100%);
}
}
</style>
</body>
</html>注意需要合理设置li的高度以及wrapDiv的高度。
3.鼠标悬停
通过以上方式，我们得到了一个自动播放、无缝衔接的轮播图。轮播图不可或缺的一个功能点是，当鼠标放上去的时候播放停止。由于我们的动画是通过CSS的animation实现的，所以悬停还是通过修改CSS的方式去实现。要通过CSS去停止动画的播放，就不得不用到CSS的animation-play-state属性。该属性可以控制animation的暂停、播放。
添加如下CSS样式：
.wrapDiv:hover .ul-scroll{
animation-play-state:paused
}当鼠标悬停在外层的视口区域时，停止两个ul的动画。鼠标移走时，动画继续：
总结
本文通过CSS实现可悬停的轮播图效果，不需要js进行复杂的位置计算。为小伙伴们提供一种轮播图的实现思路。喜欢的小伙伴们别忘了点赞收藏关注哈~~。最后，欢迎关注公众号：【前端技术站】。
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
