jQuery自動輪播

我的自動輪播不起作用。我嘗試使用setInterval，如下所示，但它仍然無效。我真的不知道爲什麼。它在語法上是正確的，我認爲它在邏輯上也不錯。請幫忙。jQuery自動輪播

HTML：

<div class = "slidingPhotos" align="center"> 
    <div class = "slide active-item"> 
     <div class = "photo1"> 
      <img src = "Images/mainImage.jpg"></img> 
     </div> 
     <div class = "description"> 
      <h3> Welcome to O-Grocery! Your #1 Online Grocery Store </h3> 
     </div> 
    </div> 
    <div class = "slide "> 
     <div class = "container"> 
      <div class = "photo1"> 
       <img src = "Images/mainImage3.jpg"></img> 
      </div> 
      <div class = "description"> 
       <h3> You have a thousand products to choose from at O-Grocery! </h3> 
      </div> 
     </div> 
    </div> 
    <div class = "slide"> 
     <div class = "container"> 
      <div class = "photo1"> 
       <img src = "Images/mainImage2.jpg"></img> 
      </div> 
      <div class = "description"> 
       <h3> You can guarantee 100% freshness of goods! </h3> 
      </div> 
     </div> 
    </div> 
</div> 

<div class ="footer" align="center"> 
    <div class = "dots"> 
     <div class = "arrow-prev"> 
      <a href ="#"><img src = "Images/arrow-prev.png"></img></a> 
     </div> 
     <ul class="slider-dots"> 
      <li class="dot active-dot">&bull;</li> 
      <li class="dot">&bull;</li> 
      <li class="dot">&bull;</li> 
     </ul> 
     <div class = "arrow-next"> 
      <a href ="#"><img src = "Images/arrow-next.png"></img></a> 
     </div> 
    </div> 
</div>

的jQuery：

setInterval(function() 
{ 
var currentSlide = $('.active-slide'); 
var nextSlide = currentSlide.next(); 

var currentDot = $('.active-dot'); 
var nextDot = currentDot.next(); 

if (nextSlide.length === 0) { 
    nextSlide = $('.slide').first(); 
    nextDot = $('.dot').first(); 

currentSlide.fadeOut(500).removeClass('active-slide'); 
setTimeout(function(){ nextSlide.addClass('active-slide').fadeIn('slow'); }, 500); 

currentDot.removeClass('active-dot'); 
nextDot.addClass('active-dot'); 
}, 5000);

來源

2014-10-26 Jessie

以何種方式它不工作？控制檯中是否有錯誤？你期望它做什麼，取而代之的是什麼？（*編輯* - JavaScript代碼有語法錯誤;您應該先修復這些錯誤。） – Pointy 2014-10-26 13:49:18

什麼錯誤？它不會自動淡入和淡出。 – Jessie 2014-10-26 13:55:04

如果這確實是您使用的代碼，您將看到瀏覽器控制檯中報告的語法錯誤。如果它*不是真的代碼，那麼你應該擺脫它，並用真實的東西代替它。 – Pointy 2014-10-26 13:59:31

你有一個語法錯誤

setInterval(function() 
{ 
var currentSlide = $('.active-slide'); 
var nextSlide = currentSlide.next(); 

var currentDot = $('.active-dot'); 
var nextDot = currentDot.next(); 

if (nextSlide.length === 0) { 
    nextSlide = $('.slide').first(); 
    nextDot = $('.dot').first(); 
} // <- THIS is missing in your code 

currentSlide.fadeOut(500).removeClass('active-slide'); 
setTimeout(function(){ nextSlide.addClass('active-slide').fadeIn('slow'); }, 500); 

currentDot.removeClass('active-dot'); 
nextDot.addClass('active-dot'); 
}, 5000);

http://jsfiddle.net/evilbuck/aj0nuyLk/

來源

2014-10-26 15:51:41

jQuery自動輪播

回答

相關問題