javascript - jQuery Slider に 1 つまたは 2 つの画像を追加します。

Question

Web サイトに jQuery スライダーを追加する必要があり、これが要件を満たしていることがわかりました。しかし、スライダーには 3 つの画像しか表示されません。他の 1 つまたは 2 つの画像をスライダーに追加するにはどうすればよいですか?

デモ: http://d.lanrentuku.com/down/js/jiaodiantu-883/

htmlコード

<div id="preview-slider">
    <div id="preview-slide-1" style="display: none;"><a target="_blank" href="http://www.lanrentuku.com/"><img width="930" height="300" alt="" src="images/01.jpg"></a></div>
    <div class="preview-hide" id="preview-slide-2" style="display: block;"><a target="_blank" href="http://www.lanrentuku.com/"><img width="930" height="300" alt="" src="images/02.jpg"></a></div>
    <div class="preview-hide" id="preview-slide-3" style="display: none;"><a target="_blank" href="http://www.lanrentuku.com/"><img width="930" height="300" alt="" src="images/03.jpg"></a></div>
    <div id="preview-slider-line">
        <ul id="preview-slider-holder">
            <li class="preview-first">
                <div class="preview-slider-thumbnail"><a target="_blank" href="http://www.lanrentuku.com/"><img width="66" height="36" id="preview-thumbnail-im1" alt="" src="images/01.png" style="top: 0px;"></a></div>
                <span><a target="_blank" href="http://www.lanrentuku.com/">Picture 1</a></span></li>
            <li class="preview-second">
                <div class="preview-slider-thumbnail"><a target="_blank" href="http://www.lanrentuku.com/"><img width="66" height="36" id="preview-thumbnail-im2" alt="" src="images/02.png" style="top: -15px;"></a></div>
                <span><a target="_blank" href="http://www.lanrentuku.com/">Picture 2</a></span></li>
            <li class="preview-third">
                <div class="preview-slider-thumbnail"><a target="_blank" href="http://www.lanrentuku.com/"><img width="66" height="36" id="preview-thumbnail-im3" alt="" src="images/03.png" style="top: 0px;"></a></div>
                <span><a target="_blank" href="http://www.lanrentuku.com/">Picture 3</a></span></li>
        </ul>
    </div>
</div>

JavaScriptコード

    (function($){
            $(document).ready(function() {
                    var ready = true, position = 1, timer = null, domer = $('ul#preview-slider-holder > li');
                    var anima = function () {
                            if (!ready) {
                                    $("#preview-slider > div:not(':last'):not(':eq(" + position + ")')").each(function(){
                                            if($(this).is(':animated')){
                                                    $(this).stop(true, true);
                                            }                              
                                    });                              
                            }
                            ready = false;
                            $("#preview-slider > div:not(':last'):not(':eq(" + position + ")')").hide();
                            $('img', this).animate({"top": "-15px"}, 200);
                            $('#preview-slide-' + (position + 1)).fadeIn(600, function(){
                                    ready = true;
                            });
                            $('img[id^="preview-thumbnail-im"]:not([id="preview-thumbnail-im' + (position+1) + '"])').stop(true, false).animate({'top': '0px'}, 200);
                            position = ++ position % 3;
                    };
                    timer = setInterval(function(){anima.apply(domer)}, 2000); // interval time
                    domer.mouseover(function () {
                            timer == null || clearInterval(timer);               
                            if($(this).hasClass('preview-first')){
                                    position = 0;
                            } else if($(this).hasClass('preview-second')){
                                    position = 1;
                            } else if($(this).hasClass('preview-third')){
                                    position = 2;
                            }
                            anima.apply(this);
                   });
                   domer.mouseout(function () {
                            timer = setInterval(function(){anima.apply(domer)}, 2000);   
                   });
            });
    })(jQuery);

li 要素を追加しようとしましたが、うまくいきませんでした。JavaScriptコードを変更する必要があると思います。プログラミングが苦手なのですが、どなたか教えていただけないでしょうか？