JavaScript 实例：不同图片滚动显示_javascript显示不同图片-优快云博客

本文链接：https://blog.youkuaiyun.com/houyanhua1/article/details/78483472

<!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.οnlοad=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" οnmοuseοver="photoStop()" οnmοuseοut="init()" />
  <ul>
	<li id="li1" οnmοuseοver="mouseStop(1,this)" οnmοuseοut="init()">1</li>
	<li id="li2" οnmοuseοver="mouseStop(2,this)" οnmοuseοut="init()">2</li>
	<li id="li3" οnmοuseοver="mouseStop(3,this)" οnmοuseοut="init()">3</li>
	<li id="li4" οnmοuseοver="mouseStop(4,this)" οnmοuseοut="init()">4</li>
	<li id="li5" οnmοuseοver="mouseStop(5,this)" οnmοuseοut="init()">5</li>
	<li id="li6" οnmοuseοver="mouseStop(6,this)" οnmοuseοut="init()">6</li>
  </ul>
  </div>
 </BODY>
</HTML>