动画：jQuery vs CSS？

Question

我一直在构建一个自定义 jQuery "carousel"（滑块），它会连续迭代三个图像。到目前为止效果很好，但是我在尝试编写更改“#slideshow”的 'src' 属性同时触发 fadeIn 或 fadeOut 的代码时遇到了麻烦。

我的问题：我是否正确地解决了这个问题（使用 jQuery）或者我应该求助于切换 css 动画？

代码：

$(function() {

    var slides = ['img/slide1.jpg', 'img/slide2.jpg', 'img/slide3.jpg'];

    function changeSlide(arr) {
      $('#slideshow').attr('src', arr[0]);
      var i = 1;
      setInterval(function() {
        $('#slideshow').attr('src', arr[i]);
        i++;
        if (i >= arr.length) {
            i = 0;
        }
      }, 3500);
    }
    changeSlide(slides);
});

为了澄清，我的 HTML 轮播看起来像这样：

<div id="carousel">
  <img id="slideshow" src="img/slide1.jpg">
</div>

Answer 1

在我看来，

jQuery 比 CSS 好得多。你会很好。每个代码都有一些或其他可以稍后修复的错误。你只需要保持观察。就这些！

Answer 2

I've had trouble trying to write code that changes the 'src' attribute of '#slideshow' while simultaneously triggering fadeIn or fadeOut.

如果这是您想要的方式，可以通过以下方式完成：

1) 预加载所有图片以避免src-change-triggered加载。

2) 将 position:relative 添加到您的 #carousel，然后在您的滑块内添加一个额外的 img。

3) 将 position 更改为 absolute 两个 imgs

4) 隐藏一个'img'

在图像之间交替，所以：

1 - 您将隐藏的 src 更改为 "next" 图像

2 - 你同时淡出可见和淡入不可见

3 - 重复

Answer 3

尝试加载所有图像以避免连续请求图像，将 class 设置为 slideshow 代替 id，利用 complete 回调函数 .fadeIn() , .fadeOut() 在父元素中的第一张图片上，在回调中的下一张图片上

$(function() {
  function changeSlide(el) {
    $(el)
    .fadeIn(1500, function() {
      $(this).fadeOut(1500, function() {
        changeSlide(this.nextElementSibling || this.parentElement.firstElementChild)
      })
    })
  }
  changeSlide($(".slideshow:first"));
});

.slideshow {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="carousel">
  <img class="slideshow" src="http://lorempixel.com/50/50/nature" />
  <img class="slideshow" src="http://lorempixel.com/50/50/sports" />
  <img class="slideshow" src="http://lorempixel.com/50/50/cats" />
</div>

动画：jQuery vs CSS？

Animations: jQuery vs CSS?

javascript

css

jquery

slider

carousel