1

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

         $("#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>
4

2 回答 2

0

这是jsFiddle中的一个例子给你

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

于 2012-02-20T00:17:20.610 回答
0

这不是最简单的滑块，但我认为它是最容易理解的。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()

  • 下一个和上一个按钮只需要获取当前幻灯片并适当地减少该数字的增量，然后调用幻灯片转换器。

通过这种方式，您可以轻松地扩展任何特定区域。想要过渡？将其放入幻灯片转换器中。想让幻灯片自动前进吗？设置一个计时器来调用幻灯片更换器。

唯一将此解决方案与全功能滑块区分开来的是，通常您会将所有内容封装在一起，并使用自定义事件而不是函数来更改滑块。如果您愿意，我很乐意扩展此示例以向您展示差异。

于 2012-02-20T00:07:23.003 回答