点击最后一张幻灯片上的下一个结尾幻灯片

我一直在使用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中解释任何内容。如果您对该代码有任何疑问，请对此答案留言。 –

点击最后一张幻灯片上的下一个结尾幻灯片

回答

相关问题