怎么实现这个网页效果，如图。

people_nearby 2017-12-24 02:10:09

左边6张图变换的时候让右边对应的li显示一个background-color，怎么实现？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

<style type="text/css">

div{

	width:530px;

	height:180px;

}

ul{

	float:right;

	margin:0px;

	padding:0px;

	position:relative;

	left:-5px;

	top:36px;	

}

ul li{

	width:20px;

	height:20px;

	text-align:center;

	line-height:20px;

	list-style:none;

	border:black solid 1px;

	margin-top:2px;	

}

li:hover{background-color:orange;}



</style>

<script type="text/javascript">

	var i=1;

	var dingshiqi;

	window.onload=init;

	function init(){

		dingshiqi=window.setInterval("pic()",1000);

	}

	function pic(){

		i++;

		if(i>6){

			i=1;

		}

		var obj=document.getElementById("d1");

		obj.src="images/dd_scroll_"+i+".jpg";

		

	}

	function stop(){

		window.clearInterval(dingshiqi);	

	}

	function start(){

		dingshiqi=window.setInterval("pic()",1000);

	}

	function fn(n){

		i=n;

		var obj=document.getElementById("d1");

		obj.src="images/dd_scroll_"+n+".jpg";

		window.clearInterval(dingshiqi);

	}

	function fn2(){

		dingshiqi=window.setInterval("pic()",1000);

	}

</script>

</head>



<body>

	<div>

		<img id="d1" src="images/dd_scroll_1.jpg" onmouseover="stop()" onmouseout="start()">

		<ul>

			<li id="li1" onmouseover="fn(1)" onmouseout="fn2()">1</li>

			<li id="li2" onmouseover="fn(2)" onmouseout="fn2()">2</li>

			<li id="li3" onmouseover="fn(3)" onmouseout="fn2()">3</li>

			<li id="li4" onmouseover="fn(4)" onmouseout="fn2()">4</li>

			<li id="li5" onmouseover="fn(5)" onmouseout="fn2()">5</li>

			<li id="li6" onmouseover="fn(6)" onmouseout="fn2()">6</li>

		</ul>

	</div>

</body>

</html>

...全文

238 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2017-12-24

打赏
举报


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
div{
	width:530px;
	height:180px;
}
ul{
	float:right;
	margin:0px;
	padding:0px;
	position:relative;
	left:-5px;
	top:36px;	
}
ul li{
	width:20px;
	height:20px;
	text-align:center;
	line-height:20px;
	list-style:none;
	border:black solid 1px;
	margin-top:2px;	
}
li:hover{background-color:orange;}
.select{background-color:red;}

</style>
<script type="text/javascript">
	var i=1;
	var dingshiqi;
	window.onload=init;
	function init(){
		dingshiqi=window.setInterval("pic()",1000);
	}
	function pic(){
		document.getElementById("li"+i).className="";
		i++;
		if(i>6){
			i=1;
		}
		var obj=document.getElementById("d1");
		obj.src="images/dd_scroll_"+i+".jpg";
		document.getElementById("li"+i).className="select";
		
	}
	function stop(){
		window.clearInterval(dingshiqi);	
	}
	function start(){
		dingshiqi=window.setInterval("pic()",1000);
	}
	function fn(n){
		document.getElementById("li"+i).className="";
		i=n;
		var obj=document.getElementById("d1");
		obj.src="images/dd_scroll_"+n+".jpg";
		document.getElementById("li"+i).className="select";
		window.clearInterval(dingshiqi);
	}
	function fn2(){
		dingshiqi=window.setInterval("pic()",1000);
	}
</script>
</head>

<body>
	<div>
		<img id="d1" src="images/dd_scroll_1.jpg" onmouseover="stop()" onmouseout="start()">
		<ul>
			<li id="li1" class="select" onmouseover="fn(1)" onmouseout="fn2()">1</li>
			<li id="li2" onmouseover="fn(2)" onmouseout="fn2()">2</li>
			<li id="li3" onmouseover="fn(3)" onmouseout="fn2()">3</li>
			<li id="li4" onmouseover="fn(4)" onmouseout="fn2()">4</li>
			<li id="li5" onmouseover="fn(5)" onmouseout="fn2()">5</li>
			<li id="li6" onmouseover="fn(6)" onmouseout="fn2()">6</li>
		</ul>
	</div>
</body>
</html>