Question

我需要在我的网站上添加一个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代码。但是我不擅长编程，有人会告诉你怎么做吗？

Answer 1

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

这是显示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，以便在小提琴屏幕上看到它。

将一个或两个图片添加到jQuery Slider

1 个答案: