简易轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{width: 1000px;height: 300px;position: relative;margin: 20px auto;overflow: hidden;}
#box .imgbox{position: absolute;left:0;top:0;}
.imgbox a{display: block;width: 1000px;height: 300px;float: left;}
.imgbox img{width: 1000px;height: 300px;}
.btns input{width: 40px;height: 40px;background: rgba(200,200,200,0.6);border: none;
position: absolute;top: 130px;z-index: 1;}
#left{left:0;}
#right{right: 0;}
</style>
</head>
<body>
<div id="box">
<div class="imgbox">
<a><img src="https://img.zcool.cn/community/012dd25e55d09ba801216518b3709d.png" alt=""></a>
<a><img src="https://img.zcool.cn/community/01b67a5e55d1f1a80120a8957126ef.png" alt=""></a>
<a><img src="https://img.zcool.cn/community/01db115e572a7aa8012165189d7874.jpg" alt=""></a>
<a><img src="https://img.zcool.cn/community/0105515e55cf74a80120a895a76620.jpg" alt=""></a>
<a><img src="https://img.zcool.cn/community/012dd25e55d09ba801216518b3709d.png" alt=""></a>
</div>
<div class="btns">
<input type="button" id="left" value="<<<">
<input type="button" id="right" value=">>>">
</div>
</div>
<script src="../move.js"></script>
<script type="text/javascript">
var oleft=document.getElementById("left");
var oright=document.getElementById("right");
var oimgbox=document.querySelector(".imgbox")
var chid=oimgbox.children;
oimgbox.style.width=chid.length*chid[0].offsetWidth+"px";//chid[0].offsetWidth任意一张图片的宽度
//oimgbox.style.left=-chid[0].offsetWidth+"px";//chid[0].offsetWidth任意一张图片的宽度
var index=0;
oright.onclick=function(){
//oimgbox.appendChild(oimgbox.children[0].cloneNode(true));/* 在末尾克隆第一张图片 */
// 计算当前显示的是第几张图片的索引，有索引给你计算么？没有，怎么办？自己造
if(index==chid.length-1){
index=1;
oimgbox.style.left = 0;
}else{
index++;
}
move(oimgbox,"left",-index*chid[0].offsetWidth);
}
oleft.onclick=function(){
// 计算当前显示的是第几张图片的索引，有索引给你计算么？没有，怎么办？自己造
if(index==0){
index=chid.length-2;
oimgbox.style.left = -(chid.length-1)*chid[0].offsetWidth+"px";
}else{
index--;
}
move(oimgbox,"left",-index*chid[0].offsetWidth);
}
</script>
</body>
</html>
moved 封装见下一张
