Jquery滑下滑塊

我想創建一個滑塊。這裏我們有3個不同背景顏色的div。在下面的代碼中，3格一個接一個地滑下來，然後向上滑動並永遠運行。住在這裏：http://jsfiddle.net/kraditya/egs1br26/3/ 但我只想要3格的幻燈片一個接一個地下滑。這怎麼可能？請幫忙。提前致謝。Jquery滑下滑塊

<html> 
    <head> 
     <title>Slider</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <script src="../jquery/jquery.min.js"></script> 
     <style> 
      .container{ 
       width: 500px; 
       height: 250px; 
       margin: 0 auto; 
      } 
      .slider1{ 
       width: 500px; 
       height: 250px; 
       margin: 0 auto; 
       //background-image: url(images/image-1.jpg); 
       background-color:yellow; 
       position: absolute; 
       z-index: 1; 
      } 
      .slider2{ 
       width: 500px; 
       height: 250px; 
       margin: 0 auto;     
       //background-image: url(images/image-2.jpg); 
       background-color:green; 
       position: absolute; 
       z-index: 2; 
      } 
      .slider3{ 
       width: 500px; 
       height: 250px; 
       margin: 0 auto; 
       //background-image: url(images/image-3.jpg); 
       background-color:blue; 
       position: absolute; 
       z-index: 3; 
      } 

     </style> 
     <script type="text/javascript"> 

      $(document).ready(function() { 

       var runForever = function() { 
        //$(".slider1").hide(); 
        $(".slider2").hide(); //at start slider2 remains hidden; 
        $(".slider3").hide(); //at start slider3 remains hidden; 


        $(".slider2").slideDown(2000, function() { 
         $(".slider3").slideDown(2000, function() { 
          $(".slider3").slideUp(2000, function() { 
           $(".slider2").slideUp(2000, runForever); 
          }); 
         }); 
        }); 
       }; 
       runForever(); 
      }); 

     </script> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="slider1"></div> 
      <div class="slider2"></div> 
      <div class="slider3"></div> 
     </div> 

    </body> 
</html>

來源

2015-06-15 Kripanath Aditya

有幾種方法。您可以動態更改每個滑塊的z-index，或者創建與第一個滑塊相同的第四個滑塊，以便再次從上一張幻燈片轉換爲第一張幻燈片。 – styfle

http://jsfiddle.net/egs1br26/5/

$(document).ready(function() { 

    var runForever = function() { 
     $(".slider1").hide(); 

     $(".slider2").hide(); //at start slider2 remains hidden; 
     $(".slider3").hide(); //at start slider3 remains hidden; 


     $(".slider1").slideDown(2000, function() { 
      $(".slider2").slideDown(2000, function() { 
       $(".slider3").slideDown(2000,function(){ 
        runForever(); 
       }); 

      }); 
     }); 
    }; 
    runForever(); 
});

您還可以將容器的背景添加爲與上一張幻燈片相同。所以它看起來像一個連續的滑動。

.container { 
    width: 500px; 
    height: 250px; 
    margin: 0 auto; 
    background-color:blue; 
}

使用z-index可以實現更現實的解決方案。通過這種方法，容器的背景顏色可以被移除。

Updated Fiddle

var _img=$("#slideshow div"), zIndex=99; 
$(_img).eq(0).show(); 
function loopIt(){ 
    $(_img).eq(1).css('z-index',zIndex+1).slideDown(1000,function(){ 
      zIndex=zIndex+2; 
      $(_img).eq(0).hide();   
       $(_img).eq(2).css('z-index',zIndex).slideDown(1000,function(){ 
        zIndex=zIndex+3; 
        $(_img).eq(1).hide();    
         $(_img).eq(0).css('z-index',zIndex).slideDown(1000,function(){ 
          $(_img).eq(2).hide(); 
          loopIt();   
         });   

       }); 
    }) 
} 
loopIt();

來源

2015-06-15 08:37:59

謝謝:)。聰明的解決方案。 –

檢查更新的小提琴實現它沒有背景顏色。 –

很多很多謝謝你的答案和你的驚人的工作。今天我試圖用z-index解決問題，但無法解決這個問題。 –

嘗試這一個

實施例：http://jsfiddle.net/kevalbhatt18/qu3m3k7f/

$(document).ready(function() { var runForever = function() { $(".slider1").hide(); $(".slider2").hide(); //at start slider2 remains hidden; $(".slider3").hide(); //at start slider3 remains hidden; $(".slider1").slideDown(2000, function() { $(".slider2").slideDown(2000, function() { $(".slider3").slideDown(2000,function(){ runForever(); }); }); }); }; runForever(); });

來源

2015-06-15 08:33:21

感謝您的代碼;但在第三個滑塊（藍色）之後的代碼中，它不應該消失。 http://jsfiddle.net/kevalbhatt18/qu3m3k7f/ –

Jquery滑下滑塊

回答

相關問題