新手求教百度这个效果怎么做

百度视屏首页，那个点击左右按钮，轮换图片效果

解决方案 »

  1.   

    http://workshop.rs/demo/gallery-in-4-lines/
      

  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" />
    <link href="http://localhost:8080/uniWebapp1/admin/css/style.css" rel="stylesheet" type="text/css" />
    <title>我的APP</title>
    <!--   引入jQuery -->
    <script src="http://localhost:8080/uniWebapp1/admin/js/jquery-1.4.4.min.js"></script>
    <script src="http://localhost:8080/uniWebapp1/admin/js/slides.min.jquery.js"></script>
    <script src="http://localhost:8080/uniWebapp1/admin/js/validate.js"></script>
    <link rel="stylesheet" href="http://localhost:8080/uniWebapp1/admin/colorbox/colorbox.css" />
    <script src="http://localhost:8080/uniWebapp1/admin/colorbox/jquery.colorbox.min.js"></script>
    <script type="text/javascript" > 

    //<![CDATA[
    $(function(){
        var $div_li =$("div.tab_menu ul li");
        $div_li.click(function(){
    $(this).addClass("selected")            //当前<li>元素高亮
       .siblings().removeClass("selected");  //去掉其它同辈<li>元素的高亮
                var index =  $div_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。
    $("div.tab_box > div")    //选取子节点。不选取子节点的话，会引起错误。如果里面还有div 
    .eq(index).show()   //显示 <li>元素对应的<div>元素
    .siblings().hide(); //隐藏其它几个同辈的<div>元素
    }).hover(function(){
    $(this).addClass("hover");
    },function(){
    $(this).removeClass("hover");
    })
    })
    </script>
    </head>
    <body>
    <!-- top -->
    <!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" />
    <link href="http://localhost:8080/uniWebapp1//admin/css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <!-- top end -->
    <!-- box -->
    <div id="box">
      <div id="main_container">
        <div id="main_content">
          <div id="top_menu">
            <div class="tab_menu">
              <ul>
                <li class="selected">我的APP</li>
                <li>我的账户</li>
              </ul>
            </div>
           <div class="clear"></div>
          </div>
          <div class="tab_box">
            <div>
    显示div1
            </div>
            <div class="hide">
             显示div2
            </div>
          </div>
        </div>
        <div class="copyright"> 1 </div>
      </div>
    </div>
    <!-- box end -->
    </body>
    </html>
    关键是 
    <script type="text/javascript" > 

    //<![CDATA[
    $(function(){
        var $div_li =$("div.tab_menu ul li");
        $div_li.click(function(){
    $(this).addClass("selected")            //当前<li>元素高亮
       .siblings().removeClass("selected");  //去掉其它同辈<li>元素的高亮
                var index =  $div_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。
    $("div.tab_box > div")    //选取子节点。不选取子节点的话，会引起错误。如果里面还有div 
    .eq(index).show()   //显示 <li>元素对应的<div>元素
    .siblings().hide(); //隐藏其它几个同辈的<div>元素
    }).hover(function(){
    $(this).addClass("hover");
    },function(){
    $(this).removeClass("hover");
    })
    })
    </script>
    这里 ！  当点击li是  下面对应的div就会显示或影藏！
      

  3.   

    http://www.iiwnet.com/js_texiao/784.html