1.HTML建立结构
/*
作者:A adiot
*/
<div id="photo">
<div id="photos">
<img src="images/图片2.jpg />
<img src="images/图片1.jpg"/>
<img src="images/图片3.jpg"/>
</div>
</div>
<--!建立两个div,第一个定义大小,第二个实现轮播-->
2.css代码实现
/*图片轮播部分*/
div.photo{
width:1200px;
height:558px;
<!--下面的图片将设置浮动,设置超出部分隐藏-->
overflow:hidden;
}
div.photos{
width:calc(1200px * 3);/*每张图片的宽度为1200px*/
height:558px;
<!--
动画属性
animation:name duration timing-funciton delay iteration-count direction fill-mode play-state
<!--动画:名称 时长 如何完成一个周期 启动前的延迟间隔 播放次数 是否应该轮流反向播放 规定当动画不播放/当动画结束时,要用到的元素样式 动画是否 正在运行或已停止-->
-webkit-animation:switch 12s ease-out infinite normal;
animation:switch 12s ease-out infinite normal;
<!--ease-out:动画以低速结束
infinite:播放次数永远
normal:动画按正常播放-->
}
div.photos>img{
float:left;
width:1200px;
height:600px;
}
@-webkit-keyframes switch {
10%,35%{ /*第一张图片播放所需要的时间*/
margin-left:0px; /*第一张图片距离左侧的长度*/
}
45%,70%{ /*第二张图片播放所需要的时间*/
margin-left:-1200px; /*第一张图片距离左侧的长度*/
}
80%,100% { /*第三张图片播放所需要的时间*/
margin-left: -2400px; /*第一张图片距离左侧的长度*/
}
}