基本的li旋转器显示两个而不是一个

basic li rotator displaying two "li"s instead of one

本文关键字：两个 一个 li 旋转 显示      更新时间：2023-09-26

我有一个简单的图像滑块，它在ul中旋转，并一个接一个地显示每个li。最近，它开始显示两张图片，而不是一张。它以如下模式显示图像(有5个"li"):none& 1,1 & 2,2 & 3,3 & 4,4 &5，然后是1&5，然后是1& 2,2 &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。加载后，这玩意儿就像施了魔法一样好用。我认为这是jQuery的一个bug，但它看起来很奇怪。

我看到你的脚本'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);

尝试将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设置为startlisttitem，如:

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

:

为什么要用href="作为img的属性?

看看我在这里用了什么:

http://ladogana.eu/

http://ladogana.eu/cs_slide.js

这可能不是最好的方法，但它工作得很好，可能是一个很好的起点!: D

问题在于jQuery(window).load()。由于某种原因，这个事件触发了两次。使用窗口。Onload可以解决这个问题。

相关文章：