js效果问题

以下代码可以直接粘贴到本地，然后就可以打开看了。
现在的问题是，鼠标点击大图上的两个箭头左侧的小图不翻页，我想不出来怎么算了，求高人指点。<!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>
<script src="http://zhubo.sart.cc/js/jquery-1.4.4.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="http://zhubo.sart.cc/js/jquery.tooltip.js"></script>
<script type="text/javascript" src="http://zhubo.sart.cc/js/jscroll1.js"></script>
<!--[if IE 6]><script type="text/javascript" src="http://zhubo.sart.cc/js/png.js"></script><![endif]-->
<script type="text/javascript">
function setMenuImg(){
if(location.href.indexOf('type') != -1){
$('#listimg').attr('src','image/navb.gif');
}else if(location.href.indexOf('single/12') != -1){
$('#cimg').attr('src','image/navd.gif');
}else if(location.href.indexOf('single') != -1 || location.href.indexOf('news') != -1){
$('#ljimg').attr('src','image/navc.gif');
}
}
$().ready(function(){
$('.nav a').focus(function(){$(this).blur()});
})
</script>
<link rel="stylesheet" type="text/css" href="http://zhubo.sart.cc/css/zhubo.css" />
</head><body>
<div class="main">
    <div class="header">
        <a href="http://zhubo.sart.cc/" id="logo"><img src="http://zhubo.sart.cc/image/logo.gif" alt="筑博设计" /></a>
        <ul class="nav">
            <li><a href="http://zhubo.sart.cc/"><img src="http://zhubo.sart.cc/image/nav1.gif" onmouseover="this.src='http://zhubo.sart.cc/image/nava.gif'" onmouseout="this.src='http://zhubo.sart.cc/image/nav1.gif';setMenuImg()" alt="首页" /></a></li>
            <li>
                <a href="javascript:;" class="showmenu"><img src="http://zhubo.sart.cc/image/nav2.gif" id="listimg" onmouseover="this.src='http://zhubo.sart.cc/image/navb.gif'" onmouseout="this.src='http://zhubo.sart.cc/image/nav2.gif';setMenuImg()" alt="项目列表" /></a>
                <span class="smenu" id="smenu1"><span>
                    <a class="nav1 navthis1" href="http://zhubo.sart.cc/project/?type=type" title="项目类别"></a>
                    <a class="nav2 " href="http://zhubo.sart.cc/project/?type=time" title="项目时间"></a>
                </span></span>
            </li>
            <li>
                <a href="javascript:;" class="showmenu"><img src="http://zhubo.sart.cc/image/nav3.gif" onmouseover="this.src='http://zhubo.sart.cc/image/navc.gif'" onmouseout="this.src='http://zhubo.sart.cc/image/nav3.gif';setMenuImg()" id="ljimg" alt="了解筑博" /></a>
                <span class="smenu" id="smenu2"><span style="width:347px;">
                    <a class="nav3 " href="http://zhubo.sart.cc/single/3" title="了解筑博"></a>
                    <a class="nav4 " href="http://zhubo.sart.cc/single/5" title="战略目标"></a>
                    <a class="nav5 " href="http://zhubo.sart.cc/single/6" title="组织架构"></a>
                    <a class="nav6 " href="http://zhubo.sart.cc/single/7" title="筑博荣誉"></a>
                    <a class="nav7 " href="http://zhubo.sart.cc/single/9" title="企业文化"></a>
                    <a class="nav8 " href="http://zhubo.sart.cc/news" title="新闻"></a>
                </span></span>
            </li>
            <li><a href="http://zhubo.sart.cc/single/12"><img src="http://zhubo.sart.cc/image/nav4.gif" onmouseover="this.src='http://zhubo.sart.cc/image/navd.gif'" onmouseout="this.src='http://zhubo.sart.cc/image/nav4.gif';setMenuImg()" id="cimg" alt="联系筑博" /></a></li>
        </ul>
        <script type="text/javascript">
        $('.showmenu').click(function(){
            if($(this).next().attr('id') == 'smenu1'){
                $('#smenu2').animate({width:'1px'}, "slow");
            }else{
                $('#smenu1').animate({width:'1px'}, "slow");
            }
            var swidth = $(this).next().find('span').width();
            if($(this).next().width() == '1'){
                if(!$(this).next().is(':animated')){
                    $(this).next().animate({width:swidth}, "slow");
                }
            }else{
                if(!$(this).next().is(':animated')){
                    $(this).next().animate({width:'1px'}, "slow");
                }
            }
            return false;
        })
