jQuery圖片淡入淡出效果

我正在使用此代碼。當它改變圖像時，圖像淡出，然後另一圖像淡入，同時我可以看到背景顏色，這是我不想看到的。有沒有簡單的方法來淡化圖像，但在同一時間淡入下一個圖像，或另一種jQuery效果，如滑動圖像？我只是不想看到背景顏色。jQuery圖片淡入淡出效果

<script type="text/javascript"> 
$(document).ready(function(){ 
    var imgArr = new Array(// relative paths of images 
     'css/images/main_img.jpg', 
     'css/images/main_img_2.jpg', 
     'css/images/main_img_3.jpg', 
     'css/images/main_img_4.jpg', 
     'css/images/main_img_5.jpg' 
    ); 

    var preloadArr = new Array(); 
    var i; 

    /* preload images */ 
    for(i = 0; i < imgArr.length; i++){ 
     preloadArr[i] = new Image(); 
     preloadArr[i].src = imgArr[i]; 
    } 

    var currImg = 1; 
    var intID = setInterval(changeImg, 6000); 
    //added this so that the first image is always the first from the array 
    $('#main_content').css('background','url(' + preloadArr[0].src +') top center no-repeat'); 
    /* Main IMG */ 
    function changeImg(){ 
     $('#main_content').animate({opacity: 0}, 1000, function(){ 
      $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') top center no-repeat'); 
     }).animate({opacity: 1}, 1000); 
    } 
}); 
</script>

來源

2012-09-21 TooCooL

嘗試這樣的淡入淡出：http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/ –

@JohnKoerner演示看起來整潔，我要試試看日Thnx – TooCooL

由於要更改CSS背景，你不能這樣對一個元素。

您可以使用另一個div來實現此目的，該div將保存下一個背景圖像（在您的內容淡出之前），並使用none靜態css位置狀態和z-index屬性放置在#main_content元素下。

來源

2012-09-21 18:03:35 Stphane

只有一個元素無法達到此效果。您需要第二個元素放在另一個元素上並淡入。一旦它淡入，您可以隱藏後面的元素，但它甚至不是必需的。

看到這個tutotrial：http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/

來源

2012-09-21 18:02:52 Miro

在這裏，我已經編寫了使用Jquery創建簡單的JavaScript淡入淡出效果動畫的代碼，它可以幫助您創建出色的圖像動畫。

首先添加以下腳本來導入jquery.min.js，或者您可以自己託管此腳本。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> 
</script>

這裏寫

.fade和.fade IMG

.fade 
{ 
box-shadow:1px 1px 5px 2px #6DC83C; 
position:relative; 
width:500px; 
height: 300px; 
border-radius:19px; 
} 

.fade img 
{ 
border-radius:19px; 
position:absolute; 
left:0; 
top:0; 
}

，並使用下面的代碼的CSS代碼。

<script> $(function(){ $('.fade img:gt(0)').hide(); setInterval(function(){$('.fade :first-child').fadeOut(3000).next('img').fadeIn(3000).end().appendTo('.fade');}, 4000); }); </script>

然後對圖像使用下面的代碼。

<div class="fade"> 
<img src="image_1.gif"> 
<img src="image_2.gif"> 
<img src="image_3.gif"> 
</div>

來源

2013-12-12 05:16:22 shus

jQuery圖片淡入淡出效果

回答

相關問題