Question

我有一个简单的图像滑块，可以通过ul旋转并逐个显示每个li。最近，它开始显示两个图像而不是一个。它以（有5“li”）的模式显示图像：无＆amp; 1,1和2,2和3,3和4,4和5，然后是1＆amp; 5，然后是1＆amp; 2,2＆amp; 5。 3，依此类推。我在我的网站页脚中有一个示例：http://kunkelwe.kodingen.com/Site/?page_id=25/

我的代码是：

function fadingSlider(currentListItem, startListItem, fadeInDuration, displayDuration, fadeOutDuration) {
  if(!currentListItem) {
    startListItem.fadeIn(fadeInDuration).delay(displayDuration).fadeOut(fadeOutDuration, function() {
            fadingSlider(startListItem, startListItem, fadeInDuration, displayDuration, fadeOutDuration);
        }); //#webmaster fade in, fade out, then recurse with start
    return;
  }
  else {
    currentListItem = currentListItem.next("li");
    if ((currentListItem.get(0)) === (currentListItem.parent().last("li").get(0))) {
      startListItem.fadeIn(fadeInDuration).delay(displayDuration).fadeOut(fadeOutDuration, function() {
          fadingSlider(startListItem, startListItem, fadeInDuration, displayDuration, fadeOutDuration);
    });
    return;
    }
    else {
        currentListItem.fadeIn(fadeInDuration).delay(displayDuration).fadeOut(fadeOutDuration, function() {
        fadingSlider(currentListItem, startListItem, fadeInDuration, displayDuration, fadeOutDuration);
        });
        return;
    }
  }
}

jQuery(window).load(function() {
  fadingSlider(null, jQuery("ul.sponsorSlider > li:first-child"), 300, 5000, 300);
});

编辑：我已经尝试重写脚本，使其更简单并可能消除错误，但遗憾的是错误仍在发生。这是新版本：

function fadingSlider(currentListItem, list, fadeInDuration, displayDuration, fadeOutDuration) {
    if(currentListItem){
        currentListItem = currentListItem.next("li");
    }
    if(!currentListItem || currentListItem.length === 0) {
    currentListItem=list.children("li:first-child");
    }
    currentListItem.fadeIn(fadeInDuration).delay(displayDuration).fadeOut(fadeOutDuration, function() {
        fadingSlider(currentListItem, list, fadeInDuration, displayDuration, fadeOutDuration);
    });
    return;
}

jQuery(window).load(function() {
  fadingSlider(null, jQuery("ul.sponsorSlider"), 300, 5000, 300);
});

并且html是这样的：

<section class="sponsors">
<h1>Sponsors</h1>
   <ul class="sponsorSlider">
      <li><a href=""><img src="/Standard/Images/SponsorLogos/aftonChemicalLogo.jpg" alt="" /></a></li>
      <li><a href=""><img src="/Standard/Images/SponsorLogos/dupontLogo.jpg" alt="" /></a></li>
      <li><a href=""><img src="/Standard/Images/SponsorLogos/flexicellLogo.jpg" alt="" /></a></li>
      <li><a href=""><img src="/Standard/Images/SponsorLogos/cFSauerLogo.jpg" alt="" /></a></li>
      <li><a href=""><img src="/Standard/Images/SponsorLogos/mWVLogo.jpg" alt="" /></a></li>
   </ul>
</section>

编辑：奇怪的是，我已经使用jQuery(window).load()追踪了这个问题。出于某种原因，这个事件发生了两次。我把它改成了window.onload，这个东西就像一个魅力。我认为这是jQuery的一个错误，但它看起来很奇怪。

Answer 1

我在你的剧本中看到'sponsor.js：'

startListItem.fadeIn(fadeInDuration).delay(displayDuration).fadeOut(fadeOutDuration, function() {
        fadingSlider(startListItem, startListItem, fadeInDuration, displayDuration, fadeOutDuration);

...在第二行中，您将startListItem传递两次，作为下一次迭代的currentListItem 和 startListItem。（这在您的代码中会发生两次。）

请改为尝试：

startListItem.fadeIn(fadeInDuration).delay(displayDuration).fadeOut(fadeOutDuration, function() {
        fadingSlider(startListItem, startListItem.next(), fadeInDuration, displayDuration, fadeOutDuration);

Answer 2

尝试将currentListItem添加到第一个参数中，如：

...
    currentListItem = currentListItem.next("li"); 
    if ((currentListItem.get(0)) === (currentListItem.parent().last("li").get(0))) { 
      startListItem.fadeIn(fadeInDuration).delay(displayDuration).fadeOut(fadeOutDuration, function() { 
          fadingSlider(currentListItem, startListItem, fadeInDuration, displayDuration, fadeOutDuration); 
...

编辑：

您可能需要将旧的currentListItem设置为startListItem，如：

startListItem = currentListItem;
currentListItem = currentListItem.next("li");

ALSO：

为什么你有href =“”作为img的属性？

Answer 3

看看我在这里用过的东西：

http://ladogana.eu/

http://ladogana.eu/cs_slide.js

这可能不是最好的方式，但它运作良好，可能是一个很好的起点！：d

Answer 4

问题在于jQuery（window）.load（）。出于某种原因，这个事件发射两次。使用window.onload来修复问题。

基本的li rotator显示两个“li”而不是一个

4 个答案: