點擊按鈕幻燈片html內容

我想知道如果有人可以幫我一個jQuery的循環或腳本。當一個按鈕被點擊時，我會想動畫一個div在屏幕上滑動，當再次點擊時另一個div滑落。當再次點擊該按鈕時，另一個div等等，等等。點擊按鈕幻燈片html內容

下面是HTML標記香港專業教育學院迄今

 <section id="1-text" class="horizontal-gallery-text"> 
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis massa est, accumsan sed eleifend et, pulvinar sed lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam placerat enim et metus porta eu elementum augue ultricies. Fusce bibendum augue interdum neque fringilla at v</p> 
    </section> 


    <section id="2-text" class="vertical-gallery-text init-hidden"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis massa est, accumsan sed eleifend et, pulvinar sed lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam placerat enim et metus porta eu elementum augue ultricies. Fusce bibendum augue interdum neque fringilla at v</p> 
    </section> 


    <section id="3-text" class="horizontal-gallery-text init-hidden"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis massa est, accumsan sed eleifend et, pulvinar sed lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam placerat enim et metus porta eu elementum augue ultricies. Fusce bibendum augue interdum neque fringilla at v</p> 
    </section>

和JavaScript來完成：

var totalslides = '3'; 
     var slidenum = 0; 
     var slidenext = 0; 
     var slideType = ''; 
     $(function(){ 
      $('#gallery-next').data('counter',1); 
      $('#gallery-next').click(function() { 
       slidenum = parseInt($('#gallery-next').data('counter')); 
       slidenext = slidenum+1 
       slideType = $('#'+slidenum+'-slide').attr('class') 
       slideType = slideType.split('-')[0] 
       if (slideType=='horizontal') slideType='up'; 
       else slideType = 'right'; 
       //alert('Next slideType is: ' + slideType) 
       //hide(slide) is a jQueryUI function, so ensure you include that lib 
       $('#'+slidenext+'-slide').delay(500).delay(500).show('slide',{direction:slideType}, 1000); 
       $('#'+slidenum+'-slide').delay(100).fadeOut(100); 
       slidenum = slidenum % totalslides + 1; 
       $('#gallery-next').data('counter',slidenum); 
      }); 
     });

到目前爲止其滑動幾幻燈片但是卡上幾句的。想知道是否有人可以看到問題或想到更好的解決方案

來源

2013-02-21 Spade

你能不能把它放進一個的jsfiddle？ – Markasoftware 2013-02-21 23:34:11

我不知道問題是什麼，但我有不同的方式來做到這一點。

我假設你想要div 1向右滑動，然後div 2向下滑動，然後div 3向右滑動。

我使用css3過渡這種事情，而不是jQuery（我不喜歡jQuery）。你應該有以下的html代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     section{ 
      position:relative; 
      transition: all 0.1s; 
     } 
    </style> 
    <script type="text/javascript"> 
     var slidenum=0; 
     window.onload=function(){ 
      var button=document.getElementById('gallery-next'); 
      button.onclick=function(){ 
       var curslide=document.getElementById(slidenum+'-slide'); 
       switch(slidenum++){ 
        //replace the 700px with the value you want 
        case 1:curslide.style.top='700px';break; 
        case 2: 
        case 0:curslide.style.left='700px';break; 
       } 
       if(slidenum===3) button.addEventListener('click',function(){alert('we\'re already done')},false); 
      } 
     } 
    </script> 
</head> 
<body> 
    <!--<sections> here--> 
</body> 
</html>

這不是測試

來源

2013-02-21 23:38:23 Markasoftware

點擊按鈕幻燈片html內容

回答

相關問題