代码如下:(取三张图片,分别取名1.jpg,2.jpg,3.jpg)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 切换图片 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css" >
div,ul,li{
border:0px;margin:0px 0px; padding:0px;0px;
}
#container{
margin:0 atuo;
background-color:yellow;
width:400px;
height:200px;
}
#pb{
background-color:pink;
width:200px;
height:200px;
}
#haha{
width:200px;
text-align:center;
}
.choice{
background-color:green;
float:left;
margin: 5px 10px;
width:20px;
}
.choosen{
background-color:pink;
float:left;
margin: 5px 10px;
width:20px;
}
</style>
</HEAD >
<BODY style="text-align:center">
<div id="container">
<div id="pb"><a><img id="myImg" src="1.jpg"></a></div>
<ul id="haha">
<li class="choice" id="img1" onMouseOver="javascript: show(parseInt(this.innerHTML))" onMouseOut="out();">1</li>
<li class="choice" id="img2" onMouseOver="javascript: show(parseInt(this.innerHTML))" onMouseOut="out();">2</li>
<li class="choice" id="img3" onMouseOver="javascript: show(parseInt(this.innerHTML))" onMouseOut="out();">3</li>
<div style="float:none"><div>
</ul>
</div>
</BODY>
<script type="text/javascript">
function $(obj){
return document.getElementById(obj);
}
//启动网页,初始播放第一张图片
var currentImg=1;
//总共有三张图片需要播放
var maxImg=3;
//没2000毫秒播放一张图片
var yaya =setInterval("show()",2000);
// 根据传入的数值,判断播放哪一张图片
function show(num){
//判断是否传入的是一个数值(当点击li中内容时候,传入的是数值;否则没有点击Li时候,没有传入数值,判断条件为false)
if(Number(num)){
//清除定时器
clearTimeout(yaya);
//将当前要播放的图片设置为点击li所要表达的图片,例如如果点击id="img2"的,currentImg=2;
currentImg=num;
}
//currentImg代表的图片显示,其他的不显示
for(var i=1;i<=maxImg;i++){
if (currentImg==i)
{
var name="img"+i;
$("myImg").src=""+i+".jpg";
$(name).className="choosen";
}else{
var name="img"+i;
$(name).className="choice";
}
}
//如果当前播放时最后一张图片,currentImg改为第一张
if(currentImg==maxImg){
currentImg=1;
}
else{
currentImg++;
}
}
//光标离开li后,恢复计时器
function out(){
clearTimeout(yaya);
yaya=setInterval("show();",2000);
}
//window.οnlοad= setInterval("show();",2000);
</script>
</HTML>