Snooks 幻灯片

debugcn 发表于 Dev

我喜欢火车

我看过幻灯片，我从那里获得了所有代码，但图像永远不会消失，它们被添加到旧图像之前，这使我的网站收费过高。有谁知道如何解决它？这是代码：

<style>
  .fadein { position:relative; width:500px; height:332px; }
  .fadein img { position:absolute; left:0; top:0; }
</style>

<div class="fadein">
  <img src="https://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
  <img src="https://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
  <img src="https://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>

$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});

在这个小提琴中，它有效，但在我的网站中，它没有。有什么帮助吗？

更多信息

此图像来自控制台，因此您可以看到创建的图像数量。
控制台中没有错误。

编辑

我从同一个站点获取了另一个幻灯片，但这样我就可以得到多个幻灯片，除了一件事之外，我得到了我想要的东西，fadeIn 被窃听了，它开始褪色，但随后它取消并更改为下一个图像。

<style>
.multipleslides { position:relative; height:332px; width:500px; float:left; }
.multipleslides > * { position:absolute; left:0; top:0; display:block; }
</style>
<div class="multipleslides">
  <img src="https://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
  <img src="https://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
  <img src="https://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>
<script>
      $('.multipleslides').each(function(){
        // scope everything for each slideshow
        var $this = this;
        $('> :gt(0)', $this).hide();
        setInterval(function(){$('> :first-child',$this).fadeOut().next().fadeIn().end().appendTo($this);}, 4000);
      })
    });
</script>

布雷特·德伍迪

我已经对您的代码进行了一些更新，以修复幻灯片。有一些语法错误，我还让选择器更容易阅读，imo。

$(document).ready(function() {
  $('.multipleslides').each(function() {
    // scope everything for each slideshow
    $(this).children('img').not(":eq(0)").hide();
   
    setInterval(function() {
  $(this).children('img').first().fadeOut().next().fadeIn().end().appendTo($(this));
    }.bind($(this)), 4000);
  });
});

.multipleslides {
  position: relative;
  height: 332px;
  width: 500px;
  float: left;
}

.multipleslides>* {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="multipleslides">
  <img src="https://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
  <img src="https://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
  <img src="https://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。