html代码
<!-- slide是轮播图区域 --> <div class="slide"> <!-- swiper里面放的是图片--> <ul class="swiper"> <li><img src="img/1.jpg" alt=""></li> <li><img src="img/2.jpg" alt=""></li> <li><img src="img/3.jpg" alt=""></li> <li><img src="img/4.jpg" alt=""></li> <li><img src="img/1.jpg" alt=""></li> </ul> <!-- 这里是轮播图上的小圆点 --> <div class="circle"> <div class="active"></div> <div></div> <div></div> <div></div> <div></div> </div> </div>
第一点：要想实现无缝衔接，ul里面放的第一张图和最后一张图要一致。千万不要写错哦 ，可以看到我的第一个li里面放的是1.jpg，最后一个li也是1.jpg。
第二点：带有类名active的是激活之后的实心白点。没有带类名的就是默认的空心圆。总共有4张图轮播，所有创建了4个空心圆，当播放到第一张图的时候就把实心圆移动到第一个空心圆的位置，依次类推。
.slide { /* 写相对定位是因为一会轮播图上的小圆点需要做绝对定位 */ position: relative; /* 让轮播图在页面中居中 */ margin: auto; /* 宽度和高度就是一张图的宽和高 */ width: 300px; height: 200px; /* 只显示一张图，其他超出盒子的图片先隐藏掉 */ overflow: hidden; } ul { list-style: none; /* 宽度尽量写大，确保能放下所有的图片 */ width: 9999px; /* 控制ul开始做位置移动（利用css动画特性来实现===核心代码） */ animation: swiperRun 10s infinite 2s running; } li { width: 300px; height: 200px; float: left; } img { width: 100%; height: 100%; } .circle { width: 100px; position: absolute; margin: auto; left: 0; right: 0; bottom: 10px; } .circle div { box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; border: 1px solid white; float: left; margin: 0 5px; } /* 鼠标滑过暂停播放 */ .slide:hover ul,.slide:hover .active{ animation-play-state: paused; cursor: pointer; } .circle .active { opacity: 1; transform: translateX(20px); background-color: #FFF; animation: circleRun 10s infinite 2s running; }
创建动画让图片和白点都动起来（这里是核心代码）
/* 让图片动起来的动画 */ @keyframes swiperRun { /* 第一张 */ 0% { transform: translateX(0px); } /* 第二张 */ 5% { transform: translateX(-300px); } 25% { transform: translateX(-300px); } /* 第三张 */ 30% { transform: translateX(-600px); } 50% { transform: translateX(-600px); } /* 第四张 */ 55% { transform: translateX(-900px); } 75% { transform: translateX(-900px); } /* 第五张 */ 80% { transform: translateX(-1200px); } 100% { transform: translateX(-1200px); } }
让白色实心圆点动起来的动画：
@keyframes circleRun { /* 第一个点 */ 0% { transform: translateX(20px); opacity: 1; } /* 第二个点 */ 5% { transform: translateX(40px); opacity: 1; } 25% { transform: translateX(40px); opacity: 1; } /* 第三个点 */ 30% { transform: translateX(60px); opacity: 1; } 50% { transform: translateX(60px); opacity: 1; } /* 第四个点 */ 55% { transform: translateX(80px); opacity: 1; } 75% { transform: translateX(80px); opacity: 1; } 77% { transform: translateX(19px); opacity: 0; } /* 第五个点 移出去 */ 80% { transform: translateX(20px); opacity: 1; } 100% { transform: translateX(20px); opacity: 1; } } transform: translateX(20px); opacity: 1; } 100% { transform: translateX(20px); opacity: 1; } }
