图片轮换
来源：互联网 发布：淘宝怎么看第几名下单 编辑：程序博客网 时间：2024/04/30 17:57
<html><head><meta http-equiv="content-type" content="text/html;charset=utf-8" /></head><script>var arr = Array('one','two','three','four','five');var pic;//图片对象var i = 0;//计数var time;function $(x){return document.getElementById(x);}function $n(x){return document.getElementsByTagName(x);}function picture(){this.time = function(){window.clearInterval(time);time = window.setInterval('pic.display()',1000);//先让图片动起来}this.display = function(){var len = arr.length;i++;if(i>=len){i=0;}$n('img')[0].src = './images/'+arr[i]+'.jpg';this.background_img();}//stopthis.stop = function(){window.clearInterval(time);}//startthis.start = function(){this.time();}//下标this.xiabiao = function(value){var x;//遍历找出value在数组中的下标for(var j=0,len=arr.length;j<len;++j){if(arr[j] == value){x = j;}}return x;}//按钮(value是鼠标碰到图片切换按钮时的值)this.img = function(value){window.clearInterval(time);//找下标(方法)i = this.xiabiao(value);$n('img')[0].src = './images/'+arr[i]+'.jpg';//自动切换按钮背景色cssthis.background_img()}//图片自动切换按钮背景色this.background_img = function(){//alert(i);for(var x=0,len=arr.length;x<len;++x){if(x != i){$(arr[x]).style.background = '';}$(arr[i]).style.background = 'red';}}}//控制器window.onload = function(){pic = new picture();//实例化一个图片类对象pic.time();$n('img')[0].onmouseover = function(){pic.stop();};$n('img')[0].onmouseout = function(){pic.start();};//鼠标离开自动切换按钮区域开始图片转换$('div1').onmouseover = function(){for(var j=0,len=arr.length;j<len;j++){$(arr[j]).onmouseout = function(){pic.start();};}}}</script><style>body{margin:0px;padding:0px;text-align:center;}#xiaomi{width:940px;height:410px;margin:auto;text-align:left;}#div1{width:200px;height:20px;background:blue;float:right;}#one,#two,#three,#four,#five{height:20px;width:20px;background:green;float:left;}.bai{height:20px;width:20px;background:white;float:left;}</style><body><div id="xiaomi"><img src="./images/one.jpg"></img><div id="div1"><div class="bai"></div><div id="one" onmouseover="pic.img('one')"></div><div class="bai"></div><div id="two" onmouseover="pic.img('two')"></div><div class="bai"></div><div id="three" onmouseover="pic.img('three')"></div><div class="bai"></div><div id="four" onmouseover="pic.img('four')"></div><div class="bai"></div><div id="five" onmouseover="pic.img('five')"></div><div></div></body></html>
