本机JS实现自动轮播功能详解

本文给出了一个用本地JS实现自动轮播功能的实例。分享给大家参考，如下：

转盘图的实用性

轮播图是网站页面上最常见的效果之一，在很多网站上都有使用，比如淘宝JD.COM等等。需要一些自动标签，重复性高。这里分享一下，用js原生代码实现轮播的常见效果！

圆盘图原理

一系列大小相等的图片平铺，CSS布局只显示一张图片，其余隐藏。通过定时器实现自动播放。

Html布局

首先，父容器横幅存储所有内容，子容器img-list存储图片。子容器列表存储按钮点。Dot我用的是背景图！

div id=' banner ' ul id=' img-list ' liimg src=' http : images/banner 1 . png ' alt=' 1 '/Li liimg src=' http : images/banner 2 . jpg ' alt=' 2 '/Li Li img src=' http : images/banner 3 . png ' alt=' 3 '/Li/ul div id=' list ' span index=' 1 ' class=' on '/span span index

1.对盒子模型、文档流和绝对定位的理解。

2.图片有固定的宽度和高度。首先，在img-list中设置三张图片的总宽度，多余的会溢出：隐藏；藏起来！将li设置加载到其图片下，以向右浮动。

3.固定列表跨度的宽度和高度，并给出背景图片。在第一张图片上设置默认的黄点图片。

#横幅{ width :100%；划水：0；clear:两者；相对位置：高度： 400 px；z索引：1；} # img-list { display : block；宽度width:5760px高度： 400 px；飞越：隐藏；z索引：1；相对位置：}#img-list li{左侧浮动：宽度：100%；高度： 400 px；飞越：隐藏；/* position:绝对值；top:0left:0*/z-index : 2；} # list { width :100%；height:18px文本对齐：中心；绝对位置：bottom: 10pxz-index : 100；} # list span { width:18px高度： 18px；飞越：隐藏；display:内联块；margin:0 2px背景： url(./images/yuan . png)；cursor:指针；} #列表。在{ background: url(./images/huanyu . png)；}JS效果

1.首先，我们设置自动播放功能

2.然后当鼠标滑过容器时停止播放，继续播放直到下一个鼠标离开整个容器。

3.再次定义并调用自动播放功能

var banner=document . getelementbyid(' banner ')；var imglist=document . getelementbyid(' img-list ')。getElementsByTagName(' Li ')；var list=document . getelementbyid(' list ')。getElementsByTagName(' span ')；var索引=0；var计时器=null//设置autoplay函数autoplay(){ if(index=imglist . length){ index=0 }；changeImg(索引)；}//停止自动播放横幅。当鼠标经过整个容器时，onmouseover=function(){ clearinterval(timer );}//当鼠标离开整个容器时，继续播放直到下一个横幅。onmouseout=function(){ timer=set interval(autoplay，2000)；}//定义并调用自动播放功能timer=setinterval (autoplay，2000)；然后定义画面切换函数//定义画面切换函数函数change img(curindex){ for(var I=0；一.长度；I){ imglist[I]. style . display=' none '；清单[i]。className=} imglist[Curindex]. style . display=' block '；列表[curIndex]。类名=' on}最后遍历所有数字导航切换到对应的图片，获取其索引值

for(var I=0；一、清单.长度；i ) { list[i]。索引=I；清单[i]。onmouseover=function(){ clearInterval(计时器)；change IMg(this . index)；};到目前为止，我们转盘的所有代码都完成了！

不完美，继续努力！

更多对JavaScript相关内容感兴趣的读者可以查看本网站的主题：《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、0103010。

希望本文对JavaScript编程有所帮助。