如何使此滑塊更平滑？

http://wildwoodtreeservices.wordpress.redcow.ca/

正如你可以看到它的功能，它從圖像轉變爲圖像，且對應的圖像變化相匹配，以圓一個不同的顏色...我唯一的問題是，它不是光滑。圖像以醜陋的方式加載，讓您看到背景圖像的時間是瞬間而不是圖像本身。

有什麼辦法可以使淡入/淡出過渡平滑，讓他們看不到任何背景？我是否必須在頁面加載或其他內容上緩存所有11個圖像？

在此先感謝

我的JS：

<script> 
    var sliderpics = []; 
    sliderpics[0] = "/wp-content/themes/REDCOW-WP/slider1.jpg"; 
    sliderpics[1] = "/wp-content/themes/REDCOW-WP/slider2.jpg"; 
    sliderpics[2] = "/wp-content/themes/REDCOW-WP/slider3.jpg"; 
    sliderpics[3] = "/wp-content/themes/REDCOW-WP/slider4.jpg"; 
    sliderpics[4] = "/wp-content/themes/REDCOW-WP/slider5.jpg"; 
    sliderpics[5] = "/wp-content/themes/REDCOW-WP/slider6.jpg"; 
    sliderpics[6] = "/wp-content/themes/REDCOW-WP/slider7.jpg"; 
    sliderpics[7] = "/wp-content/themes/REDCOW-WP/slider8.jpg"; 
    sliderpics[8] = "/wp-content/themes/REDCOW-WP/slider9.jpg"; 
    sliderpics[9] = "/wp-content/themes/REDCOW-WP/slider10.jpg"; 
    sliderpics[10] = "/wp-content/themes/REDCOW-WP/slider11.jpg"; 

    var currentImage = 0; 
    var currentCircle = 0; 

    function changeSliderImage() { 
     currentImage++; 
     currentCircle++; 
     if(currentImage > 10) currentImage = 0; 
     if(currentCircle > 10) currentCircle = 0; 

     $("#sliderpic").fadeOut(200, function() { 
      $(this).attr("src",sliderpics[currentImage]); 
      $("#circle" + currentCircle).attr("src","/wp-content/themes/REDCOW-WP/circle_active.png"); 
      $("#circle" + (currentCircle - 1)).attr("src","/wp-content/themes/REDCOW-WP/circle_inactive.png"); 
      if(currentCircle == 0){ 
       $("#circle10").attr("src","/wp-content/themes/REDCOW-WP/circle_inactive.png"); 
      } 
     }); 
     $("#sliderpic").fadeIn(200); 

     setTimeout(changeSliderImage, 5000); 
    } 

    $(document).ready(function($) { 
     setTimeout(changeSliderImage, 5000); 
    }); 

</script>

來源

2013-05-30 Samuel Stiles

不責備的圖像緩存。如果是緩存，那麼幻燈片放映從第二次開始就會消失。但是，它仍然具有相同的效果。所以這就是要做的意思。 – Sharky

我對圖像緩存並不十分了解。我只是想知道爲什麼它不是「褪色」和「淡出」，因爲它應該是...這是醜陋的圖像加載樣式:( –

沒有「應該」只有「如何編程「這是它的編程方式，它有200ms的完全淡出，200ms的淡入淡出和2000ms的超時。看看標記 – Sharky

爲什麼要重新發明輪子？嘗試this jquery plugin，它有一噸的可配置選項，並具有良好的瀏覽器支持。

來源

2013-05-30 15:16:29 Novocaine

我的老闆已經通知我，我從頭開始做這個工作，並且在上面添加了我的JS. –

不錯，我建議看一下插件。看看他們是怎麼做的，圖片在HTML頁面上開始，所以動畫沒有延遲，因爲所有的圖片都已經加載，這將防止出現一個問題，同樣如馬丁所說，切換'fadeIn'和' fadeout'圍繞 – Novocaine

我交換你的淡出和淡入，以及另兩個圖像之間：

HTML：

<img id="sliderpic0" class="sliderpic" alt="slider pic 1" src="[src]" style="display: inline;"> 
<img id="sliderpic1" class="sliderpic" alt="slider pic 1" src="[src]" style="display: inline;">

的Javascript：

function changeSliderImage(bleh) { 
    currentImage++; 
    currentCircle++; 
    if(currentImage > 10) currentImage = 0; 
    if(currentCircle > 10) currentCircle = 0; 

    var elemone = (bleh) ? $("#sliderpic0") : $("#sliderpic1"); 
    var elemtwo = (bleh) ? $("#sliderpic1") : $("#sliderpic0"); 

    $(elemone).fadeIn(200); 
    $(elemtwo).fadeOut(200, function() { 
     $(this).attr("src",sliderpics[currentImage]); 
     $("#circle" + currentCircle).attr("src","/wp-content/themes/REDCOW-WP/circle_active.png"); 
     $("#circle" + (currentCircle - 1)).attr("src","/wp-content/themes/REDCOW-WP/circle_inactive.png"); 
     if(currentCircle == 0){ 
      $("#circle10").attr("src","/wp-content/themes/REDCOW-WP/circle_inactive.png"); 
     } 
    }); 

    setTimeout(changeSliderImage(!bleh), 2000); 
}

真快腦圖示，應解決您的問題！ :)

編輯：哦，改變你的document.ready功能，看起來像這樣：

$(document).ready(function($) { 
    setTimeout(changeSliderImage(true), 2000); 
});

來源

2013-05-30 15:28:49 martinthebeardy

ht tp：//puu.sh/34tAn.png <--- http://puu.sh/34tAG.png < - –

如何使此滑塊更平滑？

回答

相關問題