JavaScript 实例：不同图片滚动显示

来源：互联网发布：linux cp命令目录编辑：程序博客网时间：2024/05/16 14:37
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML> <HEAD>  <TITLE> New Document </TITLE>  <META name="Generator" content="EditPlus">  <META name="Author" content="">  <META name="Keywords" content="">  <META name="Description" content="">  <style type="text/css">div{width:550px;height:180px;border:1px solid red;overflow:hidden;  /* 相当于清除浮动 */}img{float:left;}ul{list-style:none;margin:8px 8px;padding:0px;  /* ul的list-style设置为无时，必须把padding设置为0，否则前面(左边)有padding。*/float:right;}ul li{margin:4px;height:20px;  /* 必须设置宽高，否则margin不起作用 */width:20px;line-height:20px;text-align:center;border:1px solid gray;}  </style>  <script type="text/javascript">var n=1;var dingshiqi;window.onload=init;//图片开始自动滚动显示function init(){dingshiqi=window.setInterval("photoStart()",1000);var li=document.getElementById("li"+n);li.style.backgroundColor="orange";}//显示不同图片function photoStart(){n++;if(n>=7){n=1;}var img=document.getElementById("img1");img.src="images/dd_scroll_"+n+".jpg";var obj=document.getElementById("li"+n);clearBackgroundcolor();obj.style.backgroundColor="orange";}//图片停止滚动function photoStop(){window.clearInterval(dingshiqi);}//鼠标移动到li列表上，图片停止滚动function mouseStop(num,obj){window.clearInterval(dingshiqi);var img=document.getElementById("img1");img.src="images/dd_scroll_"+num+".jpg";n=num;clearBackgroundcolor()obj.style.backgroundColor="orange";}//清除所有li列表的背景色function clearBackgroundcolor(){for(var i=1;i<=6;i++){var obj=document.getElementById("li"+i);obj.style.backgroundColor="";}}  </script> </HEAD> <BODY>  <div>  <img src="images/dd_scroll_1.jpg" id="img1" onmouseover="photoStop()" onmouseout="init()" />  <ul><li id="li1" onmouseover="mouseStop(1,this)" onmouseout="init()">1</li><li id="li2" onmouseover="mouseStop(2,this)" onmouseout="init()">2</li><li id="li3" onmouseover="mouseStop(3,this)" onmouseout="init()">3</li><li id="li4" onmouseover="mouseStop(4,this)" onmouseout="init()">4</li><li id="li5" onmouseover="mouseStop(5,this)" onmouseout="init()">5</li><li id="li6" onmouseover="mouseStop(6,this)" onmouseout="init()">6</li>  </ul>  </div> </BODY></HTML>
阅读全文
0 0