本文对原生js实现照片轮播特效代码做了一个总结，分享给大家参考。欢迎学习。

运行渲染：

特定代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题最简单的轮播广告/title style body，div，ul，Li { margin : 0；padd : 0；} ul { list-style-type : no；}正文{ background: # 000文本对齐：中心；font : 12px/20px Arial；} # box {位置：相对宽度： 492像素；高度： 172px背景# fffborder-半径： 5pxborder: 8px实心# fffmargin: 10px自动；} #框。列表{位置：相对；宽度： 490像素；高度： 170像素；飞越：隐藏；border: 1px固体# ccc} #框。列表Li { position : absolute top : 0；左： 0；宽度： 490像素；高度： 170像素；opa城市3360 0；过渡：不透明度0.5s线性} #框李名单。当前{ opa city 3360 1；} #框计数{位置：绝对值；右： 0；bottom: 5px} #框。计数li { color: # fff向左浮动：宽度： 20px高度： 20pxcursor:指针；右边距： 5px飞越：隐藏；背景# f90 opa city 3360 0.7边框-半径： 20px} #框李伯爵。当前{ color : # fffopa city 3360 0.7字体粗细： 700；背景： # f60 }/style/head dydiv id=' box ' ul class=' list ' Li class=' current ' style=' opa city 3360 1；img src=' http : img/images 04/01。jpg ' width=' 490 ' height=' 170 '/Li Li style=' opa city 3360 0；img src=' http : img/images 04/02。jpg ' width=' 490 ' height=' 170 '/Li Li style=' opa city 3360 0；img src=' http : img/images 04/03。jpg ' width=' 490 ' height=' 170 '/Li Li style=' opa city 3360 0；img src=' http : img/images 04/04。jpg ' width=' 490 ' height=' 170 '/Li Li style=' opa city 3360 0；img src=' http : img/images 04/05。jpg ' width=' 490 ' height=' 170 '/Li/ul class=' count ' Li class=' current ' 1/Li Li class=' 2/Li Li class=' 3/Li Li class=' 4/Li Li class=' 5/Li/ul/div脚本var box=document。getelementbyid(' box ')；var uls=文档。getelementsbytagname(' ul ')；var imgs=uls[0].getElementsByTagName(' Li ')；var btn=uls[1].getElementsByTagName(' Li ')；var i=索引=0;//中间量，统一声明；var play=nullconsole.log(box、uls、imgs、BTN)；//获取正确//图片切换，淡入淡出效果我是用（过渡：不透明度0.8s线性)做的，不纠结、简单在钢性铸铁里面功能展示(a){ //方法定义的是当传入一个下标时，按钮和图片做出对的反应for(I=0；长度；i ){ btn[i].className=//很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见btn[a].类名='当前；} for(I=0；iimgs.lengthi ){ //把图片的效果设置和按钮相同imgs[I]。风格。不透明度=0；imgs[a]。风格。不透明度=1；} } //切换按钮功能，响应对应图片for(I=0；长度；i ){ btn[i].索引=我；//不知道你有没有发现，循环里的方法去调用循环里的变量体我，会出现调到的不是我的变动值的问题。所以我先在循环外保存住btn[i].onmouseover=function(){ show(this。索引)；clearInterval(播放);//这就是最后那句话追加的功能} } //自动轮播方法函数autoPlay(){ play=setInterval(函数(){ //这个苍白的是为了保存定时器的，变量必须在全局声明不然其他方法调不到或者你可以调用自动播放也许可以但是没时间试了指数；index=imgs。长度(索引=0)；//可能有优先级问题，所以用了括号，没时间测试了。

显示(索引)；}，1000)} autoPlay()；//马上打电话。我尝试用window.onload调用这个方法，但是调用后影响了其他方法。所以只能调用鼠标进出事件框。onmouseover=function(){ clear interval(play)；};box . onmouseout=function(){ autoPlay()；};//在按钮下标处加上同样的鼠标事件，否则画面会停止，计时器会突然闪到一个大数字。看来我可以直接追加到之前定义的事件中。/script/body/html希望这篇文章能帮助你学习javascript编程。