垂直jcarousel與jquery

網上的大多數傳送帶例子是水平的，所以我創建我我已經打到了一個障礙，我不知道如何停止滾動下來，當它已經到達結束這裏是我的代碼垂直jcarousel與jquery

<script type="text/javascript"> 
     $(document).ready(function(){ 
      //Define the animation speed for the Carousel 
      var speed = 600; 
      var x =1; 
      var number = $('li').size(); 
      var height = $('li').height(); 
      var total_height = number * height; 

      $('#navPrev').click(function(){ 


       x=x+200; 
       $('#carousel ul').animate({marginTop:x}, speed); 
      }); 
      $('#navNext').click(function(){ 

       x= x -200; 


       $('#carousel ul').animate({marginTop:x}, speed); 
      }); 
     }); 
    </script> 
    <style type="text/css"> 
     #container {height:500px; width:400px; font-family:Tahoma;} 
     #carousel { height:500px; width:400px; border:1px solid #000; 
        overflow:hidden;} 
     #carousel ul { list-style-type:none;margin-top:4px; width:300px; margin-left:0; left:0; padding-left:1px;} 
     #carousel li { display:inline;} 
     #carousel ul li img{ width:400px; height:90px; border:1px solid #ccc; 
          float:left; } 
     #navPrev {float:left;} 
     #navNext {float:right;} 
    </style> 
    <div id="container"> 
     <div id="carousel"> 

      <ul> 
       <li><img src="images/cupcake.jpg" width="800px" /></li> 
       <li><img src="images/cupcake.jpg" width="800px" /></li> 
       <li><img src="images/cupcake.jpg" width="800px" /></li> 
       <li><img src="images/cupcake.jpg" width="800px" /></li> 
       <li><img src="images/cupcake.jpg" width="800px" /></li> 
       <li><img src="images/cupcake.jpg" width="800px" /></li> 
       <li><img src="images/cupcake.jpg" width="800px" /></li> 
       <li><img src="images/cupcake.jpg" width="800px" /></li><li><img src="images/cupcake.jpg" width="800px" /></li> 
       <li><img src="images/cupcake.jpg" width="800px" /></li> 
       <li><img src="images/cupcake.jpg" width="800px" /></li> 
       <li><img src="images/cupcake.jpg" width="800px" /></li> 
       <li><img src="images/cupcake.jpg" width="800px" /></li> 
       <li><img src="images/cupcake.jpg" width="800px" /></li> 
       <li><img src="images/cupcake.jpg" width="800px" /></li> 
       <li><img src="images/loading.gif" width="800px" /></li> 

      </ul> 
     </div> 
     <a id="navPrev" href="#">Previous</a> 
     <a id="navNext" href="#">Next</a> 
    </div>

我需要讓這段代碼讓旋轉木馬停止，當我已經到達列表的底部或頂部如何實現這一目標？

來源

2011-10-21 Madawar

限制從1的x值到div容器高度和ul-li容器高度之差

//定義動畫速度的旋轉木馬

var speed = 600; 
var x = 1; 
var number = $('li').size(); 
var height = $('img').height(); 
var total_height = number * height; 
var diff = $('#carousel').height() - $('#carousel ul').height(); 
$('#navPrev').click(function() { 

    if (x < 1) { 
     x = x + 200; 
     $('#carousel ul').animate({ 
      marginTop: x 
     }, speed); 
    } 
}); 
$('#navNext').click(function() { 
    if (x > diff) { 
     x = x - 200; 
     $('#carousel ul').animate({ 
      marginTop: x 
     }, speed); 
    } 
});

vertical carousel example

來源

2011-10-21 20:19:02 zdrsh

我已經使用這個例子如何將我讓它響應鼠標懸停我一直在使用鼠標移動試圖#navNext和#navPrev事件，但是，這不是工作的mousemove幾個火@Jasper – Madawar

http://jsfiddle.net/6bADe/7/這裏是一個鼠標懸停的例子。如果您使用它，請調整速度以更平穩地移動。 – zdrsh

之前動畫轉盤容器，檢查是否存在任何更多的元素製作動畫到：

變化：

$('#navPrev').click(function(){ 
    x=x+200; 
    $('#carousel ul').animate({marginTop:x}, speed); 
});

到：

$('#navPrev').click(function(){ 
    //this will check if the total height of the carousel is greater than if you increment the `x` variable by another 200 
    if (1 >= (x+200)) { 
     x=x+200; 
     $('#carousel ul').animate({marginTop:x}, speed); 
    } 
});

來源

2011-10-21 20:02:10 Jasper

垂直jcarousel與jquery

回答

相關問題