JS类似与焦点图的代码，大师们帮我看一下，急用

Question

js高手帮我看一下这个代码，要实现自动换焦点，同时1，2，3，4的所在的div样式变化，换焦之后返回原来的样式
function first(){
var body = document.body;
//alert(body);
body.style.backgroundColor = "#ccc";
var wrap = document.getElementById("wrap");
wrap.style.backgroundImage = "url(../images/logo.png)";
wrap.style.backgroundRepeat = "no-repeat";
wrap.style.backgroundPosition = "center top";
var one = document.getElementById("one");
one.style.backgroundColor = "#ffffff";
one.style.border = "1px solid red";
//setInterval("second()",8000);
}
function second(){
var body = document.body;
body.style.backgroundColor = "#a99b65";
var wrap = document.getElementById("wrap");
wrap.style.backgroundImage = "url(../images/yong.jpg)";
wrap.style.backgroundRepeat = "no-repeat";
wrap.style.backgroundPosition = "center top";
var two = document.getElementById("two");
two.style.backgroundColor = "#ffffff";
two.style.border = "1px solid red";
//setInterval("third()",8000);
}
function third(){
var body = document.body;
body.style.backgroundColor = "#93d8e3";
var wrap = document.getElementById("wrap");
wrap.style.backgroundImage = "url(../images/logo.png)";
wrap.style.backgroundRepeat = "no-repeat";
wrap.style.backgroundPosition = "center top";
//setInterval("fourth()",8000);
}
function fourth(){
var body = document.body;
body.style.backgroundColor = "#e38666";
var wrap = document.getElementById("wrap");
wrap.style.backgroundImage = "url(../images/yong.jpg)";
wrap.style.backgroundRepeat = "no-repeat";
wrap.style.backgroundPosition = "center top";
//setInterval("first()",8000);
}
<div id="wrap">
<div id="myfocus" style="text-align:center;">
<div id="focu">
<ul class="number">
<li><div id="one" onclick='first()' style="border:1px solid #000; background-color:#666666; width:20px; height:20px; margin-right:5px;"><a href="#">1</a></div></li>
<li><div id="two" onclick='second()' style="border:1px solid #000; background-color:#666666; width:20px; height:20px; margin-right:5px;"><a href="#">2</a></div></li>
<li><div id="three" onclick='third()' style="border:1px solid #000; background-color:#666666; width:20px; height:20px; margin-right:5px;"><a href="#">3</a></div></li>
<li><div id="four" onclick='fourth()' style="border:1px solid #000; background-color:#666666; width:20px; height:20px;"><a href="#">4</a></div></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>

Answer 1

这个需要点击才能触发应该写个方法让页面加载时就加载first()这个方法。。应该就能实现吧。

Answer 2

这个可以实现但是实现自动换焦点，同时1，2，3，4的所在的div样式变化，换焦之后返回原来的样式不能

Answer 3

 function second() {
            var one = document.getElementById("one");
            one.style.backgroundColor = "#666666";
            one.style.border = "1px solid #000";
            var body = document.body;
            body.style.backgroundColor = "#a99b65";
            var wrap = document.getElementById("wrap");
            wrap.style.backgroundImage = "url(../images/yong.jpg)";
            wrap.style.backgroundRepeat = "no-repeat";
            wrap.style.backgroundPosition = "center top";
            var two = document.getElementById("two");
            two.style.backgroundColor = "#ffffff";
            two.style.border = "1px solid red";
            setInterval("third()",1000);
        }你把second()里面的换成这个试试。。

Answer 4

 function second() {
            var one = document.getElementById("one");
            one.style.backgroundColor = "#666666";
            one.style.border = "1px solid #000";
            var body = document.body;
            body.style.backgroundColor = "#a99b65";
            var wrap = document.getElementById("wrap");
            wrap.style.backgroundImage = "url(../images/yong.jpg)";
            wrap.style.backgroundRepeat = "no-repeat";
            wrap.style.backgroundPosition = "center top";
            var two = document.getElementById("two");
            two.style.backgroundColor = "#ffffff";
            two.style.border = "1px solid red";
            setInterval("third()",1000);
        }

Answer 5

换这种吧
$(function(){
$('.one').click(function(){
one_length = $('.one').length;
for(i=0;i<one_length;i++)
{
if($('.one').eq(i).attr('id')!=$(this).attr('id'))
{
$('.one').eq(i).css('background-color','#666666')
   .css('border','1px solid #000')
       .css('width','20px')
   .css('height','20px');
}else{
$('.one').eq(i).css('background-color','#fff')
   .css('border','1px solid red')
       .css('width','20px')
   .css('height','20px');
var focus = $('.one').eq(i).attr('name');
}
}
   $.post('ajax.php',{focus:focus,tyaa:'true'},function(data){
   var str= new Array(); 
   str=data.split(","); 
   //str[0]为焦点图，str[1]为body的背景图，str[2]为按钮图片，str[3]为按钮链接，str[4]为left，str[5]为top
   var url = "http://r8.3gpp.net.cn/images_www/tmp";
   var wrap = document.getElementById("wrap");
   var body = document.body;
   var focusurl = url+"/"+str[0];
   wrap.style.backgroundImage = "url("+focusurl+")";  //div的背景图
   wrap.style.backgroundRepeat = "no-repeat";
   wrap.style.backgroundPosition = "center top";
   var bgimage = url+"/"+str[1];
   body.style.backgroundImage = "url("+bgimage+")";   //body背景图
   var button = document.getElementById("button");
   var buttonimage = url+"/"+str[2];
   var left = str[4]
   var top = str[5];
   var a = str[3];
   button.style.display = "";
   button.style.left = left+'px';
   button.style.top = top+'px';
   button.innerHTML = "<a href='"+a+"'><img src='"+buttonimage+"' /></a>";   //按钮
   })
})
})html<ul class="number">
<li>
<div class="one" id='=0' name='1'
style="border: 1px solid #000; background-color: #666666; width: 20px; height: 20px; margin-right: 5px;"><a
href="#">1</a></div>
</li>
<li>
<div class="one" id='=1' name='2'
style="border: 1px solid #000; background-color: #666666; width: 20px; height: 20px; margin-right: 5px;"><a
href="#">2</a></div>
</li>
<li>
<div class="one" id='=2' name='3'
style="border: 1px solid #000; background-color: #666666; width: 20px; height: 20px; margin-right: 5px;"><a
href="#">3</a></div>
</li>
<li>
<div class="one" id='=3' name='4'
style="border: 1px solid #000; background-color: #666666; width: 20px; height: 20px;"><a
href="#">4</a></div>
</li>
</ul>
这种没有自动的，要重新写