首页 > 代码库 > js图片轮播与索引变色
js图片轮播与索引变色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">#tupian{ width:290px; height:160px; border:#0F9 solid 1px}.tp{ width:220px; height:160px; float:left}.li{ margin-top:10px;list-style:none; border:#00F solid 1px; width:20px;}</style></head><body> <div id="tupian"> <div class="tp" onm ouseover="sbfs()" onm ouseout="jixu()"><img src="http://www.mamicode.com/项目素材/图片/84372.jpg" /></div> <div class="tp" onm ouseover="sbfs()" onm ouseout="jixu()" style="display:none" ><img src="http://www.mamicode.com/项目素材/图片/84610.jpg" /></div> <div class="tp" onm ouseover="sbfs()" onm ouseout="jixu()" style="display:none"><img src="file:///C|/Users/gaofangquan/Desktop/项目素材/图片/84246.jpg" /></div> <div class="tp" onm ouseover="sbfs()" onm ouseout="jixu()" style="display:none"><img src="http://www.mamicode.com/项目素材/图片/84639 (1).jpg" /></div> <div id="xuanxiang" style="float:right; "> <ul> <li class="li" onm ouseover="xz(this),xuanzhong(this)" onm ouseout="shuzilikai()">1</li> <li class="li" onm ouseover="xz(this),xuanzhong(this)" onm ouseout="shuzilikai()">2</li> <li class="li" onm ouseover="xz(this),xuanzhong(this)" onm ouseout="shuzilikai()">3</li> <li class="li" onm ouseover="xz(this),xuanzhong(this)" onm ouseout="shuzilikai()">4</li> </ul> </div> </div> </body><script type="text/jscript">var aaaa=document.getElementsByClassName("tp")var bbb=document.getElementsByClassName("li")var index=0;lunbo();function lunbo(){ xianshi(); if( index<aaaa.length-1){ index++;} else{index=0;}} var a=window.setInterval("lunbo()",1000) //图片与数列的背景同时变化 function xianshi(){ for( var i=0;i<aaaa.length;i++){ aaaa[i].style.display="none" bbb[i].style.backgroundColor="white"} aaaa[index].style.display="block" bbb[index].style.backgroundColor="red"} //鼠标放在数列上背景变色
function xz(n){ var b=document.getElementsByClassName("li") for( var i=0; i<b.length; i++){ b[i].style.backgroundColor="white"} n.style.backgroundColor="red"} //当鼠标放到图片上的时候，图片停止轮播function sbfs(){ window.clearInterval(a)} //当鼠标离开图片的时候，轮播继续 function jixu(){ a=window.setInterval("lunbo()",1000);} //鼠标放上，图片与相对应的li的值得索引显示出来 function xuanzhong(m){ var ccc=document.getElementsByClassName("tp") index=m.innerHTML-1;// 因为m.innerhtml 获取的时数列li的值，比ccc的索引大1，所以应该减去1； //把获取的值赋给index是因为如果重新定义一个变量的话，当鼠标离开li的时候，图片轮播的索引很乱， for( var i=0;i<ccc.length;i++){ ccc[i].style.display="none"} ccc[index].style.display="block" window.clearInterval(a)} //鼠标离开让图片自动切换 function shuzilikai(){ a=window.setInterval("lunbo()",1000)}</script></html>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图片轮播与索引变色
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。