0

我需要在我的网站上添加一个 jQuery 滑块，我发现这个滑块符合我的要求。但是滑块只显示3张图片，如何在滑块上添加一两张其他图片？

演示：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代码。但是我不擅长编程，有人能告诉我怎么做吗？

4

1 回答 1

0

虽然我同意 DevlshOne，但还有许多其他质量滑块。要回答 OP 的问题，您必须将代码修复为没有硬编码的位置。相反，我选择使用 jQuery 提供的 index 方法。

这是显示 4 个图像工作的 jsFiddle（虽然我使用了原始代码，所以没有显示实际图像）。

http://jsfiddle.net/a5yqx/

代码的主要变化来自：

position = ++ position % 3;
...
if($(this).hasClass('preview-first')){
     position = 0;
} else if($(this).hasClass('preview-second')){
     position = 1;
} else if($(this).hasClass('preview-third')){
     position = 2;
}

至：

position = ++position % domer.length;
...
position = $(this).index();

由于我没有伴随它的 CSS，我不确定你还需要什么来保持你的风格，但祝你好运。

最后请注意，我将图像大小从您的默认值更改为 10x10，以便在小提琴的屏幕上看到它。

于 2013-08-22T17:06:06.237 回答