我想創建一個基本的jQuery 2圖像幻燈片。我不希望圖像相互融合，他們應該只是簡單地改變每一秒。在下面的jQuery代碼中，代碼包含淡入淡出。什麼是沒有衰落的正確的代碼？基本2圖像幻燈片在Jquery

<div id="manwrapper"> 
    <div> 
     <img src="images/index-man.png" width="500" height="788" alt="SS Image" /> 
    </div> 
    <div> 
     <img src="images/index-man2.png" width="500" height="788" alt="SS Image" /> 
    </div> 
</div> 
<!--end manwrapper-->

CSS

#container #manwrapper { 
    float: right; 
    margin-top: -280px; 
    z-index: 3; 
    position:relative; 
    width:500px; 
    height:788px; 
} 
#container #manwrapper > div { 
    position:absolute; 
}

的JavaScript

setInterval(function() { 
    $('#manwrapper > div:first') 
     .fadeOut(1000) 
     .next() 
     .fadeIn(1000) 
     .end() 
     .appendTo('#manwrapper'); 
}, 3000);

來源

2013-05-20 user2382538

你試圖刪除的行'.fadeOut（1000）'和'.fadeIn（1000）'？ – hexblot

是的，這確實有用。謝謝！ – user2382538

刪除'fadeOut(1000)和.fadeIn(1000)。

Demo

來源

2013-05-20 15:05:32

@ahul maindargi，@ Derek Henderson使用此代碼時，圖像會逐漸淡入彼此，圖像的左下角以相互排列的方式向上移動到中央。簡單地刪除線fadeout（1000）和.fadein（1000）效果最好。 – user2382538

是的，當您離開您的評論時，正在創建小提琴。我在小提琴中看到了這一點，並相應地改變了我的答案。 –

嘗試......

setInterval(function() { 
    $('#manwrapper > div:first') 
    .hide(1000) 
    .next() 
    .show(1000) 
    .end() 
    .appendTo('#manwrapper'); 
}, 3000);

來源

2013-05-20 15:05:06

基本2圖像幻燈片在Jquery

CSS

的JavaScript

回答

相關問題