使用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!
原文地址:https://www.cnblogs.com/amazingjava/p/9835817.html
时间: 2024-10-13 08:17:46