您的位置：首页 > Web前端 > HTML

HTML自动播放的图片，点击更换

2013-07-14 16:37 302 查看

代码如下：（取三张图片，分别取名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.onload= setInterval("show();",2000);

</script>

</HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html 自动播放图片

相关文章推荐

新的分享

章节导航