JavaScript基础——切换图片轮播

来源：互联网发布：淘宝罗技那家店是正品编辑：程序博客网时间：2024/05/21 14:46
 <head>  <meta charset="UTF-8">  <title>Document</title>  <style type="text/css">div{border:1px solid red;width:700px;}div ul{float:right;}ul li{list-style:none;border:1px solid red;width:20px;height:20px;margin-top:2px;margin-right:35px;text-align:center;line-height:22px;}  </style>   <script type="text/javascript">  //页面加载完成之后让图片自动动起来。window.onload=init; //onload 事件会在页面或图像加载完成后立即发生(网页加载完成时，调用init)var i=1;var dingshiqi;function init(){var obj=document.getElementById("li1");obj.style.background="orange";                    //定时器,每秒钟触发image()函数   dingshiqi=window.setInterval("image()",1000);  //setInterval() 方法会不停地调用函数}//让图片自动切换的函数。function image(){i++;if(i>8){i=1;}//获取img对象var obj=document.getElementById("d1");//修改img对象的src属性。obj.src="image"+i+".jpg"//再去修改li标签的背景颜色ys(); var yanse=document.getElementById("li"+i);yanse.style.background="orange";}//鼠标放到图片上停止自动切换的函数。function stopimage(){window.clearInterval(dingshiqi);}//鼠标离开让图片自动切换的函数。function starimage(){dingshiqi=window.setInterval("image()",1000);}//鼠标放在标签上显示对应图片的函数。function tingTu(n,m){i=n;var obj=document.getElementById("d1");obj.src="image"+n+".jpg"//把所有li标签的背景颜色变成白色。ys();window.clearInterval(dingshiqi);m.style.background="orange";}//鼠标离开li标签让图片继续自动切换。function dongTu(){dingshiqi=window.setInterval("image()",1000);}//清除所有标签的颜色(把所有的li标签的背景颜色变成白色)function ys(){for(var j=1;j<=8;j++){var obj1=document.getElementById("li"+j);//li1=>obj1保存的就是id为li1的标签那个obj1.style.background="white";//li2=>obj1保存的就是id为li2的标签对象}}  </script> </head> <body> <div><img src="image1.jpg" height="400" width="600"   id="d1" onmouseover="stopimage()" onmouseout="starimage()">  <ul><li id="li1"onmouseover="tingTu(1,this)" onmouseout="dongTu()">1</li><li id="li2"onmouseover="tingTu(2,this)" onmouseout="dongTu()">2</li><li id="li3"onmouseover="tingTu(3,this)" onmouseout="dongTu()">3</li><li id="li4"onmouseover="tingTu(4,this)" onmouseout="dongTu()">4</li><li id="li5"onmouseover="tingTu(5,this)" onmouseout="dongTu()">5</li><li id="li6"onmouseover="tingTu(6,this)" onmouseout="dongTu()">6</li><li id="li7"onmouseover="tingTu(7,this)" onmouseout="dongTu()">7</li><li id="li8"onmouseover="tingTu(8,this)" onmouseout="dongTu()">8</li>  </ul>  </div> </body></html>
阅读全文
0 0