幻燈片顯示淡入淡出效果正在加深

Question

我的圖像滑塊起作用，除了第一次圖像旋轉時，一個圖像突然出現。在下面的通行證是光滑的？

Javascript代碼。

var imgArray = [ 
    'about.jpg', 
    'about2.jpg', 
    'about3.jpg'], 
    curIndex = 0; 
    imgDuration = 5000; 

function slideShow() { 
    document.getElementById('slider').className += "fadeOut"; 
    setTimeout(function() { 
     document.getElementById('slider').src = imgArray[curIndex]; 
     document.getElementById('slider').className = ""; 
    },1000); 
    curIndex++; 
    if (curIndex == imgArray.length) { curIndex = 0; } 
     setTimeout(slideShow, imgDuration); 
} 
slideShow(); 

CSS代碼。

#slider { 
    opacity:1; 
    transition: opacity 1s; 
    float:left; 
    max-width:100%; 
    height:auto; 
    margin-right:20px; 
    border-radius:4px 4px 4px 4px; 
    border-color:#CCC; 
    border-style:ridge; 
    border-width:2px; 
} 

#slider.fadeOut { 
    opacity:0; 
} 

我的網站。 See the effect on my site

這是唯一涉及的html。

img id="slider" src="images/other-images/blank.jpg" 

您可以在適當的位置查看網站。 Test Site

Answer 1

這是因爲圖像加載。

您可以創建一個jQuery插件象下面這樣：

$.fn.preload = function() { 
    this.each(function(){ 
     $('<img/>')[0].src = this; 
    }); 
} 

$(['about.jpg','about2.jpg','about3.jpg']).preload(); 

所以，你的代碼最終會被這樣的：

$.fn.preload = function() { 
    this.each(function(){ 
     $('<img/>')[0].src = this; 
    }); 
} 

var imgArray = [ 
'about.jpg', 
'about2.jpg', 
'about3.jpg'], 
curIndex = 0; 
imgDuration = 5000; 

imgArray.preload(); 

function slideShow() { 
    document.getElementById('slider').className += "fadeOut"; 
    setTimeout(function() { 
     document.getElementById('slider').src = imgArray[curIndex]; 
     document.getElementById('slider').className = ""; 
    },1000); 
    curIndex++; 
    if (curIndex == imgArray.length) { curIndex = 0; } 
    setTimeout(slideShow, imgDuration); 
} 
slideShow(); 

Iv'e沒有測試，但是這表明你，你需要首先預加載圖像。

一個庫，我喜歡用的是貓頭鷹旋轉木馬是很容易設置&使用https://owlcarousel2.github.io/OwlCarousel2/

編輯 只要確保你在正確引用圖片：

var imgArray = [ 
'about.jpg', 
'about2.jpg', 
'about3.jpg'] 

所以這可能是：

var imgArray = [ 
'/path/to/about.jpg', 
'/path/to/about2.jpg', 
'/path/to/about3.jpg']