手写轮播

//手写轮播

//第一块：

<style>
#win {
width:250px;
height:100px;
overflow:hidden;
}

#pics{
width:1000px;
height:100px;
transition:margin-left 1s ease;
}

#pics a {
margin:0px;
padding:0px;
width:250px;
height:100px;
display:inline-block;
background-size:100% 100%;
}
</style>

//第二块：

<div id="win">
<div id="pics">
<a style="background:url(pics/x.jpg)"></a><a style="background:url(pics/y.png)"></a><a style="background:url(pics/z.png)"></a><a style="background:url(pics/t.png)"></a>
</div>
</div>

//第三块：

<script>

//让子元素向左飘动，就可以实现图片的切换
setInterval(function(){
var pics = document.getElementById("pics");

var zpy = pics.style.marginLeft;

if(zpy == "" || zpy == "-750px"){
var res = "0px";
}else{
var n = parseInt(zpy); //把偏移的值转化为整型，才能进行加减乘除的处理；
var number = n - 250; //每次移动250像素，每次移动一个图片的位置，用减法，表示向左移动。
var res = number + "px"; //加上偏移的单位，
}
pics.style.marginLeft = res ;
},1000);
</script>