使用jquery製作照片幻燈片

我目前正在嘗試創建基本圖像幻燈片，並遇到一些問題。圖像突然變化，然後淡入到第一張圖像。然後，他們完全循環照片後，它會像原來一樣工作，並簡單地在圖像之間淡入淡出。在過去的幾個小時裏，我一直在玩這個遊戲，我不確定該從哪裏出發。我希望圖像做的就是淡入幻燈片。使用jquery製作照片幻燈片

這裏有一個小提琴鏈接 jsfiddle.net/7knnb92s

腳本

$("#slideshow > div:gt(0)").hide(); 
setInterval(function() { 
    $('#slideshow > div:first') 
    .fadeOut(1000) 
    .next() 
    .fadeIn(1000) 
    .end() 
    .appendTo('#slideshow'); 
}, 2000);

HTML

<center> 
<div id="slideshow" class="Photos"> 
<div> 
<img src="Image1.jpg" alt = "Image1" width="1000" height="600"> 
</div> 
<div> 
<img src="Image2.jpg" alt = "Image2" width="1000" height="600"> 
</div> 
<div> 
<img src="Image3.jpg" alt = "Image3" width="1000" height="600"> 
</div> 
<div> 
<img src="Image4.jpg" alt = "Image4" width="1000" height="600"> 
</div> 
</center>

CSS

#slideshow { 
    margin: 50px auto; 
    position: center; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
} 

#slideshow > div { 
    position: absolute; 
    top: 55px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

來源

2014-11-21 Matt

你能提供的jsfiddle的問題，好嗎？ – 2014-11-21 01:31:40

http://jsfiddle.net/7knnb92s/我只是將圖像文件替換爲我在線的圖像，但現在它不會循環。 – Matt 2014-11-21 01:57:26

似乎工作正常。你忘了在環境中請求jQuery。 JSFiddle更新：http://jsfiddle.net/7knnb92s/1/ – 2014-11-21 02:19:52

檢查該F閒逛。它完美無瑕。 enter code here

var i = 0; 
 
var num = $('#slideshow div').length-1; 
 
$('#slideshow div:eq('+i+')').fadeIn('fast'); 
 
setInterval(function() { 
 
    $('#slideshow div:eq('+i+')').fadeOut(1000); 
 
    i = i<num?i+1:0; 
 
    $('#slideshow div:eq('+i+')').fadeIn(1000); 
 
}, 3000);

#slideshow { 
 
    margin: 50px auto; 
 
    position: center; 
 
    width: 240px; 
 
    height: 240px; 
 
    padding: 10px; 
 
    overflow: hidden; 
 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); 
 
} 
 
#slideshow > div { 
 
    display:none; 
 
    position: absolute; 
 
    top: 55px; 
 
    left: 10px; 
 
    right: 10px; 
 
    width: 240px; 
 
    height: 240px; 
 
    bottom: 10px; 
 
}

<center> 
 
    <div id="slideshow" class="Photos"> 
 
     <div> 
 
      <img src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/1422563_738192282896557_6327050085052054804_n.jpg?oh=ed991fb626a0a2cff6e19cb48955d064&oe=54E2A201&__gda__=1427388096_818ee4b1966fb5ec7f43d51bf02f0b33" alt="Image1" width="1000" height="600"> 
 
     </div> 
 
     <div> 
 
      <img src="https://scontent-b-atl.xx.fbcdn.net/hphotos-xpa1/v/t1.0-9/10383629_738202862895499_6804583242811023005_n.jpg?oh=ed4f54107f44ec1fc588f3659ee3d6a2&oe=55141903" alt="Image2" width="1000" height="600"> 
 
     </div> 
 
     <div> 
 
      <img src="https://scontent-b-atl.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/10429225_738197656229353_8756451198102185139_n.jpg?oh=0ef2e3c331300ba3c6dd1194c40d8400&oe=54D5C076" alt="Image3" width="1000" height="600"> 
 
     </div> 
 
     <div> 
 
      <img src="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xfa1/v/t1.0-9/10374994_738202209562231_9201950715066845451_n.jpg?oh=0aaad6132a69d47f75d33eb758605054&oe=54D5E109&__gda__=1427247167_560dc112c3b9ae2cd0c158a3f91556cf" alt="Image4" width="1000" height="600"> 
 
     </div> 
 
</div> 
 
</center>

來源

2014-11-21 04:33:57 OnlyMAJ

使用jquery製作照片幻燈片

回答

相關問題