Question

我一直在构建自定义jQuery＆＃34; carousel＆＃34; （滑块）连续迭代三个图像。到目前为止，它运作良好，但是我在编写改变“src”的代码方面遇到了麻烦。＆＃39;＃幻灯片＆＃39;的属性同时触发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

尝试最初加载所有图片以避免连续请求图片，将class设置为slideshow id，使用complete .fadeIn()的回调函数，{父元素中的第一个图像上的{1}}，回调中的下一个图像

.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;
}

Answer 2

在我看来，jQuery比使用CSS好得多。你很好。每个代码都有一些或其他可以在以后修复的bug。你必须要观察。这就是全部！

Answer 3

我在编写改变“src”的代码时遇到了麻烦。＆＃39;＃幻灯片＆＃39;的属性同时触发fadeIn或fadeOut。

如果这是您想要的方式，那么可以

完成
的方式：

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

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

3）将position的{{1}}改为absolute

4）隐藏一个＆＃39; img＆＃39;

图像之间交替，所以：

1 - 您将隐藏的img更改为＆＃34; next＆＃34;图像

2 - 你同时淡出可见和淡入隐形的

3 - 重复

动画：jQuery vs CSS？

3 个答案: