js实现图片轮播学习笔记的效果

这个例子分享了js实现图片轮播效果的具体代码，供大家参考。具体内容如下

具体想法：

1.页面加载，获取整个容器，数字索引的所有li和图片列表的ul，定义定时器的变量，并存储当前索引的变量索引

第二，增加一个定时器，每2秒增加一次索引，调用一次switch picture函数

提示：

1.索引不能无限递增，需要判断。2.调用switch picture函数时，递增的索引应该作为参数传递

第三，定义画面切换功能

提示：

1.用数字索引遍历所有li，并删除每个li上的类。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(){ clear interval(计时器)；}//当鼠标离开整个容器时，继续播放直到下一次换行。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 '

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