javascript - 我有一个带有JQuery的简单图像图片滑块，但我不知道如何向上或向下设置动画

我只希望图片滑块右侧的向上和向下按钮起作用。
目前，我的js代码是：

 var height_value = 104 * (-1)*3;
 var top_value=0;
 $("#photoViewerCont .nextPage").click(function(){
    alert("here");
    top_value=top_value+height_value;
    $("#photoViewer .thumbs .pages").animate({'top' : height_value}, 1000,function(){
        $("#photoViewer .thumbs .pages").css({'top' : top_value});

    });
    return false;
 });

该js的HTML部分：

<div id="photoViewer" class="stackItem">
<div id="photoViewerCont">
<div id="mainPhoto" class="preview">
    <div class="innerCont">
        <a onclick="return false;" rel="photos" data-id="113195895"
            href="#"> <img
            width="456" height="342"
            title="112 Cattai Ridge Road, Glenorie, NSW 2157"
            alt="112 Cattai Ridge Road, Glenorie, NSW 2157" data-index="0"
            src="1.jpg">

        </a>
    </div>
</div>
<div class="thumbs">
    <div class="innerCont">
        <div class="paginated">
            <div class="pages" style="height: 634px; top: 0px;">
                <div class="page">
                    <div class="thumb" id="defaultpic">
                        <img class="thumb_0" width="120" height="90"
                            data-type="main_photo"
                            title="112 Cattai Ridge Road, Glenorie, NSW 2157"
                            alt="112 Cattai Ridge Road, Glenorie, NSW 2157"
                            src="1.jpg">
                    </div>
                    <div class="thumb">
                        <img class="thumb_1" width="120" height="90" data-type="photo"
                            title="112 Cattai Ridge Road, Glenorie, NSW 2157"
                            alt="112 Cattai Ridge Road, Glenorie, NSW 2157"
                            src="2.jpg">
                    </div>
                    <div class="thumb">
                        <img class="thumb_2" width="120" height="90" data-type="photo"
                            title="112 Cattai Ridge Road, Glenorie, NSW 2157"
                            alt="112 Cattai Ridge Road, Glenorie, NSW 2157"
                            src="3.jpg">
                    </div>
                    <div class="clearer"></div>
                </div>
                <div class="page">
                    <div class="thumb">
                        <img class="thumb_3" width="120" height="90" data-type="photo"
                            title="112 Cattai Ridge Road, Glenorie, NSW 2157"
                            alt="112 Cattai Ridge Road, Glenorie, NSW 2157"
                            src="4.jpg">
                    </div>
                    <div class="thumb">
                        <img class="thumb_4" width="120" height="90"
                            title="112 Cattai Ridge Road, Glenorie, NSW 2157"
                            alt="112 Cattai Ridge Road, Glenorie, NSW 2157"
                            src="5.jpg">
                    </div>

                    <div class="clearer"></div>
                </div>
            </div>
        </div>
    </div>
    <a class="previousPage" href="#">Previous</a>
    <a class="nextPage" href="#">Next</a>
</div>
<div class="clearer"></div>
</div>
</div>

此文件的css部分：

#photoViewer .thumbs {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #CCCCCC #CCCCCC #CCCCCC -moz-use-text-color;
border-image: none;
border-style: solid solid solid none;
border-width: 1px 1px 1px 0;
float: right;
width: 165px;
}

.thumbs {
position: relative;
}

#photoViewerCont .innerCont {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #FFFFFF;
height: 346px;
padding: 12px;
}

#photoViewer .thumbs .paginated {
height: 312px;
margin: 0 auto;
position: relative;
top: 18px;
width: 130px;
overflow: hidden;
}

#photoViewerCont a.previousPage {
border-radius: 0 0 3px 3px;
top: -1px;
overflow: hidden;
position: absolute;
text-indent: 5000px;
}
#photoViewerCont a.nextPage {
background-position: -57px 0;
border-radius: 3px 3px 0 0;
bottom: -1px;
overflow: hidden;
position: absolute;
text-indent: 5000px;
}
#photoViewerCont a.previousPage, #photoViewerCont a.nextPage {
background: url("photoviewer_arrows.png") no-repeat scroll -3px 0 #C20014;
border: 1px solid #AAAAAA;
display: inline-block;
height: 24px;
right: 61px;
width: 48px;

}

#photoViewerCont a.nextPage {
background-position: -57px 0;
border: 1px solid #AAAAAA;
display: inline-block;
height: 24px;
right: 61px;
width: 48px;
 }

它可以转到警报部分，但动画部分似乎不起作用。谁能知道我的错在哪里，或者可以给我举一个简单的例子说明图片滑动如何滑动和上升。

最佳答案

在这种情况下，这就是您可以做的。一点也不坏...

margin-top: height

solution

关于javascript - 我有一个带有JQuery的简单图像图片滑块，但我不知道如何向上或向下设置动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15426319/