1.图片轮播
(使用动画,根据图片不同时间的移动值来实现,图片排放在一个容器中,图片大小要与容器大小一致)
#photo>img{
float:left;
width:330px;
height:470px;
}
#photo{
width:1650px;
animation:switch 7s ease-out infinite;
}
<div id="container">
<div id="photo">
<img src="images/dushu2.jpg">
<img src="images/dushu3.jpg">
<img src="images/book (4).jpg">
<img src="images/book (5).jpg">
<img src="images/dushu (6).jpg">
</div>
</div>
上述每个图片宽度为330px;
img第一外层的photo为图片容器,即在此盒子中放了5张图片;图片中有添加 float的效果,这样就不用考虑去边距问题。
#container{
width:990px;
height:450px;
overflow: hidden;
}
img第二外层的container为所展示图片的容器,上述所展示为3张,剩余两张图片溢出使用overflow:hidden
来将其隐藏起来
#photo{
width:1650px;
animation:switch 7s ease-out infinite;
}
@keyframes switch{
0%,25%{margin-left: 0;}
35%,65%{margin-left:-330px;}
75%,100%{margin-left: -660px;}
}
上述为使所展示的容器中均有3张图片,一共5张图片,第一阶段展现出来的即为前三张;第二阶段第一张图片左一一个宽度展现出来的为第2,3,4张图片;第三阶段移动2个图片的宽度展现出来后3张图片。
该动画一个周期为7s,且以慢速 无限循环;
35%~65%为图片停留阶段,和第一阶段空出来的时间为动画切换的部分;
2.图片渐变轮播
(实现前面图片消失时后一个隐隐出现的效果)
<div id="RotationPicture">
<div id="screen">
<a href="#"target="_blank"><img src="images/QQ图片.jpg" width=100%;height=100%;></a>
<a href="#"target="_blank"><img src="images/two.jpg" width=100%;height=100%;></a>
<a href="#"target="_blank"><img src="images/four.png" width=100%;height=100%;></a>
<a href="#"target="_blank"><img src="images/three.png" width=100%;height=100%;></a>
</div>
</div>
先创建轮播图片的div,id为RotationPicture,在创建一个放入图片的div,id为screen,其中放了4张图片链接。
将图片设为宽度和高度都设置成100%,可以使整个图片显示出来;自由缩放图片且图片放大的尺寸不大于其原始值可以将其设置为max-weight:100%;height:auto;
;背景图片可以使其为background-size:100%;
使整个背景图片完全放入div中。
#RotationPicture{
height:50px;
}
#screen a{
position:absolute;
animation: donghua 12s Infinite;
}
@keyframes donghua{
0%{opacity: 0;}
3%{opacity:1;}
25%{opacity: 1;}
28%{opacity: 0;}
}
#screen a:nth-child(1){animation-delay:0s}
#screen a:nth-child(2){animation-delay:3s}
#screen a:nth-child(3){animation-delay:6s}
#screen a:nth-child(4){animation-delay:9s}
先要设置容器的大小位置;动画周期为12s,无限循环;animation-delay
为动画延迟时间,即第二张图片于整个阶段第3s开始播放,第3张图片于第6s开始播放;0%-3%中有3%的过渡时间(12s的3%),从刚刚开始的完全透明逐渐过渡到完全不透明,25%-28%再由完全不透明逐渐过渡到完全透明,实现前一张图片消失,同时后一张图片出现的效果。