静态获取图片写法，给定图片的个数，用js实现轮播图自动转换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- *******设置样式********** -->
<style type="text/css">
.show_div{
width: 400px
height: 400px
margin: 0 auto
border: 2px solid block
overflow: hidden
}
.scroll_div{
width: 2000px
height: 400px
}
.scroll_div img{
width: 400px
height: 400px
float: left
}
</style>
<!-- end -->
</head>
<body>
<div class="show_div">
<div class="scroll_div">
<img src="img/b.jpg" alt="">
<img src="img/c.jpg" alt="">
<img src="img/d.jpg" alt="">
<img src="img/a.jpg" alt="">
<img src="img/b.jpg" alt="">
</div>
</div>
</body>
<!-- *********js代码******** -->
<script type="text/javascript">
var scrollDiv = document.getElementsByClassName("scroll_div")[0]
// 定义初始值
var left =0
// 定义一个定时器 走一步
function move(){
var timer = setInterval(function(){
left --
if (left <= -1600) {
left = 0
}
if (left % -400 == 0) {
clearInterval(timer)
timer = null
}
scrollDiv.style.marginLeft = left + "px"
},10)
}
// 定义一个定时器 每隔固定时间 走一张
setInterval(function(){
move()
},5000)
</script>
</html>
animation-name： 规定需要绑定到选择器的 keyframe 名称。animation-duration： 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function： 规定动画的速度曲线。
animation-delay：规定在动画开始之前的延迟。
animation-iteration-count： 规定动画应该播放的次数。
animation-direction：规定是否应该轮流反向播放动画。
@keyframes{
}
给每个动画及暂停分配时间，按照总时间的百分比分配；
以三张图片为例制作轮播图，若将最后的数值设置为100%，出现问题在于最后一张到第一张的切换没有动画；尝试给最后一张图片到第一张图片的动画时间，但是中间的切换效果是从最后一张向右滑动直到显示出第一张图，其效果反人类，不美观；但是，通过尝试在最后的一张图片后面在添加一张与第一张相同的图片，可实现循环的效果；
方法与一中大致相同，唯一更改的地方是css3的@keyframes规则里面的内容
若只将要显示的三张图片导入，会出现最后一张图片到第一张图片没有动画效果；通过尝试在最后的一张图片后面在添加一张与第一张相同的图片，可实现循环的效果；
问题在于图片一直处于切换状态，中间没有停顿；
