帶按鈕的自動幻燈片

Question

我試圖做一個帶按鈕的自動幻燈片。我正在做間隔和點擊功能。

我正在使用此代碼，但它不起作用，並且DIV同時出現。有什麼問題？

這裏的HTML：

<div class="cajas" id="home-caja"> 


      <div class="apartadosh"> 

       <div class="diva"> 
        <div class="espacioimagen"> 
         <div class="fancyosop"> 
          <p class="fancytitlep">News</p> 
         </div> 
         <div id="contentaboutp"> 
          <p class="fancytextp">aaaaaaaaaaa</p> 
         </div> 
         <img src="../uploads/inphyxwords.png" class="fotohome" /> 
        </div> 
       </div> 

       <div class="divb"> 
        <div class="espacioimagen"> 
         <div class="fancyosop"> 
          <p class="fancytitlep">Web Online!</p> 
         </div> 
         <div id="contentaboutp" style="display:block"> 
          <p class="fancytextp">bbbbbbbbbbbbb</p> 
         </div> 
         <img src="../uploads/41744f.png" class="fotohome" /> 
        </div>       
       </div> 

      </div> <!-- Apartados --> 

      <div class="navh"> 
       <ul> 
        <li><a href="#news" data-id="a">News</a></li> 
        <li><a href="#webonline" data-id="b">Web Online!</a></li> 
       </ul> 
      </div> 

</div> <!-- Home caja --> 

這裏Jquery的：

var pregunta = "a"; //Variable to check what DIV is visible 
var escondido = $(".apartadosh > div:gt(0)"); 
$(escondido).hide(); //Hides the second DIV 
var interval = undefined; 


$(document).ready(function() { 
    interval = setInterval(getNext, 2000); //Interval function 
    $('.navh ul li a').on('click', getDiv); //When the button is clicked 
}); 


function getDiv() { 

     var target = '.div' + $(this).attr("data-id"); 

     if ($(this).attr("data-id") === pregunta) { //Check if you're clicking for the visible DIV 
      return 0} 

     else { 

      if (activa === "0") { 
       if ($(this).attr("data-id") === 'b') { //Set the variable to the current DIV ID 
        pregunta = "b"; } 
       if ($(this).attr("data-id") === 'a') { 
        pregunta = "a"; } 
       $(".apartadosh > div").fadeOut(1000); 
       $(target).fadeIn(1000); 
      } 
     } 

} 


function getNext() { 

    var $curr = $('.apartadosh div:visible'), 
     $next = ($curr.next().length) ? $curr.next() : $('.apartadosh div').first(); 

    transition($curr, $next); 

} 


function transition($curr, $next) { 
    clearInterval(interval); 

    $curr.fadeOut(1000); 
    $next.fadeIn(1000); 
    }); 
} 

Answer 1

我做到了！下面的代碼，如果有人想自動播放幻燈片按鈕：d

// Home slideshow 

var interval = undefined; 

$(document).ready(function() { 

    var escondido = $(".apartadosh > div:gt(0)"); 
    $(escondido).hide(); 
    var pregunta = "a"; 
    interval = setInterval(getNext, 5000); 

    $(".navh ul li a").click(function() { 

     var target = '.div' + $(this).attr("data-id"); 

     if ($(this).attr("data-id") === pregunta) { 
      return 0} 

     else { 
      if ($(this).attr("data-id") === 'b') { 
       pregunta = "b"; } 
      if ($(this).attr("data-id") === 'a') { 
       pregunta = "a"; } 
      $(".apartadosh > div").fadeOut(1000); 
      $(target).fadeIn(1000); 
      clearInterval(interval); 
      interval = setInterval(getNext, 5000); 
     } 

    }) 


    function getNext() { 

     var $curr = $('.apartadosh > div:visible'), 
      $next = ($curr.next().length) ? $curr.next() : $('.apartadosh div').first(); 

     transition($curr, $next); 

    } 


    function transition($curr, $next) { 
     $curr.fadeOut(1000).appendTo('.apartadosh'); 
     $next.fadeIn(1000); 
     if ($curr.attr("class") === 'divb') { 
      pregunta = "a"; } 
     if ($curr.attr("class") === 'diva') { 
      pregunta = "b"; } 
    } 

});