setMenuImg();
if(location.href.indexOf('type') != -1){
$('#smenu1').width('122px');
}else if(location.href.indexOf('single/12') != -1){
//return false;
}else if(location.href.indexOf('single') != -1 || location.href.indexOf('news') != -1){
$('#smenu2').width('347px');
}
        </script>
        <!--<p class="langs"><a href="javascript:;" class="this">中文</a> | <a href="javascript:;">En</a></p>-->
        <form class="form" action="http://zhubo.sart.cc/search/?">
        <input type="text" class="text" name="keyword" value=""/>
        <input type="submit" value="" class="submit" />
        </form>
    </div>
<div class="headerbox"></div>
<style type="text/css">
#play { width:660px; background-color:#E2E2E2; height:473px; float:left; margin:-25px 0 0 6px; display:inline;; overflow:visible; position:relative; }
#play_bg, #play_info { display:none; }
#play_text { position:absolute; height:135px; z-index:12; left:0; overflow:hidden; zoom:1; }
#play_text li { width:68px; position:relative; height:68px; overflow:hidden; float:left; cursor:pointer; }
#play_text img { margin:0 1px 1px 0; width:67px; height:67px; }
#play_text li span { border:2px solid #0D6FB8; position:absolute; left:0; top:0; width:63px; height:63px; display:none; }
#play_text li.this span { display:block; }
#play_list { width:660px; height:473px; }
#play_list div { display:none; width:660px; height:473px; position:absolute; overflow:hidden; left:0; top:0; }
#prev, #next { display:none; _display:block; position:absolute; height:43px; bottom:209px; width:24px; overflow:hidden; z-index:10; }
#prev { left:7px; }
.left11, .left22, .right11, .right22 { position:absolute; left:0; top:0; z-index:13; }
.left22, .right22 { z-index:12; }
#prev:hover .left22 { z-index:14; }
#next { right:7px; }
#next:hover .right22 { z-index:14; }
.thumblist { width:272px; height:135px; overflow:hidden; background-image:url(image/tbg.gif); position:absolute; bottom:0; left:-310px; }
#t_left, #t_right { position:absolute; z-index:10; bottom:0; left:-332px; cursor:pointer; display:none; }
#t_right { left:-38px; }
#count { bottom:-20px; left:0; position:absolute; line-height:20px; }
#count span { color:#0D6FB8; }
.nextpro { position:absolute; right:13px; bottom:-20px; line-height:20px; }
.nextpro a { margin-left:25px; }
#page { z-index:8; width:660px; height:473px; position:absolute; left:0; top:0; }
/*.tl1, .tr1 { width:22px; height:135px; position:absolute; bottom:0; background-color:#F1F1F1; left:-332px; }
.tr1 { left:-38px; }*/
</style>
    <div class="content imgfocus" style="overflow:visible;">
        <h2 class="subtitle"><a href="http://zhubo.sart.cc/project/?type=type&typename=2">居住区规划</a></h2>
        <div class="leftbox">
            <div class="info">
             <h3>广深港客运专线光明站周边地区城市设计</h3>
                <div class="add">
                 <table cellpadding="0" cellspacing="0" border="0">
