利用css3中的keyframes可以轻松实现图片的轮播和巧妙的使图片轮播到该图片后进行暂停展示.
使图片暂停显示,这里控制是轮播图不进行位移在控制的时间内.在10%到25%的时间段内不进行位移.轮播图的最后一张设置为第一张图片,实现图片轮播的无缝连接.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
}
.swiper-container{
width: 640px;
height: 300px;
margin: 0 auto;
overflow: hidden;
}
.swiper-container img{
width: 640px;
height: 300px;
}
.swiper-wrapper{
width: 3000px;
display: flex;
animation: run 10s linear infinite;
}
@keyframes run {
0%{
transform: translateX(0);
}
10%{
transform: translateX(-640px);
}
25%{
transform: translateX(-640px);
}
35%{
transform: translateX(-1280px);
}
50%{
transform: translateX(-1280px);
}
60%{
transform: translateX(-1920px);
}
75%{
transform: translateX(-1920px);
}
85%{
transform: translateX(-2560px);
}
100%{
transform: translateX(-2560px);
}
}
.swiper-wrapper:hover{
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../img/轮播1.jpeg">
</div>
<div class="swiper-slide">
<img src="../img/轮播2.jpeg">
</div>
<div class="swiper-slide">
<img src="../img/轮播3.jpeg">
</div>
<div class="swiper-slide">
<img src="../img/轮播4.jpeg">
</div>
<div class="swiper-slide">
<img src="../img/轮播1.jpeg">
</div>
</div>
</div>
</body>
</html>版权声明：本文为m0_66809099原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。