jquery控制div背景求助

<div id="btn" >
<a>这是按钮一</a>
<a>这是按钮二</a>
<a>这是按钮三</a>
<a>这是按钮四</a>
</div>
<div id="top" class="">
<a></a>
<a></a>
<a></a>
<a></a>
</div> //背景图
CSS代码:
.top1 img =1.jpg
.top2 img =2.jpg
.top3 img =3.jpg
.top4 img =4.jpg做成幻灯请问怎么写代码？
背景自动切换，鼠标移动到按钮1~4也可以显示对应的1~4背景图
按钮通过jq("#login_bigbanner .change>a"）获得元素数量

解决方案 »

  1.   

    不好意思，写错了，应该是
    <div id="btn" >
    <a>这是按钮一</a>
    <a>这是按钮二</a>
    <a>这是按钮三</a>
    <a>这是按钮四</a>
    </div>
    <div id="top" class=""></div> //背景图，通过addclass top1~4切换
    CSS代码:
    .top1 img =1.jpg
    .top2 img =2.jpg
    .top3 img =3.jpg
    .top4 img =4.jpg做成幻灯请问怎么写代码？
    背景自动切换，鼠标移动到按钮1~4也可以显示对应的1~4背景图
    按钮通过jq("#login_bigbanner .change>a"）获得元素数量
      

  2.   


    <!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>
    </head><body>
    <img src="images/jiping (1).jpg" width="600" height="400" id="title" value="1"/>
    <script type="text/javascript">
    var i=1;var y=document.getElementById("title");
    function show(){
    switch(i){
    case 1:
    y.setAttribute("src","images/jiping (1).jpg");
    i++;
    break;
    case 2:
    y.setAttribute("src","images/jiping (2).jpg");
    i++;
    break;
    case 3:
    y.setAttribute("src","images/jiping (3).jpg");
    i++;
    break;
    case 4:
    y.setAttribute("src","images/jiping (4).jpg");
    i++;
    break;
    case 5:
    y.setAttribute("src","images/jiping (5).jpg");
    i++;
    break;
    default:
    i=1;
    break;
    }
    }
    window.setInterval("show()",3000);
    </script>
    </body>
    </html>
      

  3.   

     额 上面那个是自动播放图片
    如果要根据按钮设置图片可以设置按钮的点击或者其他事件 获取按钮的值
    然后给值赋值给i然后在调用下show()这方法就行了
      

  4.   

    用addClass（）  和removeClass（）方法
      

  5.   

    //以下代码实现比较简单，具体实现还需自己调试
    $(document).ready(function(){
      
       //根据a数获取图片数
       var $links = $("#btn > a");     
       var index = 1; //索引计数
       var change = function(){
           if(index==$links.length){
               index = 1;
           }
           $("#top")
               .hide()
               .css("background","url('top"+index+".jpg')")
               .fadeIn();
           index++;
       }
       var timeObj = setInterval(change,2000);
       
       //给每个超链接添加鼠标移上事件
       $links.mouseover(function(){
          clearInterval(timeObj);
          index = $links.index($(this));
          $("#top")
               .hide()
               .css("background","url('top"+index+".jpg')")
               .fadeIn(1000);
      }).mouseout(function(){
          var timeObj = setInterval(change,2000);
      }); 
    });
      

  6.   


    <div id="login_bigbanner">
    <a class="change">这是按钮1</a>
    <a class="change">这是按钮2</a>
    <a class="change">这是按钮3</a>
    <a class="change">这是按钮4</a>
    </div>
    <div>
    <img id="back" src="images/1.jpg" />
    </div>var pic = 1;
    $(function(){
    $("#login_bigbanner .change").mouseover(function(){
    var btns = $("#login_bigbanner .change");
    for(var i=0 ; i<btns.length ; i++)
    {
    if(this == btns[i])
    {
    $("#back").attr("src","images/"+i+".jpg");
    pic = i;
    }
    }
    })
    setInterval("change(pic)",2000);
    })
    function change(){
    $("#back").attr("src","images/"+pic+".jpg");
    pic += 1;
    pic = pic%4;
    }这样把四张图片设为1.jpg 2.jpg....就行了
      

  7.   

    写错一个，setInterval("change(pix)",2000)中的pic去掉
      

  8.   

    最简单的 用定时器实现,,切换 class..