Question

我想用jquery制作一个小幻灯片。第一个问题：如果我只有“下一个点击功能”，图像会一个接一个地显示出来。但如果我使用“prev”功能，下一个按钮将不再起作用。另一个问题：通过单击最后一个图像后的“下一个按钮”，幻灯片应该由第一个图像重新开始。也许有人有想法。提前谢谢。

         $("#next").click(function(){
            if($("#gallery li").next("#gallery li").length != 0) {
                var next = $(".toppicture").parent("li").next().children("img");
                $("#gallery li").children("img").removeClass('toppicture');
                $(next).addClass('toppicture');
            }
            else {
                $(this).children("img").removeClass('toppicture');
                $("#gallery li:first-child").children("img").addClass('toppicture');
            }
        });

        $("#prev").click(function(){
            if($("#gallery li").prev("#gallery li").length != 0) {
                var prev = $(".toppicture").parent("li").prev().children("img");
                $("#gallery li").children("img").removeClass('toppicture');
                $(prev).addClass('toppicture');
            }
            else {
                $(this).children("img").removeClass('toppicture');
                $("#gallery li:first-child").children("img").addClass('toppicture');
            }
        });

id为“gallery”的“ul”如下所示：

    <li>
<img class="toppicture" src="images/w1.jpg" title="Title #0"/>
    </li>
    <li>
<img  src="images/w2.jpg" title="Title #1"/>
    </li>
    <li>
<img  src="images/w3.jpg" title="Title #2"/>
    </li>

Answer 1

这不是最简单的滑块，但我认为这是最容易理解的。 jsFiddle

HTML：

<ul id="gallery">
    <li> <img src="http://lorempixel.com/output/people-q-c-640-480-5.jpg" title="Title #0"/> </li>
    <li> <img src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg" title="Title #1"/> </li>
    <li> <img src="http://lorempixel.com/output/food-q-c-640-480-3.jpg" title="Title #2"/> </li>
</ul>
<a href="#" id="previous">previous</a> <a href="#" id="next">next</a>

JS：

function loadSlide(index){
    $('#gallery li').hide()
        .eq(index).show();
}

$('#gallery').data('index',0).find('li').hide();
loadSlide(0);

$('#next').on('click',function(e){
    var index = $('#gallery').data('index'),
    numSlides = $('#gallery li').length;

    index = (index + 1) % numSlides;    
    loadSlide(index);
    $('#gallery').data('index',index);
    e.preventDefault();            
});
$('#previous').on('click',function(e){
    var index = $('#gallery').data('index'),
    numSlides = $('#gallery li').length;

    index = (index + numSlides - 1) % numSlides;
    loadSlide(index);
    $('#gallery').data('index',index);
    e.preventDefault();
});

通过分离角色，避免了大量的遍历（比如你的.next()惨败）。

幻灯片更改由一个函数完成，它需要一个数字并显示幻灯片。
当前幻灯片号码使用.data()
下一个和上一个按钮只需要获取当前幻灯片，然后适当增加减少的数量，然后调用幻灯片更换器。

通过这种方式，您可以轻松扩展任何特定区域。想过渡吗？把它放在滑盖更换器中。想让幻灯片自动前进吗？设置计时器以调用幻灯片切换器。

将此解决方案与功能齐全的滑块分开的唯一方法是通常将所有内容封装在一起，并使用自定义事件而不是函数来更改幻灯片。我很乐意将这个例子扩展一下，以便向你展示你的不同之处。

Answer 2

这里有example in jsFiddle给你

所以，你想要的就是旋转木马。有一些jQuery插件可以处理这种效果，例如：jCarousel Sorgalla.com

addClass .next（）。prev（）幻灯片不会工作

2 个答案: