如何使用jquery让我的缩略图在单击时左右滚动？

这是我的幻灯片演示的所有代码，除了在鼠标点击

#slideshow thumbs prev

和

#slideshow thumbs next

时从左向右移动的缩略图外，其他一切都正常

我是jquery的新手，所以请尽可能地描述。如果我遗漏了什么或者代码没有正确标记到html中，请告诉我这里发生了什么。谢谢

 <script type="text/javascript">

var index = 0;

$(document).ready(function(){
function next() {
    index++;
    if ( index > 11 ) {
        index = 0;
    } // end if 
    show_slide();
} // end next()

function prev() {
    index--;
    if ( index < 0 ) {
        index = 11;
    } // end if
    show_slide();
} // end prev()


$("#slideshow-thumbs-next").click(function(){
    index ++;
    if ( index > 11 ) {
        index = 0;
    }           
    var position = $('#slidesthumbnails>div').eq(index).position();
    $('#slidesthumbnails').animate({left:-position.left+'px',top:-position.top+'px'});
});

$("#slideshow-thumbs-prev").click(function(){
    index --;
    if ( index > 0 ) {
        index = 11;
    }           
    var position = $('#slidesthumbnails>div').eq(index).position();
    $('#slidesthumbnails').animate({left:-position.left+'px',top:-position.top+'px'});
});

function show_slide() {
    $("#slideshow-container>.slideshow-stage>img").eq(index).fadeIn(500).siblings().fadeOut(500);
    $("#slide-caption-box>.slide-caption>div").eq(index).fadeIn(500).siblings().fadeOut(500);
    //highlight thumbnail
    $("#thumbnails-container>#thumbnails-wrapper>#slidesthumbnails>.thumbnails").removeClass("selected").eq(index).addClass("selected");
}

$(function() {
    $( "#slideshow-container>.slideshow-stage>img" ).aeImageResize({ height: 476, width: 680 });
});

    $("#slideshow-container>.slideshow-stage>img").eq(0).siblings().hide();
    $("#slide-caption-box>.slide-caption>div").eq(0).siblings().hide();

    $("#thumbnails-container>#thumbnails-wrapper>#slidesthumbnails>.thumbnails").click(function(){
        var index = $(this).index();
        $(this).addClass("selected").siblings().removeClass("selected");
        $("#slideshow-container>.slideshow-stage>img").eq(index).fadeIn(500).siblings().fadeOut(500);
        $("#slide-caption-box>.slide-caption>div").eq(index).fadeIn(500).siblings().fadeOut(500);       
    });

    //click functions,
    $("#slideshow-container>.slideshow-stage>.slideshow-next").click(function(){
        index = $(this).index();
        $(this).addClass("selected").siblings().removeClass("selected");
        show_slide();
    });

    $("#thumbnails-container>#thumbnails-wrapper>#slidesthumbnails>.thumbnails").click(function(){
        index = $(this).index();
        $(this).addClass("selected").siblings().removeClass("selected");
        show_slide();

    });

            $("#slideshow-next").click( next );
            $("#slideshow-prev").click( prev );

            $("#slideshow-thumbs-next").click( next );
            $("#slideshow-thumbs-prev").click( prev );


    $(function() {           
    $("#thumbnails-container>#thumbnails-wrapper>#slidesthumbnails>.thumbnails").mouseover(function (event) {
        $(this).siblings().stop().animate({opacity: 0.4}, 200);       
        $(this).stop().animate({opacity: 1.0}, 200); 
        event.stopPropagation();     // don't fire the body click handler
    });
    });

    $(function() {           
    $("#thumbnails-container>#thumbnails-wrapper>#slidesthumbnails>.thumbnails").mouseout(function (event) {             
        $(this).siblings().stop().animate({opacity:1.0}, 200);       
        $(this).stop().animate({opacity: 1.0}, 200); 
        event.stopPropagation();     // don't fire the body click handler
    });

    }); 
    });

