<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<title>Image play</title>
<style>
body{
width:430px;
margin:20px auto;
}
p.now{
display:block;
width:400px;
height:200px;
overflow:hidden;
border:1px solid #ccc; }
li.now{
color:#ccc; }
li{ list-style:none; float:left;
padding:0 10px;
margin-bottom:5px;
border:1px solid #ccc;
background:#eee; } #fd{
list-style:none; float:left;
padding:0 10px;
border:1px solid #ccc;
margin:0 auto;
background:#eee; }
img{
width:400px;
height:200px;
padding:1px; /*padding-top:18px;*/
} </style>
</head>
<body>
<p id="fd">
<p class="now"><img src="./images/pic1.jpg"></p>
<p style="display:none;"><img src="./images/pic2.jpg"></p>
<p style="display:none;"><img src="./images/pic3.jpg"></p>
<p style="display:none;"><img src="./images/pic4.jpg"></p>
<ul>
<li class="now">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</p>
<script> var tags=$("fd").getElementsByTagName("li"); // 获取切换按钮节点
var cats=$("fd").getElementsByTagName("p"); // 获取切换内容节点
var current; // 高置当前帧的变量宣容器
var timer=2000; // 设置2秒循环一次
function disAll(){ for(var i=0; i<tags.length; i++){
tags.className="";
cats.className="";
cats.style.display="none";
}
} function setNow(){ for(var i=0; i<tags.length; i++){ if(tags.className=="now"){ current=i;
}
}
} for(var j=0; j<tags.length; j++){
tags[j].onmouseover=function(){
clearInterval(h);
disAll();
this.className="now";
setNow();
cats[current].style.display="block";
cats[current].className="now";
}
tags[j].onmouseout=function(){
setNow();
h=setInterval("goNext()", 3000);
}
} function goNext(){
setNow(); current+=1; if(current>=parseInt(tags.length)){ current=0;
disAll();
cats[0].style.display="block";
tags[0].className="now";
cats[0].className="now";
}else{
disAll();
cats[current].style.display="block";
cats[current].className="now";
tags[current].className="now";
}
} var h=setInterval("goNext()", timer); function $(obj){ return document.getElementById(obj);
}</script>
</body>
</html> | 
发表于 2020-4-29 13:30
QQ好友和群
收藏
