利用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进行复杂的位置计算。为小伙伴们提供一种轮播图的实现思路。喜欢的小伙伴们别忘了点赞收藏关注哈~~。最后,欢迎关注公众号:【前端技术站】。