js图片轮播效果实现代码

首先来看看js图片轮播的效果，如下图。

具体想法：

1.页面加载，获取整个容器，放置数字索引的所有li和放置图片列表的ul，定义放置定时器的变量并存储当前索引的变量索引；2.增加定时器，每2秒递增一次索引，调用切换图片功能33601的提示，索引不能无限递增，需要判断；2.调用switching picture函数时，需要将递增的索引作为参数传递；3.定义切换画面功能的提示3360。2.根据传递的索引值找到对应的li，给它添加一个类，并将其设置为当前高亮。3.根据传递的索引值计算用于显示图片的ul的最大值。4.更改索引值，使其等于传递的参数值。注：ul显示图片的最大值=-index*单个图片的高度(所有图片的高度必须相同)。继续提示：1。当鼠标滑过整个容器时，清除计时器。2.鼠标离开时继续执行定时器，切换到下一张图片。5.用数字遍历所有li，并为它们添加索引。鼠标滑过时切换到相应的图片。当鼠标滑过时，调用图片切换功能来转移滑过的li的索引。具体代码如下：

！doctype html html lang=' en ' head meta charset=' UTF-8 ' title document/title style * { margin :0；划水：0；list-style : none；} .包装{ height:170px宽度width:490pxmargin:60px汽车；飞越：隐藏；相对位置：margin:100px auto} .包装ul { position:absolute} .包装ul li { height:170px} .包装ol { position:absoluteright:5pxbottom:10px} .包装ol li { height:20px宽度： 20px；背景# cccborder:solid 1px # 666边距-left :5 px；color: # 000float:left线高：中心；文本对齐：居中；cursor:pointer指针；} .包装ol。在{ background: # E97305color: # fff}/style script type=' text/JavaScript ' window . onload=function(){ var wrap=document . getelementbyid(' wrap ')，pic=document . getelementbyid(' pic ')。getElementsByTagName('li ')，list=document . getelementbyid(' list ')。getElementsByTagName('li ')，索引=0，计时器=null//定义并调用自动播放功能timer=setinterval (autoplay，2000)；//停止自动播放环绕。当鼠标经过整个容器时，onmouseover=function(){ clearinterval(timer );}//当鼠标离开整个容器时，它会继续播放，直到下一次换行。onmouseout=function(){ timer=set interval(autoplay，2000)；}//遍历所有数字导航切换到对应图片为(var I=0；一、清单.长度；i ) { list[i]。onmouseover=function(){ clearInterval(计时器)；index=this . innertext-1；changePic(索引)；};};函数autoPlay(){ if(index=pic . length)index=0；changePic(索引)；}//定义画面切换功能函数change pic(curindex){ for(var I=0；长度；I){ pic[I]. style . display=' none '；清单[i]。className=} pic[Curindex]. style . display=' block '；列表[curIndex]。类名=' on} };/script/head body div class=' wrap ' id=' wrap ' ul id=' pic ' liimg src=' http :1 . jpg ' alt=' '/Li liimg src=' http :2 . jpg ' alt=' '/Li liimg src=' http :3 . jpg ' alt=' '/Li liimg src=' http :4 . jpg ' alt=' '/Li liimg src=' http 33366 '

这就是本文的全部内容，为大家分享js图片轮播效果的代码，希望大家喜欢，根据自己的喜好更换图片，做出自己的图片轮播效果。