STU网页作业

学生静态网页作业仅使用 HTML CSS 怎么实现图片轮播效果

更新时间:半年前   文章分类:静态网页教程

学生制作简单网页时如何不使用JavaScript实现图片轮播效果呢?这里STU网页教大家仅使用CSS通过CSS3 animation 属性和 @keyframes 规则来实现图片轮播切换效果,代码非常简单,首先我们来看下实际效果。

CSS制作图片轮播

首先思路如下准备相同大小的多个图片,然后将要展示图片横排放在一个图片容器里面,在图片容器外再加一个展示容器,展示容器大小为图片大小。给图片容器添加自定义动画,在动画不同阶段设置递增的偏移值。
其次动画效果分为切换和停留两部分,自定义动画阶段与图片数量相关,动画各阶段偏移值与图片大小相关。

HTML代码部分:

<div id="container">
    <div id="banner">
        <img src="images/1.jpg" />
        <img src="images/2.jpg" />
        <img src="images/2.jpg" />
    </div>
</div>

CSS代码部分:

#container {
	width: 400px;
	height: 300px;
	overflow: hidden;
}
/* 容器大小和图片大小一致 */
 
#photo {
	width: 1200px;
	animation: switch 5s ease-out infinite;
}
/* 图片宽度*图片数量 */

#photo > img {
	float: left;
	width: 400px;
	height: 300px;
}
/* 图片大小 */

@keyframes switch {
	0%, 25% {
		margin-left: 0;
	}
	35%, 60% {
		margin-left: -400px;  /* 图片宽度 */

	}
	70%, 100% {
		margin-left: -800px; /* 图片宽度*2 */

	}
}


以上示例只有三个图片,所以添加了三个动画阶段,每一阶段都是通过设置递增的 margin-left 值达到切换的,效果设置的动画阶段(如:35%~60%)是动画停留部分,和上一阶段空余时间(如25%~35%)即为动画切换部分,各部分时间长短需要自己把控。
STU网页公众号

STU网页设计(STU-WORKS)专注于DW网页设计制作,学生网页设计作业,简单网页模板下载,HTML静态网页成品,网页设计代做,网站作品定制,网页毕业设计制作,学生网页成品免费下载...

客服QQ 7523350 (微信同号)