锋利的jquery第八章代码改写

锋利的jquery第八章如何将上下滚动的图片改为左右滚动啊--ad.js
/*首页广告效果*/
$(function(){
     var len  = $(".num > li").length;
 var index = 0;
 var adTimer;
 $(".num li").mouseover(function(){
index  =   $(".num li").index(this);
showImg(index);
 }).eq(0).mouseover();
 //滑入 停止动画，滑出开始动画.
 $('.ad').hover(function(){
 clearInterval(adTimer);
 },function(){
 adTimer = setInterval(function(){
    showImg(index)
index++;
if(index==len){index=0;}
  } , 3000);
 }).trigger("mouseleave");
})
// 通过控制top ，来显示不同的幻灯片
function showImg(index){
        var adHeight = $(".content_right .ad").height();

$(".slider").stop(true,false).animate({left : -adHeight*index},2000);
$(".num li").removeClass("on")
.eq(index).addClass("on");
}

解决方案 »

  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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Jane shopping</title>
    <link rel="stylesheet" href="styles/main.css" type="text/css" />
    <link rel="stylesheet" href="styles/index.css" type="text/css" /><script src="scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script src="scripts/jquery.cookie.js" type="text/javascript"></script>
    <script src="scripts/ad.js" type="text/javascript"></script>
    <script src="scripts/imgHover.js" type="text/javascript"></script></head>
    <body><!--主体开始-->
    <div id="content"> <div class="content_right">
    <div class="ad" >
     <ul class="slider" >
    <li><img src="images/ads/1.gif"/></li>
    <li><img src="images/ads/2.gif"/></li>
    <li><img src="images/ads/3.gif"/></li>
    <li><img src="images/ads/4.gif"/></li>
    <li><img src="images/ads/5.gif"/></li>
      </ul>
      <ul class="num" >
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
      </ul>
    </div>
       </div> 
    </div>
    <!--主体结束-->
    </body>
    </html>
      

  2.   

    --index.css
    #content{
        margin-left:500px;
        width: 800px;
    }
    /*右侧样式*/
    .content_right{
    background:#eee;
    border : 1px solid #AAAAAA;
    width: 586px;
    float:left;
    }
    /*滚动广告样式*/
    .content_right .ad { 
    margin-bottom:10px;
    width:586px; 
    height:150px; 
    overflow:hidden;
    position:relative;
    }
    .content_right .slider,.content_right .num{
    position:absolute;
    }
    .content_right .slider li{ 
    list-style:none;
    display:inline;
    }
    .content_right .slider img{ 
    width:586px; 
    height:150px;
    display:inline-block;
    }
    .content_right .num{ 
    right:5px; 
    bottom:5px;
    }
    .content_right .num li{
    float: left;
    color: #FF7300;
    text-align: center;
    line-height: 16px;
    width: 16px;
    height: 16px;
    font-family: Arial;
    font-size: 12px;
    cursor: pointer;
    overflow: hidden;
    margin: 3px 1px;
    border: 1px solid #FF7300;
    background-color: #fff;
    }
    .content_right .num li.on{
    color: #fff;
    line-height: 21px;
    width: 21px;
    height: 21px;
    font-size: 16px;
    margin: 0 1px;
    border: 0;
    background-color: #FF7300;
    font-weight: bold;
    }