<tr><td width="65"><strong>项目地址：</strong></td><td><a href="http://zhubo.sart.cc/search/?keyword=%E5%B9%BF%E4%B8%9C%E6%B7%B1%E5%9C%B3" target="_blank">广东深圳</a></td></tr>                        <tr><td width="65"><strong>项目类型：</strong></td><td><a href="http://zhubo.sart.cc/search/?keyword=%E5%B1%85%E4%BD%8F%E5%8C%BA%E8%A7%84%E5%88%92" target="_blank">居住区规划</a></td></tr>                        <tr><td width="65"><strong>项目时间：</strong></td><td><a href="http://zhubo.sart.cc/search/?keyword=2011" target="_blank">2011</a></td></tr>                         <tr><td width="65"><strong>建筑面积：</strong></td><td>1,000,000㎡</td></tr>                        <tr><td width="65"><strong>用地面积：</strong></td><td>2,700,000㎡</td></tr>                                                                                         </table>
                </div>
            </div>

解决方案 »

  1.   


    <h3 class="xxxx">详细信息</h3>
                <div id="ab1" class="abs">
                    <div class="jscroll-c">
                        <div style="height:1px; overflow:hidden;"></div>
                        <div class="jsbox">
                            本项目位于深圳市光明高新园区东片区，方案利用中心湿地公园及山体运动公园将规划用地分成相互联系的4个区块，由观光路分隔而成。4个区块之间则通过两种不同形态的城市公园打造充满生态活力的“十字绿脉”。根据被分割区域的不同地理特征划分出“南田园”“北都市”两个特色鲜明的片区。在“北都市”区域内，围绕高铁光明站，集合地铁13号线、长途客运站、的士、公交等多种公共交通设施打造零换乘枢纽区，站点周边400米范围形成中心活力区，强调土地混合使用，建成集商务、酒店、购物、餐饮、休闲、娱乐、文化等于一体的门户形象集中展现区。而“南田园”区域，结合现状山体和树林，采用散落式的布局，以低层为主，主要建设加速器、软件服务外包及中小企业总部为主的复合产业园区。
    </div>
                    </div>
                    <div unselectable="on" class="jscroll-e">
                        <div class="jscroll-u"></div>
                        <div unselectable="on" class="jscroll-h"></div>
                        <div class="jscroll-d"></div>
                    </div>
                </div>
            </div>
            <div id="play">
                <div id="play_bg"></div>
                <div id="play_info"></div>
                <img id="t_left" src="http://zhubo.sart.cc/image/thumbleft.gif" />
                <img id="t_right" src="http://zhubo.sart.cc/image/thumbright.gif" />
                <div class="thumblist">
                    <ul id="play_text">
                        <li><img src="http://zhubo.sart.cc/attachment/201104/13/1302628201_M94XkT_cm.jpg" alt="" /><span></span></li>
                        <li><img src="http://zhubo.sart.cc/attachment/201104/13/1302628191_879wKC_cm.jpg" alt="" /><span></span></li>
                        <li><img src="http://zhubo.sart.cc/attachment/201104/13/1302628181_tCOA8c_cm.jpg" alt="" /><span></span></li>
                        <li><img src="http://zhubo.sart.cc/attachment/201104/13/1302628164_wEniNn_cm.jpg" alt="" /><span></span></li>
                        <li><img src="http://zhubo.sart.cc/attachment/201104/13/1302628209_j96jmj_cm.jpg" alt="" /><span></span></li>
                        <li><img src="http://zhubo.sart.cc/attachment/201104/13/1302628228_NV5jZA_cm.jpg" alt="" /><span></span></li>
                        <li><img src="http://zhubo.sart.cc/attachment/201104/13/1302628265_YzEo51_cm.jpg" alt="" /><span></span></li>
                        <li><img src="http://zhubo.sart.cc/attachment/201104/13/1302628293_pZS2DT_cm.jpg" alt="" /><span></span></li>
                        <li><img src="http://zhubo.sart.cc/attachment/201104/13/1302628320_24znPg_cm.jpg" alt="" /><span></span></li>
                        <li><img src="http://zhubo.sart.cc/attachment/201104/13/1302628344_6MCO86_cm.jpg" alt="" /><span></span></li>
                        <li><img src="http://zhubo.sart.cc/attachment/201104/13/1302628386_fvCA6H_cm.jpg" alt="" /><span></span></li>
                    </ul>
                </div>
                <div id="play_list">
                 <div>
                     <table cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle" align="center" width="660" height="473">
                     <img src="http://zhubo.sart.cc/attachment/201104/13/1302628201_M94XkT_cb.jpg" alt="" />
                        </td></tr></table>
                    </div>
                    <div>
                     <table cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle" align="center" width="660" height="473">
                     <img src="http://zhubo.sart.cc/attachment/201104/13/1302628191_879wKC_cb.jpg" alt="" />
                        </td></tr></table>
                    </div>
                    <div>
                     <table cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle" align="center" width="660" height="473">
                     <img src="http://zhubo.sart.cc/attachment/201104/13/1302628181_tCOA8c_cb.jpg" alt="" />
                        </td></tr></table>
                    </div>
                    <div>
                     <table cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle" align="center" width="660" height="473">
                     <img src="http://zhubo.sart.cc/attachment/201104/13/1302628164_wEniNn_cb.jpg" alt="" />
                        </td></tr></table>
                    </div>
                    <div>
                     <table cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle" align="center" width="660" height="473">
                     <img src="http://zhubo.sart.cc/attachment/201104/13/1302628209_j96jmj_cb.jpg" alt="" />
                        </td></tr></table>
                    </div>
                    <div>
                     <table cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle" align="center" width="660" height="473">
                     <img src="http://zhubo.sart.cc/attachment/201104/13/1302628228_NV5jZA_cb.jpg" alt="" />
                        </td></tr></table>
                    </div>
                    <div>
                     <table cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle" align="center" width="660" height="473">
                     <img src="http://zhubo.sart.cc/attachment/201104/13/1302628265_YzEo51_cb.jpg" alt="" />
                        </td></tr></table>
                    </div>
                    <div>
                     <table cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle" align="center" width="660" height="473">
                     <img src="http://zhubo.sart.cc/attachment/201104/13/1302628293_pZS2DT_cb.jpg" alt="" />
                        </td></tr></table>
                    </div>
                    <div>
                     <table cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle" align="center" width="660" height="473">
                     <img src="http://zhubo.sart.cc/attachment/201104/13/1302628320_24znPg_cb.jpg" alt="" />
                        </td></tr></table>
                    </div>
                    <div>
                     <table cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle" align="center" width="660" height="473">
                     <img src="http://zhubo.sart.cc/attachment/201104/13/1302628344_6MCO86_cb.jpg" alt="" />
                        </td></tr></table>
                    </div>
                    <div>
                     <table cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle" align="center" width="660" height="473">
                     <img src="http://zhubo.sart.cc/attachment/201104/13/1302628386_fvCA6H_cb.jpg" alt="" />
                        </td></tr></table>
                    </div>
                </div>
                <p id="page"><a href="javascript:;" id="prev"><img src="http://zhubo.sart.cc/image/left.png" class="left11" /><img src="http://zhubo.sart.cc/image/left1.png" class="left22" /></a>
                <a href="javascript:;" id="next"><img src="http://zhubo.sart.cc/image/right.png" class="right11" /><img src="http://zhubo.sart.cc/image/right1.png" class="right22" /></a></p>
             <p id="count"><span>1</span>/11</p>
                <p class="nextpro"><a href="http://zhubo.sart.cc/project/?type=type&typename=2">返回上一级</a><a href="http://zhubo.sart.cc/project/?type=type&typename=2&id=19" style="color:#0D6FB8;">下一项目 &gt;</a></p>
            </div>
            
      

  2.   

    太长了，分3次<script type="text/javascript">
    if($.browser.msie && $.browser.version <=6){
    $('#prev').hover(function(){
    $('.left22').css('z-index','14');
    },function(){
    $('.left22').css('z-index','11');
    })
    $('#next').hover(function(){
    $('.right22').css('z-index','14');
    },function(){
    $('.right22').css('z-index','11');
    })
    }
    $('#page, #play_list td').hover(function(){
    $('#prev').show();
    $('#next').show();
    },function(){
    $('#prev').hide();
    $('#next').hide();
    })
    var t = n = 0, count = $("#play_list div").size(), l_index = $('#play_list div:last-child').index();
    $(function(){
    $("#play_list div").eq(0).show();
    $("#play_info").html($("#play_list div:first-child").find("img").attr('alt'));
    $("#play_text li:first-child").addClass('this');
    $("#play_text li").click(function(){
    var i = $(this).index(); n = i;
    if (i >= count) return;
    $("#play_info").html($("#play_list div").eq(i).find("img").attr('alt'));
    $("#play_list div").filter(":visible").hide().parent().children().eq(i).show();
    $(this).addClass('this').siblings().removeClass('this');
    addCount(i);
    });
    //t = setInterval("showAuto()", 4000);
    $("#play").hover(function(){
    //clearInterval(t)
    },function(){
    //t = setInterval("showAuto()", 4000)
    })
    })
    $('#prev').click(function(){
    var t_index = $('#play_text li.this').index();
    $('#play_text li.this').removeAttr('class');
    $("#play_list div").filter(":visible").hide();
    if(t_index != 0){
    $('#play_list div').eq(t_index-1).show();
    $('#play_text li').eq(t_index-1).addClass('this');
    addCount(t_index-1);
    }else{
    $('#play_list div').eq(l_index).show();
    $('#play_text li').eq(l_index).addClass('this');
    addCount(l_index);
    }
    })
    $('#next').click(function(){
    var t_index = $('#play_text li.this').index();
    $('#play_text li.this').removeAttr('class');
    $("#play_list div").filter(":visible").hide();
    if(t_index != l_index){
    $('#play_list div').eq(t_index+1).show();
    $('#play_text li').eq(t_index+1).addClass('this');
    addCount(t_index+1);
    }else{
    $('#play_list div').eq(0).show();
    $('#play_text li').eq(0).addClass('this');
    addCount(0);
    }
    })
    function showAuto(){
    n = n >= (count - 1) ? 0 : ++n;
    $("#play_text li").eq(n).trigger('click');
    }
    $('#ab1').jscroll();
    $('#prev, #next').focus(function(){$(this).blur()})

    var t_size = $('#play_text li').size();
    if(t_size > 8){
    $('#t_left, #t_right').show();
    }
    var t_width = 68;
    var t_ulwidth1 = t_size*t_width/2;
    var t_ulwidth2 = t_size%2;
    var left_v = 68*4;
    if(t_size > 5){
    if(t_ulwidth2 == 0){
    $('#play_text').width(t_ulwidth1);
    }else{
    $('#play_text').width(t_ulwidth1+34);
    }
    }else{
    $('#play_text').width(left_v);
    }
    $('#t_right').click(function(){
    var leftv = -parseInt($('#play_text').css('left'))+left_v;
    if($('#play_text').width()-leftv < left_v){
    $('#t_right').hide();
    }
    $('#t_left').show();
    $('#play_text').animate({'left':-leftv}, 300)
    })
    $('#t_left').click(function(){
    var leftv = -parseInt($('#play_text').css('left'))-left_v;
    if(leftv == 0){
    $('#t_left').hide();
    }
    $('#t_right').show();
    $('#play_text').animate({'left':-leftv}, 300)
    })
    function addCount(n){
    var t_s = $('#play_text li').size();
    $('#count').html('<span>'+(n+1)+'</span>/'+t_s)
    }
    </script>
        </div>
        <p class="footer">Copyright &copy; 2004 Zhubo. All rights reserved.</p>
    </div>
    </body>
    </html>