var指数=0；
$（文档）.ready（函数（）{
函数next（）{
索引++；
如果（索引>11）{
指数=0；
}//如果结束，则结束
放映幻灯片（）；
}//下一步结束（）
函数prev（）{
索引--；
如果（指数<0）{
指数=11；
}//如果结束，则结束
放映幻灯片（）；
}//end prev（）
$（“#幻灯片显示拇指下一步”）。单击（函数（）{
索引++；
如果（索引>11）{
指数=0；
}           
var position=$（'#slidesthumbails>div'）.eq（index.position（）；
$（#slidesthumbails'）。动画（{left:-position.left+'px'，top:-position.top+'px}）；
});
$（“#幻灯片拇指预览”）。单击（函数（）{
索引--；
如果（索引>0）{
指数=11；
}           
var position=$（'#slidesthumbails>div'）.eq（index.position（）；
$（#slidesthumbails'）。动画（{left:-position.left+'px'，top:-position.top+'px}）；
});
功能演示(幻灯片){
$（“#slideshow container>.slideshow stage>img”）.eq（index）.fadeIn（500）.sidesh（）.fadeOut（500）；
$（“#幻灯片标题框>.slide caption>div”）.eq（索引）.fadeIn（500）.sides（）.fadeOut（500）；
//突出显示缩略图
$（“#缩略图容器>#缩略图包装器>#幻灯片缩略图>.thumbnails”）.removeClass（“选定”）.eq（索引）.addClass（“选定”）；
}
$（函数（）{
$（“#slideshow container>.slideshow stage>img”）.aeImageResize（{高度：476，宽度：680}）；
});
$（“#幻灯片放映容器>.slideshow stage>img”）.eq（0）.sideshow（）.hide（）；
$（“#幻灯片标题框>.slide caption>div”）.eq（0）.sides（）.hide（）；
$（“#缩略图容器>#缩略图包装器>#幻灯片缩略图>.thumbnails”）。单击（函数（）{
var index=$（this.index（）；
$（this）.addClass（“选定”）.sides（）.removeClass（“选定”）；
$（“#slideshow container>.slideshow stage>img”）.eq（index）.fadeIn（500）.sidesh（）.fadeOut（500）；
$（“#幻灯片标题框>.slide caption>div”）.eq（索引）.fadeIn（500）.sides（）.fadeOut（500）；
});
//单击函数，
$（“#幻灯片放映容器>.slideshow stage>.slideshow next”）。单击（函数（）{
index=$（this.index（）；
$（this）.addClass（“选定”）.sides（）.removeClass（“选定”）；
放映幻灯片（）；
});
$（“#缩略图容器>#缩略图包装器>#幻灯片缩略图>.thumbnails”）。单击（函数（）{
index=$（this.index（）；
$（this）.addClass（“选定”）.sides（）.removeClass（“选定”）；
放映幻灯片（）；
});
$（“#幻灯片放映下一步”）。单击（下一步）；
$（“#幻灯片预览”）。单击（预览）；
$（“#幻灯片显示拇指下一步”）。单击（下一步）；
$（“#幻灯片拇指预览”）。单击（预览）；
$（函数（）{
$（“#缩略图容器>#缩略图包装器>#幻灯片缩略图>.thumbnails”）.mouseover（函数（事件）{
$（this.sides（）.stop（）.animate（{opacity:0.4}，200）；
$（this.stop（）.animate（{opacity:1.0}，200）；
event.stopPropagation（）；//不要触发主体单击处理程序
});
});
$（函数（）{
$（“#缩略图容器>#缩略图包装器>#幻灯片缩略图>.thumbnails”）.mouseout（函数（事件）{
$（this.sides（）.stop（）.animate（{opacity:1.0}，200）；
$（this.stop（）.animate（{opacity:1.0}，200）；
event.stopPropagation（）；//不要触发主体单击处理程序
});
}); 
});

benlevygraphics




“最佳”-平面设计画廊
向量构建
使用Illustrator绘制

杂志封面
使用Illustrator设计

时钟
使用Illustrator设计

天空之洞旅游网站
使用Illustrator设计的网站草稿

Regen网站模型
使用Illustrator设计

BrendanSchaffer标志设计
使用Illustrator设计

B M L标志
第1版使用Illustrator设计

X工作室
使用Illustrator设计的Studio X Bio Page实体模型

本利维图形
使用Photoshop设计的Ben Levy图形名称徽标

五
用手绘线条打印出的数字5，然后使用Photoshop进行扫描并上色

五
打印出带有手绘线条的数字5，然后使用Photoshop进行扫描和着色
<LINK REL="SHORTCUT ICON" HREF="http://benlevywebdesign.webatu.com/images/favicon.ico">

</head>

<body>

<div id="container">
<div id="headerReplacement">
  <p>&nbsp;</p>
  <p>benlevygraphics</p>
</div>

<span class="class1"><div id="mainnav">
      <ul>
        <li><a href="http://benlevywebdesign.webatu.com/"><img src="../images/homevector_v1.png" alt="" onmouseout="this.src='../images/homevector_v1.png'" onmouseover="this.src='../images/homevector_v2.png'"></a></li>
      </ul>
      </div></span>
      <div id="titlegallery">
      <p class="photographs">"The Best" - A Graphic Design Gallery</p>
      </div>

