js怎么做像 腾讯网-我的资讯(今日要闻) 导航左右滚动的的特效

   js怎么做像  腾讯网-我的资讯(今日要闻) 导航左右滚动的的特效  能贴出完整个的代码 谢谢

解决方案 »

  1.   

    <!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>
    <script type="text/javascript" src="http://mhzx.wanmei.com/js/s0910.js"></script>
    <style>body {margin:0; padding:0;font-size:0px;color:#1A695D;font-family:"宋体",Arial, Helvetica, sans-serif;}
    div,img,ul,ol,li,p,map,area{margin:0;padding:0;border:0;list-style:none;}
    a {blr:expression(this.onFocus=this.blur());outline:none;}
    area{blr:expression(this.onFocus=this.blur());outline:none;}
    .bann_10 #demo{margin-left:92px; margin-top:90px;}
    #demo {
    overflow:hidden;
    width: 820px;
    height:280px;
    line-height:26px;
    } 
    #indemo {float:left;width:400%;}
    #demo1 {float: left;}
    .left{ float:left;}
    #demo2 {float: left;}
    dl{float:left; margin-right:16px; list-style:none; width:269px;height:280px; }
    dt img{ margin-top:6px; margin-left:5px;width:269px; height:244px; border:1px solid #E4F8BB;}
    dd{ padding-top:260px;*padding-top:10px;text-align:center; width:218px; color:#000; font-size:12px;} </style>
    </head></head><body>

        <!-- 页面主体 -->
    <div id="wrapper">
    <div id="cont">

              <div class="img_box">
                
                    <div class="bann_10">
                     <div id="demo" style="overflow:hidden;"> 
                        <div id="indemo"> 
                         
                        <div id="demo1"> 

                     <dl>
                         <dt><a href="#" target="_blank"><img src="images/pic/pic_01.jpg" alt="11111" title="完美1111111"/></a></dt>
                        </dl>
     
                     <dl>
                         <dt><a href="#" target="_blank"><img src="images/pic/pic_01.jpg" alt="11111" title="完美1111111"/></a></dt>
                        </dl>
                        <dl>
                         <dt><a href="#" target="_blank"><img src="images/pic/pic_01.jpg" alt="11111" title="完美1111111"/></a></dt>
                        </dl>
                        <dl>
                         <dt><a href="#" target="_blank"><img src="images/pic/pic_01.jpg" alt="11111" title="完美1111111"/></a></dt>
                        </dl>
                        <dl>
                         <dt><a href="#" target="_blank"><img src="images/pic/pic_01.jpg" alt="11111" title="完美1111111"/></a></dt>
                        </dl>
                        <dl>
                         <dt><a href="#" target="_blank"><img src="images/pic/pic_01.jpg" alt="11111" title="完美1111111"/></a></dt>
                        </dl>
                        <dl>
                         <dt><a href="#" target="_blank"><img src="images/pic/pic_01.jpg" alt="11111" title="完美1111111"/></a></dt>
                        </dl>
                        <dl>
                         <dt><a href="#" target="_blank"><img src="images/pic/pic_01.jpg" alt="11111" title="完美1111111"/></a></dt>
                        </dl>
                        <dl>
                         <dt><a href="#" target="_blank"><img src="images/pic/pic_01.jpg" alt="11111" title="完美1111111"/></a></dt>
                        </dl>
                        <dl>
                         <dt><a href="#" target="_blank"><img src="images/pic/pic_01.jpg" alt="11111" title="完美1111111"/></a></dt>
                        </dl>
                    </div> 
                    <div id="demo2"></div> 
                    </div> 
                    </div> 
    <script> 
                    <!-- 
                    var speed=10; //数字越大速度越慢 
                    var tab=document.getElementById("demo"); 
                    var tab1=document.getElementById("demo1"); 
                    var tab2=document.getElementById("demo2"); 
                    tab2.innerHTML=tab1.innerHTML; 
                    function aa(){ 
                    if(tab2.offsetWidth-tab.scrollLeft<=0) 
                    tab.scrollLeft-=tab1.offsetWidth; 
                    else{ 
                    tab.scrollLeft++; 
                    } 
                    } 
                    var MyMar=setInterval(aa,speed); 
                    tab.onmouseover=function() {clearInterval(MyMar)}; 
                    tab.onmouseout=function() {MyMar=setInterval(aa,speed)}; 
                    --> 
                    </script>
                    </div>
              </div>
              </div>
              </div>
                
    </body>
    </html>
      

  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" />
    <style>
    .bann_08{background:url(../images/banner_08.jpg) no-repeat; width:730px; height:206px;}
    .bann_08 .bann_left_box{float:left; height:192px; width:54px;}
    .bann_08 .bann_left_box .p_box{padding-left:5px; padding-top:9px;}
    .bann_08 .bann_right_box{float:left; height:192px; width:48px;}
    .bann_08 .bann_right_box .p_box{padding-left:3px; padding-top:9px;}
    .bann_08 .bann_right_box .p_box img{cursor:pointer;}
    .bann_08 .bann_left_box .p_box img{cursor:pointer;}
    .bann_08 .ul_box{width:622px; height:202px; overflow:hidden; float:left;}
    .bann_08 .ul_box ul{width:1500px;}
    .bann_08 .ul_box ul li{width:153px; height:202px; float:left;padding-top:14px; padding-left:3px; background:url(../images/b.jpg) no-repeat 0 11px;}
    </style>
    </head><body>
    <div class="bann_08" id="scroll">
                                     <div class="bann_left_box"><p class="p_box"><img id="prev" src="images/left.jpg" alt="" /></p></div>
                                        <div class="ul_box">
                                            <ul>
                                                <li>
                                                 <a href="pic/01.jpg" target="_blank"><img src="" alt="" /></a>
                                                </li>
                                                <li>
                                                 <a href="pic/02.jpg" target="_blank"><img src="" alt="" /></a>
                                                </li>
                                                <li>
                                                 <a href="pic/03.jpg" target="_blank"><img src="" alt="" /></a>
                                                </li>
                                                <li>
                                                 <a href="pic/04.jpg" target="_blank"><img src="" alt="" /></a>
                                                </li>
                                                <li>
                                                 <a href="pic/05.jpg" target="_blank"><img src="" alt="" /></a>
                                                </li>
                                                <li>
                                                 <a href="pic/06.jpg" target="_blank"><img src="" alt="" /></a>
                                                </li>
                                                <li>
                                                 <a href="pic/07.jpg" target="_blank"><img src="" alt="" /></a>
                                                </li>
                                                 <li>
                                                 <a href="pic/08.jpg" target="_blank"><img src="" alt="" /></a>
                                                </li>
                                                 <li>
                                                 <a href="pic/09.jpg" target="_blank"><img src="" alt="" /></a>
                                                </li>
                                                 <li>
                                                 <a href="pic/10.jpg" target="_blank"><img src="" alt="" /></a>
                                                </li>                                            
                                            </ul>
                                        </div>
                                        <div class="bann_right_box"><p class="p_box"><img id="next" src="images/right.jpg" alt="" /></p></div>
                                    </div>
                                    <script type="text/javascript" src="http://event51.wanmei.com/chibi/201107/story6/js/jquery1.21.js"></script>
                                    <script type="text/javascript" src="http://event51.wanmei.com/chibi/201107/story6/js/jquery.scroll.js"></script>
                                    <script type="text/javascript">
                                        $(function(){
                                            $("#scroll").Scroll({line:1,speed:1000,timer:3000});
                                        });
                                    </script>
    </body>
    </html>