轮播图原理:
- 创建一个div块,给定与图片大小相同的宽高;
- 相对div左右定位两个按钮分别控制图片向前或向后无缝滚动;
- 首先创建ul列表,每个li内放入一张图片,给所有的li左浮动;
- 让div展示当前图片,其余内容overflow:hidden隐藏;
- oUl.innerHTML += oUl.innerHTML;把所有的图片复制一份;
- 利用包裹图片队列的块进行位置偏移实现:
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”按钮,图片向右移动。