请问哪位大侠可以帮忙在我的代码上加上一个定时器,让图片自动切换，代码如下：
<!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>无标题文档</title>
<style type="text/css">
body{font-size:12px;font-family:"宋体";background:#fff;color:#999;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p{padding:0; margin:0;}
table{border-spacing:0; border-collapse:collapse;}
img{border:none;}
ul,li{list-style-type:none;}
a{text-decoration:none;}
a:hover {text-decoration:underline;}.dis{ display:none;}
.dis_block{ display:block;}
.ul2 li{ background:#CCC; float:left; width:245px; height:30px; line-height:30px; border:#CCC 1px solid; cursor:pointer; color:#fff;}
.ul2 li span{ float:left; display:inline; margin-left:5px; height:30px; line-height:30px;}
.ul2 li span img{ margin-top:4px; width:20px; height:20px;}
.apl{ margin-top:-30px; width:245px; height:30px; background:#000; filter:alpha(opacity=40); -moz-opacity:0.4; opacity:0.4;}
.apl_dis{ display:none; margin-top:-30px; width:245px; height:30px; background:#000; filter:alpha(opacity=60); -moz-opacity:0.6; opacity: 0.6;}
.clear{ clear:both;}
</style>
<script>
function on(div,id){
var a = document.getElementById("ul2").getElementsByTagName("div");
for(i=0;i<a.length;i++){
a.item(i).className = "apl";
var b = document.getElementById("ul1").getElementsByTagName("li");
for(j=0;j<b.length;j++){
b.item(j).className = "dis";
document.getElementById(id).className = "dis_block";
}
}
div.className = "apl_dis";
}
</script>
</head><body>
<div>
<ul id="ul1">
<li id="li_1" class="dis_block"><img src="img/a.jpg" /></li>
<li id="li_2" class="dis"><img src="img/b.jpg" /></li>
<li id="li_3" class="dis"><img src="img/c.jpg" /></li>
</ul>
<ul id="ul2" class="ul2">
<li>
<span><img src="img/a.jpg" /></span>
<span>面是京东方炼金术了1111</span>
<p class="clear"></p>
<div class="apl_dis" id="div1" onmouseover="on(this,'li_1')"></div>
</li>
<li>
<span><img src="img/b.jpg" /></span>
<span>面是京东方炼金术了2222</span>
<p class="clear"></p>
<div class="apl" id="div2" onmouseover="on(this,'li_2')"></div>
</li>
<li>
<span><img src="img/c.jpg" /></span>
<span>面是京东方炼金术了3333</span>
<p class="clear"></p>
<div class="apl" id="div3" onmouseover="on(this,'li_3')"></div>
</li>
</ul>
</div>
</body>
</html>
<!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>无标题文档</title>
<style type="text/css">
body{font-size:12px;font-family:"宋体";background:#fff;color:#999;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p{padding:0; margin:0;}
table{border-spacing:0; border-collapse:collapse;}
img{border:none;}
ul,li{list-style-type:none;}
a{text-decoration:none;}
a:hover {text-decoration:underline;}.dis{ display:none;}
.dis_block{ display:block;}
.ul2 li{ background:#CCC; float:left; width:245px; height:30px; line-height:30px; border:#CCC 1px solid; cursor:pointer; color:#fff;}
.ul2 li span{ float:left; display:inline; margin-left:5px; height:30px; line-height:30px;}
.ul2 li span img{ margin-top:4px; width:20px; height:20px;}
.apl{ margin-top:-30px; width:245px; height:30px; background:#000; filter:alpha(opacity=40); -moz-opacity:0.4; opacity:0.4;}
.apl_dis{ display:none; margin-top:-30px; width:245px; height:30px; background:#000; filter:alpha(opacity=60); -moz-opacity:0.6; opacity: 0.6;}
.clear{ clear:both;}
</style>
<script>
function on(div,id){
var a = document.getElementById("ul2").getElementsByTagName("div");
for(i=0;i<a.length;i++){
a.item(i).className = "apl";
var b = document.getElementById("ul1").getElementsByTagName("li");
for(j=0;j<b.length;j++){
b.item(j).className = "dis";
document.getElementById(id).className = "dis_block";
}
}
div.className = "apl_dis";
}
</script>
</head><body>
<div>
<ul id="ul1">
<li id="li_1" class="dis_block"><img src="img/a.jpg" /></li>
<li id="li_2" class="dis"><img src="img/b.jpg" /></li>
<li id="li_3" class="dis"><img src="img/c.jpg" /></li>
</ul>
<ul id="ul2" class="ul2">
<li>
<span><img src="img/a.jpg" /></span>
<span>面是京东方炼金术了1111</span>
<p class="clear"></p>
<div class="apl_dis" id="div1" onmouseover="on(this,'li_1')"></div>
</li>
<li>
<span><img src="img/b.jpg" /></span>
<span>面是京东方炼金术了2222</span>
<p class="clear"></p>
<div class="apl" id="div2" onmouseover="on(this,'li_2')"></div>
</li>
<li>
<span><img src="img/c.jpg" /></span>
<span>面是京东方炼金术了3333</span>
<p class="clear"></p>
<div class="apl" id="div3" onmouseover="on(this,'li_3')"></div>
</li>
</ul>
</div>
</body>
</html>
<!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=gb2312" />
<title>测试</title>
<style type="text/css">
#focus_box{ width:530px; height:180px; position:relative; margin:0 auto; overflow:hidden;}
#focus_box ul{ list-style:none; padding:0; margin:0;}
#focus_btn{ position:absolute; right:5px; bottom:5px; z-index:2;}
ul#focus_pic{ position:absolute; top:-180px;}
ul#focus_pic li{ height:180px; width:530px; margin:0; padding:0; background:#ccc;}
ul#focus_btn li{ float:left; font-size:12px; width:25px; height:25px; line-height:25px; font-weight:bold; text-align:center; background:#fff; color:#000; margin-right:2px; cursor:pointer;}
ul#focus_btn li.on{ background:#f60; color:#fff;}
</style>
</head>
<body onload="loop()">
<div id="focus_box" >
<ul id="focus_pic" style="left:0px; top:0px;">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
<li> 6 </li>
</ul>
<ul id="focus_btn">
<li class="">1</li>
<li class="">2</li>
<li class="">3</li>
<li class="">4</li>
<li class="">5</li>
<li class="">6</li>
</ul>
</div>
<script type="text/javascript">
function loop(){
var ul = document.getElementById("focus_pic");
var li = ul.getElementsByTagName("li");
var num = li.length;
var height = -((num-1)*180);
//ul.style.top = 0 + "px";
//alert(width);
move = function(){
if ( parseInt(ul.style.top) == height ){
ul.style.top = 0 + "px";
} else {
var j = parseInt(ul.style.top);
var k = j - 180;
ul.style.top = k + "px";
}
}
setInterval(move,1000);
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body
{
font-size: 12px;
font-family: "宋体";
background: #fff;
color: #999;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p
{
padding: 0;
margin: 0;
}
table
{
border-spacing: 0;
border-collapse: collapse;
}
img
{
border: none;
}
ul, li
{
list-style-type: none;
}
a
{
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
.dis
{
display: none;
}
.dis_block
{
display: block;
}
.ul2 li
{
background: #CCC;
float: left;
width: 245px;
height: 30px;
line-height: 30px;
border: #CCC 1px solid;
cursor: pointer;
color: #fff;
}
.ul2 li span
{
float: left;
display: inline;
margin-left: 5px;
height: 30px;
line-height: 30px;
}
.ul2 li span img
{
margin-top: 4px;
width: 20px;
height: 20px;
}
.apl
{
margin-top: -30px;
width: 245px;
height: 30px;
background: #000;
filter: alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 0.4;
}
.apl_dis
{
display: none;
margin-top: -30px;
width: 245px;
height: 30px;
background: #000;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
.clear
{
clear: both;
}
</style>
</head>
<body>
<div>
<ul id="ul1">
<li id="li_1" class="dis_block">
<img src="../Image/png-0001.png" /></li>
<li id="li_2" class="dis">
<img src="../Image/png-0002.png" /></li>
<li id="li_3" class="dis">
<img src="../Image/png-0003.png" /></li>
</ul>
<ul id="ul2" class="ul2">
<li><span>
<img src="../Image/png-0001.png" /></span> <span>面是京东方炼金术了1111</span>
<p class="clear">
</p>
<div class="apl_dis" id="div1" onmouseover="on(this,'li_1')">
</div>
</li>
<li><span>
<img src="../Image/png-0002.png" /></span> <span>面是京东方炼金术了2222</span>
<p class="clear">
</p>
<div class="apl" id="div2" onmouseover="on(this,'li_2')">
</div>
</li>
<li><span>
<img src="../Image/png-0003.png" /></span> <span>面是京东方炼金术了3333</span>
<p class="clear">
</p>
<div class="apl" id="div3" onmouseover="on(this,'li_3')">
</div>
</li>
</ul>
</div>
<script type="text/javascript">
var count = document.getElementById("ul2").getElementsByTagName("div").length;
var current = 1;
function on() {
current++;
if (current == count + 1) {
current = 1;
}
var a = document.getElementById("ul2").getElementsByTagName("div");
var b = document.getElementById("ul1").getElementsByTagName("li");
for (i = 0; i < count; i++) {
a.item(i).className = "apl";
b.item(i).className = "dis";
}
document.getElementById("li_" + current).className = "dis_block";
document.getElementById("div" + current).className = "apl_dis";
}
setInterval('on()', 1000);
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body
{
font-size: 12px;
font-family: "宋体";
background: #fff;
color: #999;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p
{
padding: 0;
margin: 0;
}
table
{
border-spacing: 0;
border-collapse: collapse;
}
img
{
border: none;
}
ul, li
{
list-style-type: none;
}
a
{
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
.dis
{
display: none;
}
.dis_block
{
display: block;
}
.ul2 li
{
background: #CCC;
float: left;
width: 245px;
height: 30px;
line-height: 30px;
border: #CCC 1px solid;
cursor: pointer;
color: #fff;
}
.ul2 li span
{
float: left;
display: inline;
margin-left: 5px;
height: 30px;
line-height: 30px;
}
.ul2 li span img
{
margin-top: 4px;
width: 20px;
height: 20px;
}
.apl
{
margin-top: -30px;
width: 245px;
height: 30px;
background: #000;
filter: alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 0.4;
}
.apl_dis
{
display: none;
margin-top: -30px;
width: 245px;
height: 30px;
background: #000;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
.clear
{
clear: both;
}
</style>
</head>
<body>
<div>
<ul id="ul1">
<li id="li_1" class="dis_block">
<img src="../Image/png-0001.png" /></li>
<li id="li_2" class="dis">
<img src="../Image/png-0002.png" /></li>
<li id="li_3" class="dis">
<img src="../Image/png-0003.png" /></li>
</ul>
<ul id="ul2" class="ul2">
<li><span>
<img src="../Image/png-0001.png" /></span> <span>面是京东方炼金术了1111</span>
<p class="clear">
</p>
<div class="apl_dis" id="div1" onmouseover="on(this,'li_1')">
</div>
</li>
<li><span>
<img src="../Image/png-0002.png" /></span> <span>面是京东方炼金术了2222</span>
<p class="clear">
</p>
<div class="apl" id="div2" onmouseover="on(this,'li_2')">
</div>
</li>
<li><span>
<img src="../Image/png-0003.png" /></span> <span>面是京东方炼金术了3333</span>
<p class="clear">
</p>
<div class="apl" id="div3" onmouseover="on(this,'li_3')">
</div>
</li>
</ul>
</div>
<script type="text/javascript">
var count = document.getElementById("ul2").getElementsByTagName("div").length;
var current = 1;
function on() { current++;
if (current == count + 1) {
current = 1;
}
var a = document.getElementById("ul2").getElementsByTagName("div");
var b = document.getElementById("ul1").getElementsByTagName("li");
for (i = 0; i < count; i++) {
a.item(i).className = "apl";
b.item(i).className = "dis";
}
if (arguments.length > 0) {
arguments[0].className = "apl_dis";
document.getElementById(arguments[1]).className = "dis_block"; } else {
document.getElementById("li_" + current).className = "dis_block";
document.getElementById("div" + current).className = "apl_dis";
}
}
setInterval('on()', 1000);
</script>
</body>
</html>