帶有下一個/上一個按鈕的CSS/jQuery全屏幕幻燈片

Question

我有一個全屏幕網站，我正在使用5個div在1960年的9800一個容器中有一個「上一個」和「下一個」按鈕。

目標是將按鈕保持不變，滑過1960年到下一張幻燈片。現在我已經完成了一切設置和工作，所有事情都已經佈置完畢，基本的動畫工作正常，但我對一些事情充滿好奇;

1. 隨着我試圖找出如何使它所以當你在第一張幻燈片有它說「回家」和「下一個」，然後按鈕說你點擊「下一步」並且新的幻燈片進來了，我需要將「回家」改爲「之前」。然後在最後一張幻燈片上反過來。

2. 另外，即使在幻燈片5之後，如果點擊下一步，我將如何放入「開始」和「結束」原因。

當前的jquery：

$(document).ready(function() { 
    $(".next_p").click(function() { 
     $("#projects").animate({ 
      marginLeft: "-=1960px" 
     }); 
    }); 
}); 

Answer 1

的一種可能的解決方案（多種解決方案存在）：

DEMO

的Html

<a href="#" class="prev_p">Previous</a> 

<a href="#" class="start">Start</a> 

<a href="#" class="next_p">Next</a> 
    <div id="projects"> 
     <div class="slide gray"></div> 
     <div class="slide white"></div> 
     <div class="slide black"></div> 
     <div class="slide gray"></div> 
     <div class="slide white"></div> 
     <div class="slide black"></div> 
    </div> 

CSS

#projects { 
    position:relative; 
    float:left; 
    width:9800px; 
    height:300px; 
    overflow:hidden; 
} 
.slide { 
    position:relative; 
    float:left; 
    border:1px solid black; 
    width:1960px; 
    height:300px; 
} 
.gray { 
    background-color:gray; 
} 
.white { 
    background-color:white; 
} 
.black { 
    background-color:black; 
} 

jQuery的

$(function() { 
    $(".prev_p").hide(); 
    $(".start").hide(); 
    var slidewidth = 1960; //in Pixels 
    var animationSpeed = 300; //in Milliseconds 

    //start page 
    $(".start").click(function() { 
     $("#projects").animate({ 
      marginLeft: "0px" 
     }, animationSpeed, function() { 
      $(".start").hide(); 
      $(".prev_p").hide(); 
      $(".next_p").show(); 
     }); 
    }); 
    //next page 
    $(".next_p").click(function() { 
     $("#projects").animate({ 
      marginLeft: "-=" + slidewidth + "px" 
     }, animationSpeed, function() { 
      //check location after animation and hide controls 
      //that no longer serve a purpose and add those that do 
      var marginLeft = $("#projects").css("margin-left"); 
      var numberOfSlides = 5; 
      if (marginLeft == "-" + (slidewidth * (numberOfSlides - 2)) + "px") { 
       $(".next_p").hide(); 
      } 
      if (marginLeft != "0px") $(".start").show(); 
      else $(".start").hide(); 
      $(".prev_p").show(); 
     }); 

    }); 
    //previous page 
    $(".prev_p").click(function() { 
     $("#projects").animate({ 
      marginLeft: "+=" + slidewidth + "px" 
     }, animationSpeed, function() { 
      //check location after animation and hide controls 
      //that no longer serve a purpose and add those that do 
      var marginLeft = $("#projects").css("margin-left"); 
      if (marginLeft == "0px") { 
       $(".prev_p").hide(); 
       $(".start").hide(); 
      } else { 
       $(".start").show(); 
      } 
      $(".next_p").show(); 
     }); 

    }); 
});