javascript轮播图算法

轮播图，是网站首页中常见的一种图片切换特效，作为前端开发者，我相信很多开发者都直接调用了Jquery中的封装好的方法实现图片轮播，省事简单。所以我想介绍一下javascript纯代码实现的图片轮播。

HTML

12345







12345

这里我相信最多疑惑的是，明明五张图片为何要在首尾加两张图片(li)做首尾呼应呢？原因如下图：

这里以向左滚动的例子为说明

一开始布局的时候left: -470px;先处于第2个li也就是第2张图，当我们图片陆续向左滚动到第7张图片的时候，迅速扯回到第2张图，然后还是继续向左滚动。这样看起来就像是假象式的无限向左滚动循环，其实它里面只有7张图组成。同样的，如果实现向右滚动，我们一开始布局的时候，先处于第1个li也就是第1张图，当我们图片陆续向右滚动到第6张图片的时候，迅速扯回到第1张图，然后还是继续向右滚动。其实上下滚动轮播图道理是一样的，只不过少了一个float:left属性，让li垂直排列。

CSS

*{margin: 0;padding: 0;list-style: none;}span{width: 20px;height: 20px;display: block;background-color: blanchedalmond;border: 1px solid black;float: left;text-align: center;line-height: 20px;z-index: 1;cursor: pointer;margin: 120px 8px 0 0;}span.mouseover{background-color: orange;}#content_img1{position: relative;width: 470px;height: 150px;border: 2px black solid;margin: 30px auto;overflow: hidden;}#img1{position: absolute;top: 0px;left: -470px;z-index: -1;width: 700%;height: 150px;}#img1>li{width: 470px;height: 150px;float: left;}#content_img2{position: relative;width: 470px;height: 150px;border: 2px black solid;margin: 30px auto;overflow: hidden;}#img2{position: absolute;top: -150px;left: 0px;z-index: -1;width: 470px;height: 700%;}#img2>li{width: 470px;height: 150px;}

javascript函数方法

window.onload=function(){var cont_img1=document.getElementById("content_img1");var spannum1=cont_img1.getElementsByTagName("span");var img1=document.getElementById("img1");var cont_img2=document.getElementById("content_img2");var spannum2=cont_img2.getElementsByTagName("span");var img2=document.getElementById("img2");    //向左轮播图的span"按钮"鼠标经过事件    for(var i=0;i0?Math.ceil(speed):Math.floor(speed); if(speed==0){clearInterval(obj.timer);if(continuefunction) continuefunction(); }else{obj.style[stylename]=(offvalue+speed)/100;obj.style.filter="alpha(opacity:"+(offvalue+speed)+")"; }}else{var offvalue=parseInt(getStyle(obj,stylename));var speed=(target-offvalue)/average; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(speed==0){clearInterval(obj.timer);if(continuefunction) continuefunction(); }else{obj.style[stylename]=offvalue+speed+"px"; }}},cycle);}function getStyle(obj,stylename){//对象样式属性大小获取函数if(obj.currentStyle){return obj.currentStyle[stylename];}else if(getComputedStyle(obj,false)){return getComputedStyle(obj,false)[stylename];}}

这种通过计算位置轮播算法的好处是，可以在我的样式范围内，在HTML的

内无限添加li里的图片，但是要记得要在首尾加前后呼应的li图片，并且根据图片大小来更改样式，就能实现图片轮播。