【JS】幻灯片

来源：互联网发布：java获取response对象编辑：程序博客网时间：2024/04/29 06:50
<!DOCTYPE html><html><head><title>幻灯片</title><style>.div1{height: 520px;width: 950px;border: 1px solid red;}div ul{float: right;}div ul li{margin-top:70px; margin-right:10px; list-style: none;border: 1px solid blue;padding: 4px;width: 12px;cursor: pointer;}</style><script type="text/javascript" language="javascript">window.onload=fn;// 初始化，设置定时器function fn(){var yanse1=document.getElementById("li1");yanse1.style.background="green" hdp_t=window.setInterval("huandengpian()",1000);}var i=1;// 幻灯片播放，播放哪一张就给哪一张的按钮背景色function huandengpian(){i++;var img1=document.getElementById('img1'); if (i>4) {i=1;  }img1.src=i+".jpg";    yanse();    var ys=document.getElementById("li"+i);    ys.style.background="green";   }//启动定时器播放幻灯片function start(){ hdp_t=window.setInterval("huandengpian()",1000);}// function stop(){window.clearInterval(hdp_t);}// 鼠标放在数字上停止相应的图片，并且给背景色function tingtu(n,m){i=n;var obj=document.getElementById("img1");yanse();obj.src=n+".jpg";m.style.background="green"window.clearInterval(hdp_t);}// 清楚颜色function yanse(){for(var j=1;j<=4;j++){var Allobj=document.getElementById("li"+j);Allobj.style.background="white";}}</script></head><body ><div class="div1"> <img src="1.jpg" id="img1" onmouseover="stop()" onmouseout="start()"><ul><li id="li1"  onmouseover="tingtu(1,this)" onmouseout="start()">1</li><li id="li2"  onmouseover="tingtu(2,this)" onmouseout="start()">2</li><li id="li3"  onmouseover="tingtu(3,this)" onmouseout="start()">3</li><li id="li4"  onmouseover="tingtu(4,this)" onmouseout="start()">4</li></ul></div></body></html>
0 0