Animations: jQuery vs CSS?

Animations: jQuery vs CSS?

本文关键字：CSS vs jQuery Animations      更新时间：2023-09-26

我一直在构建一个自定义的jQuery"轮播"(滑块(，它不断迭代三个图像。到目前为止，这运行良好，但是我在尝试编写更改"#slideshow"的"src"属性同时触发淡入或淡出的代码时遇到了麻烦。

我

的问题：我是否正确地解决了这个问题(使用 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>

尝试最初加载所有图像以避免连续请求图像，将设置class替换为slideshow id，利用.fadeIn()的回调函数complete，在父元素中的第一个图像上.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比使用CSS要好得多。你走得很好。每个代码都有一些或另一个错误，可以在以后修复。你只需要善于观察。就这样！

我在尝试编写更改"#slideshow"的"src"属性同时触发淡入或淡出的代码时遇到了麻烦。

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

1( 预加载所有图片以避免 src-change 触发加载。

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

3( 将两个img的position更改为absolute

4(隐藏一个"img">

在图像之间交替，因此：

1 - 您将隐藏图像的src更改为"下一个"图像

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

3 - 重复

相关文章：