轮播图原理

轮播图原理：

1. 创建一个div块，给定与图片大小相同的宽高；
2. 相对div左右定位两个按钮分别控制图片向前或向后无缝滚动；
   
3. 首先创建ul列表，每个li内放入一张图片，给所有的li左浮动；
   
4. 让div展示当前图片，其余内容overflow:hidden隐藏；
5. oUl.innerHTML += oUl.innerHTML;把所有的图片复制一份；
6. 利用包裹图片队列的块进行位置偏移实现：

DOM中文档结构如下：

<div>
    <button type="button">left</button>
    <button type="button">right</button>
    <ul>
        <li><img src="img/demo1.jpg"/></li>
        <li><img src="img/demo2.jpg"/></li>
        <li><img src="img/demo3.jpg"/></li>
        <li><img src="img/demo4.jpg"/></li>
    </ul>
</div>

CSS中的样式如下：

body{
	margin:0;
}
div{
	width:1000px;
	height:330px;
	border:1px black solid;
	overflow:hidden;
	position:relative;
	margin:100px auto;
}
ul{
	margin:0;
	padding:0;
	list-style:none;
	position:relative;
}
li{
	float:left;
}
button{
	width:50px;
	line-height:50px;
	text-align:center;
	top:150px;
	position:absolute;
	z-index:2;
}
button:nth-of-type(1){
	left:0;
}
button:nth-of-type(2){
	right:0;
}

JS中的样式如下：

var aBtn = document.getElementsByTagName("button");
var oUl = document.getElementsByTagName("ul")[0];
var aLi = document.getElementsByTagName("li");
oUl.innerHTML += oUl.innerHTML;
oUl.style.width = aLi.length*1000+"px";
var i=0;
aBtn[0].onclick = function(){
	i++;
	doMove(oUl,-1000*i,12,"left",function(){
		if(i===4){
			oUl.style.left = 0;
			i = 0;
		}
	})	
}
aBtn[1].onclick = function(){
	if(i===0){
		oUl.style.left = -aLi.length/2*1000+"px";
		i = 4;
	}
	i--;
	doMove(oUl,-i*1000,12,"left");
}

封装好的函数：

//getStyle(元素,'样式名');通过函数名和传参进行调用
function getStyle(obj,attr){
	return obj.currentStyle ? 	obj.currentStyle[attr] :  getComputedStyle(obj)[attr];
}
//动画效果(对象，终点，速度，方向，回调函数)
function doMove(obj,end,step,attr,endFn){
	step = parseInt(getStyle(obj,attr))<end ? step : -step;
	clearInterval(obj.timer);
	obj.timer = setInterval(function (){
		var nextPlace = parseInt(getStyle(obj,attr)) + step;
		if(nextPlace>=end&&step>0||nextPlace<=end&&step<0){
			nextPlace=end;
		}
		obj.style[attr] = nextPlace + "px";
		if(parseInt(getStyle(obj,attr))===end){
			clearInterval(obj.timer);
			//if(endFn){endFn();}
			endFn && endFn();
		}
	},30);
}

效果图如下：

点击“left”按钮，图片向左移动：

移动完成后：

点击“right”按钮，图片向右移动。