纯css实现图片自动切换

纯css实现图片自动切换

对于我这样的小菜鸟来说真的不喜欢写js 以前写图片切换都是用js 刚好cs3的出现解决了这个
头疼的问题 主要用到的是css3的过渡 实现图片自动切换并添加轮播焦点
先看图吧

因为这里做的是手机端网页的效果 大家在复制代码的时候记得加上meta标签 使用手机端的尺寸来看 我已经放在html代码上了 下面css的代码格式大家将就看看吧 主要是为了节省空间 大家一定要按照规范来写 亲测有效 一定要用第二张图上的模式来测试

1. 效果图

注意看轮播图和轮播焦点 因为不会上传动图就这样看吧 !

2. html代码

<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="rotation-container">
	<!-- 轮播器 -->
	<div>
		<ul class="rotation_ul">
			<li class="rotation-item rotation-item1"></li>
			<li class="rotation-item rotation-item2"></li>
			<li class="rotation-item rotation-item3"></li>
			<li class="rotation-item rotation-item4"></li>
			<li class="rotation-item rotation-item5"></li>
		</ul>
	</div>
	
	<!-- 轮播焦点 -->
	<div class="focus-container">
		<ul class="focus_ul">
			<li><div class="focus-item focus-item1"></div></li>
			<li><div class="focus-item focus-item2"></div></li>
			<li><div class="focus-item focus-item3"></div></li>
			<li><div class="focus-item focus-item4"></div></li>
			<li><div class="focus-item focus-item5"></div></li>
		</ul>
	</div>
</div>

说明 :

1. 首先有一个图片轮播的外层 大块
2. 分为图片轮播 有一个ul 包含5张图片 并为每一个div设置了背景图片
3. 接着是轮播焦点块

3. css代码

/* 设置初始值和修改ul及li的默认样式 */
*  { padding: 0 auto;margin: 0 auto;box-sizing: content-box;}
ul { padding-inline-start: 0px; }
li { list-style: none; }

/* 图片轮播块 */

.rotation-container { width: 100%; position: relative; margin: 0 auto; }

.rotation_ul,.rotation-item {padding-bottom: 40%;}

.rotation-item { 
	position: absolute;
	width: 100%;
	background-size: 100%;
	animation: fade 20s linear;
	animation-iteration-count: infinite;
}

/* 设置背景图片 */
.rotation-item1 { background-image: url(../img/ban1.jpg); }
.rotation-item2 { background-image: url(../img/ban2.jpg); }
.rotation-item3 { background-image: url(../img/ban3.jpg); }
.rotation-item4 { background-image: url(../img/ban4.jpg); }
.rotation-item5 { background-image: url(../img/ban3.jpg); }

/* 设置动画 */
@keyframes fade {
	0% {opacity: 0;}
	5% {opacity: 1;}
	20% {opacity: 1;}
	25% {opacity: 0;}
	100% {opacity: 0;}
}

.rotation-item  { opacity: 0; }
.rotation-item1 { animation-delay: -1s; }
.rotation-item2 { animation-delay: 3s; }
.rotation-item3 { animation-delay: 7s; }
.rotation-item4 { animation-delay: 11s; }
.rotation-item5 { animation-delay: 15s; }

/* 轮播焦点块 */
.focus-container { position: absolute;bottom: 2%;z-index: 7;left: 80%;margin-left: -45px; }

.focus-container li { width: 8px;height: 8px;border-radius: 50%;float: left;margin-right: 10px;margin-bottom: 10px;background: #fff;
}

.focus-item {
	width: 100%;
	height: 100%;
	position: relative;
	opacity: 0;
	background: #51B1D9;
	border-radius: inherit;
	animation-duration: 20s;
	animation-timing-function: linear;
	animation-name: fade;
	animation-iteration-count: infinite;
}

.focus-item1 { animation-delay: -1s; }
.focus-item2 { animation-delay: 3s; }
.focus-item3 { animation-delay: 7s; }
.focus-item4 { animation-delay: 11s; }
.focus-item5 { animation-delay: 15s; }

.picture img {height: 150px;width: 100%;}