動畫：jQuery與CSS？

Question

我一直在構建自定義的jQuery“輪播”（滑塊），該游標連續迭代三個圖像。 到目前為止，它運行良好，但是我很難嘗試編寫代碼來更改“ #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

最初嘗試加載所有圖像，以避免連續請求圖像，將設置class替換為slideshow的id ，在父元素的第一個圖像上使用.fadeIn() .fadeOut() complete回調函數，在回調中使用下一個圖像

 $(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> 

Answer 2

我認為jQuery比使用CSS更好。 你過得很好。 每個代碼都有一些或其他錯誤，稍后可以修復。 你只需要觀察。 就這樣！

Answer 3

我在嘗試編寫更改“ #slideshow”的“ src”屬性同時觸發fadeIn或fadeOut的代碼時遇到了麻煩。

如果這是您要這樣做的方法，則可以這樣做：

1）預加載所有圖片，以避免src更改觸發加載。

2）添加position:relative對於#carousel的position：，然后在滑塊內添加其他img 。

3）將兩個img的position都更改為absolute position

4）隱藏一個“ img”

圖像之間交替顯示，因此：

1-將隱藏的src更改為“下一個”圖像

2-您同時淡出可見的和淡入的不可見的

3-重復