首页 文章

幻灯片之间简单的jQuery幻灯片转换

提问于
浏览 次
0

我使用jQuery制作了幻灯片，一切都按预期工作......除了转换 . 截至目前，幻灯片显示我的div并添加/删除img，直到幻灯片结束（此时幻灯片显示“消失”） . 这一切都很好 . 但是，我希望过渡效果不那么刺耳 . 这就是我到目前为止所拥有的 .

HTML：

<div class="slideShow" id="slideshow">
<div class="showImg">
    <img src="http://paulmarique.be/dropbox/img/01.jpg" alt="" />
</div>
<div>
    <img src="http://paulmarique.be/dropbox/img/02.jpg" alt="" />
</div>
<div>
    <img src="http://paulmarique.be/dropbox/img/03.jpg" alt="" />
</div>

CSS：

body {
  background-color: #e7e7e7;
  text-align: center;
}

.slideShow > div:not(.showImg) {
  display: none;
}

.showImg {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}
.slideShow {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

jQuery的：

$(function() {
     setTimeout(playSlideShow, 3000);

     function playSlideShow() {
       $('.showImg').removeClass('showImg').next('div').addClass('showImg');
   setTimeout(playSlideShow, 3000);
  }
 });

Codepen：http://codepen.io/anon/pen/vGYKrO

它根本没有转变 . 我不明白我做错了什么，但我确信有人会很快指出一个愚蠢的错误 . 任何帮助将不胜感激 .

*注意：我应该补充一点，我不想为此使用任何插件 .

javascript jquery html css css3

1 回答

  • 1

    两件事情：

    • CSS display 属性无法转换，无论是否 . 但是，您可以将 visibility 属性与 opacity （例如）一起转换，以获得良好的过渡效果 . 提示： visibility 的转换声明将具有 0ms 的持续时间和不同的延迟，具体取决于元素的状态 .

    • 您正在更改 .showImg 元素的CSS属性（通过更改元素上的类），但是您将 transition 声明添加到 .slideshow 元素 . 必须将 transition 属性应用于已更改CSS的元素 .

    回复于

相关问题