Question

我正在尝试使用带有fadeIn和fadeOut方法的JS创建幻灯片。问题是下一张图片会淡入，但前一张图片不会淡出。

我想在JS代码中切换位置样式，这样当网站加载容器时，它将接受内部的内容并适当缩放。

我创建了一个切换位置样式的函数。

这是我到目前为止所得到的：

＆＃13;

$(document).ready(function() {
  $("#slideshow > div:gt(0)").hide();

  function toggle() {
    document.getElementById("img").style.position = "absolute";
  }

  setInterval(function() {
    $('#slideshow > div:first')
      .toggle()
      .fadeOut(1500)
      .next()
      .fadeIn(1500)
      .end()
      .appendTo('#slideshow');
  }, 5000);
});

＆＃13;

#slideshow {
  position: relative;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.center-img {
  image-orientation: from-image;
  position: relative;
  margin: auto;
  width: 100%;
  height: auto;
}

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>

<div id="slideshow">
  <div id="slideshow_div"> <img class="center-img" src="http://i.imgur.com/RRUe0Mo.png"> </div>
  <div id="slideshow_div"> <img class="center-img" src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"> </div>
</div>

＆＃13;

我只是不确定如何在淡入下一个图像之前让图像淡出。

先谢谢

Answer 1

只需删除切换并执行fadeout回调函数中的下一步：

这是解决方案

＆＃13;

$(document).ready(function() {
  $("#slideshow > div:gt(0)").hide();

  function toggle() {
    document.getElementById("img").style.position = "absolute";
  }

  setInterval(function() {
    $('#slideshow > div:first')
      .fadeOut(1500,function() {
          // Animation complete.
          $(this).next().fadeIn(1500)
          .end()
          .appendTo('#slideshow');
      })
  }, 5000);
});

＆＃13;

#slideshow {
  position: relative;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.center-img {
  image-orientation: from-image;
  position: relative;
  margin: auto;
  width: 100%;
  height: auto;
}

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>

<div id="slideshow">
  <div id="slideshow_div"> <img class="center-img" src="http://i.imgur.com/RRUe0Mo.png"> </div>
  <div id="slideshow_div"> <img class="center-img" src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"> </div>
</div>

＆＃13;

Answer 2

前一个不会消失

在您的代码中：

$('#slideshow > div:first')
  .toggle()
  .fadeOut(1500)

查看文档 - http://api.jquery.com/toggle/ - 您正在隐藏它，只有fadeOut （在一个不可见的元素上）

Answer 3

首先，有几个具有相同ID的元素是不行的。

其次，为了产生交叉渐变效果，您必须将图像放在彼此的顶部并删除toggle（）函数：https://jsfiddle.net/0rxqbuu5/

那是你的目标吗？

$(document).ready(function() {
  $("#slideshow > div:gt(0)").hide();

  function myToggle() {
    $(".center-img").css("position","absolute");
  }

  setInterval(function() {
$('#slideshow > div:first')
  .fadeOut(1500,function(){myToggle()})
  .next()
  .css("z-index",100)
  .fadeIn(1500)
  .end()
  .appendTo('#slideshow');
  }, 5000);
});

#slideshow {
  position: relative;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}

.slideshow_div {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
}
.center-img {
  image-orientation: from-image;
  position: relative;
  margin: auto;
  width: 100%;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
  <div class="slideshow_div"> <img class="center-img" src="https://pixabay.com/static/uploads/photo/2014/07/27/20/29/landscape-403165_960_720.jpg"> </div>
  <div class="slideshow_div"> <img class="center-img" src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"> </div>
</div>

Answer 4

catalog/controller/common/language.php

在div处设置图像，这样你就可以淡出它了

如何淡化JS中的图像？

4 个答案: