css-轮播图

<style>
			       .slide {
			            /* 写相对定位是因为一会轮播图上的小圆点需要做绝对定位 */
			            position: relative;
			            /* 让轮播图在页面中居中 */
			            margin: auto;
			            /* 宽度和高度就是一张图的宽和高 */
			            width: 300px;
			            height: 200px;
			            /* 只显示一张图，其他超出盒子的图片先隐藏掉 */
			            overflow: hidden;
			        }
			
			        ul { 
			            list-style: none; 
			            /* 宽度尽量写大，确保能放下所有的图片 */
			            width: 1200px;
			            /* 控制ul开始做位置移动（利用css动画特性来实现===核心代码） */
			            animation: swiperRun 10s infinite 2s running;
			        }
			
			        li {
			            width: 300px;
			            height: 200px;
			            float: left;
			        }
			        img {
			            width: 300px;
			            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(-340px);
					            }
					
					            25% {
					                transform: translateX(-340px);
					            }
					            /* 第三张 */
					            30% {
					                transform: translateX(-640px);
					            }
					
					            50% {
					                transform: translateX(-640px);
					            }
					            /* 第四张 */
					            55% {
					                transform: translateX(-940px);
					            }
					
					            75% {
					                transform: translateX(-940px);
					            }
					            /* 第五张 */
					            80% {
					                transform: translateX(-0px);
					            }
					
					            100% {
					                transform: translateX(-0px);
					            }
					        }
							@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;
							            }
							        }





		</style>
	</head>
	<body>
		<!-- slide是轮播图区域 -->
		    <div class="slide">
		        <!--  swiper里面放的是图片-->
		        <ul class="swiper">
		            <li><img src="../img/1.jpg" alt="" width="300px" height="200px"></li>
		            <li><img src="../img/2.jpg" alt="" width="300px" height="200px"></li>
		            <li><img src="../img/3.jpg" alt="" width="300px" height="200px"></li>
		            <li><img src="../img/4.jpg" alt="" width="300px" height="200px"></li>
		            <li><img src="../img/1.jpg" alt="" width="300px" height="200px"></li>
		        </ul>
		        <!-- 这里是轮播图上的小圆点 -->
		        <div class="circle">
		            <div class="active"></div>
		            <div></div>
		            <div></div>
		            <div></div>
		            <div></div>
		        </div>
		    </div>