使用css实现轮播图

amazingjava 2021-10-14 原文

使用css3实现图片轮播

前言：实现图片轮播的方式有很多种，例如js ，css 等等。本文主要讲述使用纯css3实现轮播图

工具介绍：
使用的编辑器： Hbuilder

进入正题

html代码：

	<div id="slide_show">
		<div id="photos">
			<!--
            	作者：JavaBuild
            	时间：2018-10-21
            	描述：轮播图
            -->
			<img id="first_slide_photo" src="images/slideshow_1.png" />
			<img src="images/banner.jpg"/>
			<img src="images/midbanner.jpg"/>
                                                    
		</div>
	</div>

解释：定义两个div，第一个div用来确定展示的大小，第二个div用来实现图片的轮播。

css代码：

/* start slide show */
#slide_show {
	/* 第一个div的尺寸 */
	width: 1360px; 
	height: 600px;
	/* overflow:hidden 表示超出这个div的展示内容将被隐藏 */
	overflow: hidden;
}

#photos {
	/* calc(1360px * 3) 代表 一共有三张图片 ， 每张长度为1360px */
	width: calc(1360px * 3);
	height: 600px;
	/* animation 属性 实现动画效果，switch 动画函数名称，下面会写这个函数，6s代表整个轮播时长, ease-out 方向  infinite 循环轮播 normal 正常结束不反向轮播*/
	-webkit-animation: switch 6s ease-out infinite normal;
}

#photos > img {
	float: left;/* 向左浮动 ，图片连接无缝隙 */
	width: 1360px;
	height: 600px;
}

/* 轮播函数 */
@-webkit-keyframes switch{
	0%, 25% { /* 第1张图所用时长 */
		margin-left: 0px; /* 第一张距离左侧的长度 */
	}
	30%, 60% {/* 第2张图所用时长 */
		margin-left: -1360px; /* 第一张距离左侧的长度 */
	}
	70%, 100% {/* 第3张图所用时长 */
		margin-left: -2720px; /* 第一张距离左侧的长度 */
	}
}

/* end slideshow */

以上即可实现图片的轮播，简单易用。纯css！