<!--This is the gallery code here-->
<div id="gallery1">

    <div id="slideshow-container">

    <div class="slideshow-stage">
        <img src="img/Building.jpg" />
        <img src="img/Magazine Cover.jpg" />
        <img src="img/Clocks.jpg" />
        <img src="img/hitsdraft.jpg" />
        <img src="img/regenwebsite.jpg" />
        <img src="img/BrendanSchaffer.jpg" />
        <img src="img/logobml.jpg" />
        <img src="img/studiox.jpg" />
        <img src="img/benlevygraphicsspace.jpg" />
        <img src="img/five.jpg" />
        <img src="img/backofcdcover.jpg" />
        <img src="img/frontofcdcover.jpg" />
    </div>


    <div id="slide-caption-box">
    <div id="imagedescription">
        <img src="../images/Image-Description.png">
    </div>
        <div class="slide-caption">
                <div>
                    <h4>Vector Building</h4>
                    <p>Drawn using Illustrator </p><p class="creatednote">*AAU</p>
                </div>

                <div>
                    <h4>Magazine Cover</h4>
                    <p>designed using Illustrator </p><p class="creatednote">*AAU</p>
                </div>

                <div>
                    <h4>Clocks</h4>
                    <p>designed using Illustrator </p><p class="creatednote">*AAU</p>
                </div>

                <div>
                    <h4>Hole in the Sky Tours Website</h4>
                    <p>website draft designed using Illustrator  <a href="http://benlevywebdesign.webatu.com/holeintheskytours"> View the finished Hole in the Sky Tours Website here</a> </p><p class="creatednote">*AAU</p>
                </div>

                <div>
                    <h4>Regen Website Mock-up</h4>
                    <p>designed using Illustrator </p><p class="creatednote">*AAU</p>
                </div>

                <div>
                    <h4>BrendanSchaffer Logo Design</h4>
                    <p>designed using Illustrator </p><p class="creatednote">*HS</p>
                </div>

                <div>
                    <h4>B M L Logo</h4>
                    <p>Version 1 designed using Illustrator </p><p class="creatednote">*HS</p>
                </div>

                <div>
                <h4>Studio X</h4>
                    <p>Studio X Bio Page Mock-Up designed using Illustrator </p><p class="creatednote">*AAU</p>
                </div>

                <div>
                    <h4>Ben Levy Graphics</h4>
                    <p>Ben Levy Graphics name logo designed using Photoshop </p><p class="creatednote">*HS</p>
                </div>

                <div>
                    <h4>Five</h4>
                    <p>A printed out number 5 with hand drawn lines, then scanned in and colored using Photoshop </p><p class="creatednote">*HS</p>
                </div>

                <div>
                    <h4>Five</h4>
                    <p>A printed out number 5 with hand drawn lines, then scanned in and colored using Photoshop </p><p class="creatednote">*HS</p>
                </div>

                <div>
                    <h4>Five</h4>
                    <p>A printed out number 5 with hand drawn lines, then scanned in and colored using Photoshop </p><p class="creatednote">*HS</p>
                </div>

                </div>
                </div>

    <div id="thumbnails-container">
            <a class="prev" id="slideshow-thumbs-prev"><span>prev</span></a>
            <a class="next" id="slideshow-thumbs-next"><span>next</span></a>

        <div id="thumbnails-wrapper">
        <div id="thumbnails-box">
    <div class="thumbnails"><img src="imglorez/Building.jpg" width="58" height="40" /></div>      
    <div class="thumbnails"><img src="imglorez/Magazine Cover.jpg" width="31" height="40" /></div>
    <div class="thumbnails"><img src="imglorez/Clocks.jpg" width="62" height="40" /></div>
    <div class="thumbnails"><img src="imglorez/hitsdraft.jpg" width="56" height="40" /></div>
    <div class="thumbnails"><img src="imglorez/regenwebsite.jpg" width="60" height="40" /></div>
    <div class="thumbnails"><img src="imglorez/BrendanSchaffer.jpg" width="50" height="40" /></div>
    <div class="thumbnails"><img src="imglorez/logobml.jpg" width="55" height="40" /></div>
    <div class="thumbnails"><img src="imglorez/studiox.jpg" width="56" height="40" /></div>
    <div class="thumbnails"><img src="imglorez/benlevygraphicsspace.jpg" width="64" height="40" /></div>
    <div class="thumbnails"><img src="imglorez/five.jpg" width="29" height="40" /></div>
    <div class="thumbnails"><img src="imglorez/backofcdcover.jpg" width="52" height="40" /></div>
    <div class="thumbnails"><img src="imglorez/frontofcdcover.jpg" width="80" height="40" /></div>
</div>
</div>
</div>

    <div id="slideshow-prev"></div>
    <div id="slideshow-next"></div>

</div>
</div>

Uncaught Error: Syntax error, unrecognized expression: >
http://analytics.hosting24.com/count.php
Failed to load resource