jQuery图像交叉淡入淡出不起作用答案

【问题标题】：jQuery Image Crossfade not workingjQuery图像交叉淡入淡出不起作用
【发布时间】：2016-09-12 19:02:07
【问题描述】：

您好，我们的 jQuery 图像淡入淡出设置有什么问题！？ http://tips.techmatemn.com/

HTML

<div class="hero-cycler">
    <img class="active" alt="Tips qualified Client 1" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/hero-bk-1.jpg">
    <img alt="Tips qualified Client 2" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/hero-bk-2.jpg">
</div>

CSS

.hero-cycler{position:relative;}
.hero-cycler img{position:absolute;z-index:1}
.hero-cycler img.active{z-index:3}

脚本

<script> // homepage client images
function cycleImages(){
      var $active = $('.hero-cycler .active');
      var $next = ($active.next().length > 0) ? $active.next() : $('.hero-cycler img:first');
      $next.css('z-index',2);//move the next image up the pile
      $active.fadeOut(1500,function(){//fade out the top image
      $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
          $next.css('z-index',3).addClass('active');//make the next image the top one
      });
    }

$(document).ready(function(){
// run every 7s
setInterval('cycleImages()', 7000);
})
</script>

谢谢！

【问题讨论】：

你在看什么？究竟是什么行不通？有没有错误？此外，如果您只是在两个图像之间循环，则可以大大简化这一过程。
一旦我们完成这项工作，我们将拥有更多图像。我看到第一张图。我的猜测是脚本不起作用，因为图像没有循环。
检查浏览器控制台中的错误，这总是一个好的开始。我会坚持这个，看看会发生什么。

标签： javascript jquery image cycle cross-fade

【解决方案1】：

改变调用函数的方式。您的 setInterval 使用已折旧且通常不推荐使用的字符串参数。使用如下所示的标准方法正确运行函数。

将setInterval('cycleImages()', 7000); 更改为setInterval(cycleImages, 7000);

带有通用填充图像的完整工作副本：

function cycleImages() {
  var $active = $('.hero-cycler .active');
  var $next = ($active.next().length > 0) ? $active.next() : $('.hero-cycler img:first');
  $next.css('z-index', 2); //move the next image up the pile
  $active.fadeOut(1500, function() { //fade out the top image
    $active.css('z-index', 1).show().removeClass('active'); //reset the z-index and unhide the image
    $next.css('z-index', 3).addClass('active'); //make the next image the top one
  });
}

$(document).ready(function() {
  // run every 7s
  setInterval(cycleImages, 7000);
})

.hero-cycler {
  position: relative;
}
.hero-cycler img {
  position: absolute;
  z-index: 1
}
.hero-cycler img.active {
  z-index: 3
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hero-cycler">
  <img class="active" alt="Tips qualified Client 1" src="https://unsplash.it/300/200/?image=0">
  <img alt="Tips qualified Client 2" src="https://unsplash.it/300/200/?image=1">
</div>

（快速检查浏览器控制台会向您显示错误：Uncaught ReferenceError: cycleImages is not defined，这对您的问题非常有帮助）

【讨论】：