好资源导航 » 文章资讯 » JS图片轮播与索引变色功能实例详解

JS图片轮播与索引变色功能实例详解

2024-02-16 20:27:03 222

废话不多说了，直接给大家贴代码了，具体代码如下所示：





无标题文档

#tupian{width:290px;height:160px;border:#0F9solid1px}
.tp{width:220px;height:160px;float:left}
.li{margin-top:10px;list-style:none;border:#00Fsolid1px;width:20px;}

1 2 3 4

varaaaa=document.getElementsByClassName("tp") varbbb=document.getElementsByClassName("li") varindex=0; lunbo(); functionlunbo(){ xianshi(); if(indexfunctionxz(n){ varb=document.getElementsByClassName("li") for(vari=0;i

1、js图片轮播首先要先获取所有图片的对象，用数组接受，然后定义一个变量作为数组的索引。

2、让图片显示（先让所有的图片隐藏，再让当前图片显示），索引自增1。注意：在写定时器的时候可以写延时的也可以写间歇的。在这里我写间歇的。

3、鼠标放在图片上停止轮播，这里我们可以清除定时器window.clearInterval(a)；鼠标离开图片轮播继续再重新启动定时器a=window.setInterval("lunbo()",1000)，这里注意要给定时器定义一个值，因为清除定时器要用。

4、鼠标放上，图片与相对应的li的值得索引显示出来，让获取的数列的值赋给数组的索引（index=m.innerHTML-1），因为m.innerhtml获取的时数列li的值，比数组的索引大1，所以应该减去1；

以上所述是小编给大家介绍的JS图片轮播与索引变色功能实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

JS图片轮播与索引变色功能实例详解

热门推荐

随机推荐