點擊最後一張幻燈片上的下一個結尾幻燈片

我一直在使用javascript/jquery處理我的第一個滑塊，滑塊本身正在工作，除非當我在最後一張圖片上時，如果我點擊下一步，它會進入空白區並停止。如果我只是讓它變得有趣，它會自行循環並返回到第一張幻燈片。我嘗試過製作一個JSFiddle，但由於某種原因，我無法在小提琴中工作，所以他們可能會在啓動過程中出現問題，我不確定。如果我在最後一張幻燈片上單擊下一個按鈕，它就可以在我的本地網站上正常工作，而不會再出現問題。點擊最後一張幻燈片上的下一個結尾幻燈片

HTML5

<body> 

    <div class="wrapper"> 
     <div id="slider"> 
      <img id="1" src="Images/slide_image1.jpg" alt="HDTV"> 
      <img id="2" src="Images/slide_image2.jpg" alt="Furniture"> 
      <img id="3" src="Images/slide_image3.jpg" alt="Electronics"> 
     </div> 

     <a href="#" class="left" onclick="prev(); return false;">Previous</a> 
     <a href="#" class="right" onclick="next(); return false;">Next</a> 
    </div> 

    <script src="JS/jquery.js"></script> 
    <script src="JS/slider.js"></script> 

</body>

CSS3

.wrapper { 
    width: 990px; 
    margin: 0 auto; 
} 

#slider{ 
    width: 990px; 
    height: 270px; 
    overflow: hidden; 
    margin: 30px auto; 
} 

#slider > img { 
    width: 990px; 
    height: 270px; 
    float: left; 
    display: none; 
} 

a { 
    padding: 5px 10px; 
    background-color: #F0F0F0; 
    margin-top: 30px; 
    text-decoration: none; 
    color: #666; 
} 

a.left { 
    float: left; 
} 

a.right { 
    float: right; 
}

的JavaScript

sliderInt = 1; 
sliderNext = 2; 

$(document).ready(function(){ 
    $('#slider > img#1').fadeIn(300) 
    startSlider(); 
}); 

function startSlider(){ 
    count = $('#slider > img').size(); 

    loop = setInterval(function(){ 

     if(sliderNext > count){ 
      sliderNext = 1; 
      sliderInt = 1; 
     } 

     $('#slider > img').fadeOut(300); 
     $('#slider > img#' + sliderNext).fadeIn(300); 

     sliderInt = sliderNext; 
     sliderNext = sliderNext + 1; 

    }, 3000) 
} 

function prev() { 
    newSlide = sliderInt - 1; 
    showSlide(newSlide); 
} 

function next() { 
    newSlide = sliderInt + 1; 
    showSlide(newSlide); 
} 

function stopLoop() { 
    window.clearInterval(loop); 
} 

function showSlide(Id) { 
    stopLoop(); 
    if(Id > count){ 
      sliderNext = 1; 
      sliderInt = 1; 
     } 

     else if(Id < 1){ 
      Id = count; 
     } 

     $('#slider > img').fadeOut(300); 
     $('#slider >img#' + Id).fadeIn(300); 

     sliderInt = Id; 
     sliderNext = Id + 1; 
     startSlider(); 
} 

$('#slider > img').hover(
    function() { 
     stopLoop(); 
    }, 
    function(){ 
     startSlider(); 
    } 
);

來源

2014-01-30 SecretWalrus

這是一個[的jsfiddle（http://jsfiddle.net/ b5MrH /）代碼。 –

噢，謝謝，我通常不會因爲某些原因而工作。 – SecretWalrus

的問題是在showSlide()的功能可按if-else語句。它應該是：

if (Id > count) { 
    Id = 1; 
} else if (Id < 1) { 
    Id = count; 
}

jsfiddle

BTW：我想你可以簡化你的HTML和JQuery這樣的代碼：jsfiddle

來源

2014-01-31 17:06:43

是的，這是問題，這是一個非常酷的技巧，你展示了簡化我的HTML和JQuery。我在Web開發方面有點新，所以我正在努力學習如何編寫更短，更高效的代碼。特別是在HTML的一面，在更好的HTML編碼方面似乎並沒有太多的信息。 – SecretWalrus

我沒有在「簡化」jsfiddle中解釋任何內容。如果您對該代碼有任何疑問，請對此答案留言。 –

點擊最後一張幻燈片上的下一個結尾幻燈片

回答

相關問題