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

我想用jQuery制作一个幻灯片。第一个问题：如果我只有“下一个点击功能”，图像会依次正确显示。但是，如果我使用“prev”功能，下一个按钮将不再工作。另一个问题：通过点击最后一张图像后面的“下一个按钮”，幻灯片将从第一张图像重新开始。也许有人有一个想法。提前致谢。addClass .next（）.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'); 
      } 
     });

的“UL” id为“画廊”是这样的：

<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>

来源

2012-02-19 D.Steinel

这不是最简单的滑块，但我认为这是最容易理解的。 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-20 00:07:23 Sinetheta

非常感谢！非常好的脚本！正是我需要的。唯一的问题是，图像不完全在同一条线上。看起来这是一个“列表式”的问题。当我切换到下一张图像时，下一张图像向右多了一点。是否有任何把每个图像保持在同一行的技巧？ – 2012-02-20 01:08:12

list-style：none;并显示：block;在您的网站上或在该小提琴上不起作用 – 2012-02-20 01:30:24

？如果你链接到你的网站，我可以帮你调试css – Sinetheta 2012-02-20 02:08:19

这里的example in jsFiddle你

所以，你想要的是像一个旋转木马。有一些jQuery插件来处理这个效果，就像这样：jCarousel by Sorgalla.com

来源

2012-02-20 00:17:20

非常感谢您的帮助，但这并不是我正在寻找的。 – 2012-02-20 01:18:45

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

回答

相关问题