javascript轮播图算法

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

超文本标记语言

div id=' content _ img 1 ' ul id=' img 1 ' liimg src=' http : img/5。jpg '/Lili img src=' http : img/1。jpg '/Lili img src=' http : img/2。jpg '/Lili img src=' http : img/3。jpg '/Lili img src=' http 3360 img/4。jpg '/1/span span 2/span span span 3/span span span 4/span span span 5/span/div id=' content _ img 2 ' ul id=' img 2 ' liimg src=' http 3: img/5。jpg '/Lili img src=' http : img/1。jpg '/Lili img src=' http : img/2。jpg '/Lili img src=' http : img/3。jpg '/Lili1/跨度2/跨度3/跨度4/跨度5/跨度/div这里我相信最多疑惑的是，明明五张图片为何要在首尾加两张图片（李)做首尾呼应呢？原因如下图：

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

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

半铸钢钢性铸铁(铸造半钢)

* { margin : 0；padd : 0；列表样式：无；} span { width : 20px heart : 20pxdisplay :块；背景-color : blanchedalmond；border: 1px纯黑；向左浮动：文本对齐：中心；线高： 20pxz-index : 1；光标：指针；margin: 120px 8px 0 0} span。鼠标悬停在{底色：橙色；} # content _ img 1 {位置：相对；宽度： 470像素；高度： 150像素；border: 2px黑色固体；余量： 30px自动；飞越：隐藏；} # img 1 { position : absolutetop : 0pxleft :-470 px；z指数：-1;宽度： 700%;高度： 150像素；} # img1li { width: 470px高度： 150像素；向左浮动：} # content _ img 2 {位置：相对；宽度： 470像素；高度： 150像素；border: 2px黑色固体；余量： 30px自动；飞越：隐藏；} # img 2 { position : absolute top :-150 px；左： 0pxz指数：-1;宽度： 470像素；高度：700%;} # img2li { width: 470px高度： 150像素；}javascript函数方法

窗户。onload=function(){ var cont _ img 1=document。getelementbyid(' content _ img 1 ')；var span num 1=cont _ img 1。getelementsbytagname(' span ')；var img 1=文档。getelementbyid(' img 1 ')；var cont _ img 2=文档。getelementbyid(' content _ img 2 ')；var span num 2=cont _ img 2。getelementsbytagname(' span ')；var img 2=文档。getelementbyid(' img 2 ')；//向左轮播图的跨度按钮'鼠标经过事件for(var I=0；是pannum 1。长度；i ){spannum1[i].索引=我；spannum1[i].onmouseover=function(){ for(var p=0；PS pannum 1。长度；p){ if(span num 1[p]==this){ span num 1[p].将鼠标放在}else{spannum1[p]上.cleartime out(我是G1。定时器1)；now=this.indexscrollimg1(img1，spannu m1)；}} //向左轮播的主函数调用scrollimg1(img1，span nu m1)；//向上轮播图的跨度按钮'鼠标经过事件for(var I=0；是pannum 2。长度；i ){spannum2[i].索引=我；spannum2[i].onmouseover=function(){ for(var p=0；PS pannum 2。长度；p){ if(span num 2[p]==this){ span num 2[p].将鼠标放在}else{spannum2[p]上.{ CLaSS name=} } clear time out(img 2。定时器1)；nows=this . indexscrollim 2(img 2，span num 2)；}} //向上轮播的主函数调用scrollimg2(img2，span num 2)；} var now=1；函数scrollimg1(obj，spannum 1){ if(obj。offsetleft=-(obj。孩子们。长度-1)* obj。儿童[0].offsetwithts){//达到极限的计算位置，既是最后一个图就马上扯回初始位置now=0；obj.style.left=-(现在)*obj.children[0]。offsettwidth ' px } else { Move(obj，-obj.children[0]).offsetWidth *(现在)，'左'，5，30)；//否则图片进行向左运动的缓冲动画} for(var I=0；是pannum 1。长度；i ){ spannum1[i].className=} spannum1[(现在-1)%class name=' mouseoverobj . timer 1=setTimeout(函数(){//每3秒钟进行函数的回调，实现无限循环的图片轮播scrollimg1(obj，span num 1)；},3000);} var nows=1；函数scrollimg2(obj，spannum 2){ if(obj。offsettop=-(obj。孩子们。长度-1)* obj。儿童[0].偏移右侧){//达到极限的计算位置，既是最后一个图就马上扯回初始位置nows=0；物体。风格。top=-(nows)* obj。儿童[0].偏右px '；}else{ Move(obj，-obj.children[0]).偏右*(现在)、"顶",5,30);//否则图片进行向左运动的缓冲动画} for(var I=0；是pannum 2。长度；i ){ spannum2[i].span num 2[(nows-1)% span num 2 .长度].class name=' mouseoverobj . timer 1=setTimeout(函数(){//每3秒钟进行函数的回调，实现无限循环的图片轮播scrollimg2(obj，span num 2)；},3000);}函数移动（对象、目标、样式名、平均值、周期、连续函数){ 0参数类型：(对象，目标值，改变的样式属性，缓冲系数（速度与大小成反比),周期时间（速度与大小成反比),回调函数（可有可无))clearInterval(obj。计时器)；物体。timer=setInterval(function(){ if(style name==' opacity '){ var off value=math。round(parseFloat(getStyle(obj，style name))* 100)；定义变量速度=(目标关闭值)/平均值；速度=速度0?Math.ceil(速度):路径。地板(速度);if(speed==0){ clearInterval(obj。计时器)；if(continue函数)continue函数()；} else { obj。style[style name]=(off值速度)/100；物体。风格。filter=' alpha(opa city 3360 '(off值speed)')'；} } else { var off value=parsent(GetStyle(obj，style name))；定义变量速度=(目标关闭值)/平均值；速度=速度0?Math.ceil(速度):路径。地板(速度);if(speed==0){ clearInterval(obj。计时器)；if(continue函数)continue函数()；} else { obj。style[style name]=off值速度' px '；}}},循环);}函数getStyle(obj，stylename){//对象样式属性大小获取函数如果。currentstyle){ return obj。current style[样式名]；}else if(getComputedStyle(obj，false)){ 0返回getComputedStyle(obj，false)[样式名]；}}这种通过计算位置轮播算法的好处是，可以在我的样式范围内，在超文本标记语言的ul id='img'/ul内无限添加里里的图片，但是要记得要在首尾加前后呼应的里图片，并且根据图片大小来更改样式，就能实现图片轮播。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。