滑塊jQuery中

Question

我試圖做一個形象滑塊，下面是我的代碼：

HTML

<div class="slider_mian_cont"> 
    <div class="slider_inner"> 
     <ul> 
      <li><img src="images/one.jpg" width="940" height="350" alt=" " /></li> 
      <li><img src="images/two.jpg" width="940" height="350" alt=" " /></li> 
      <li><img src="images/three.jpg" width="940" height="350" alt=" " /></li> 
     </ul> 
    </div> 
</div> 
<div id="next"><a href="#">next</a></div> 

jQuery的

$(document).ready(function(e) { 
    var len = $('.slider_mian_cont ul li').length; 
    var wd = $('.slider_mian_cont ul').width(); 
    var mn = $('.slider_inner').width(wd*len); 
    var testa = $('.slider_mian_cont ul li').width(); 
    $('#next').click(function(){ 
     var leftValue = $('.slider_inner').position().left; 
     //console.log('leftValue : ' + leftValue + ', testa : ' + testa); 
     var movedValue = leftValue - testa; 
     //console.log('movedValue : ' + movedValue); 
     $('.slider_inner').animate({ left: movedValue }, 200) 
     }) 
}); 

CSS

.slider_mian_cont{width:940px; height:350px; overflow:hidden; position:relative;} 
.slider_inner{position:absolute;} 
.slider_mian_cont ul{margin:0; padding:0; } 
.slider_mian_cont ul li{margin:0; padding:0; float:left; width:940px; height:350px; list-style:none;} 

我只是想設置條件，如果最後<li>來tan'下一個'按鈕停止工作。

Answer 1

下面會隱藏/顯示您的next按鈕取決於最後到達終點

$(document).ready(function(e) { 
    var len = $('.slider_mian_cont ul li').length; 
    var wd = $('.slider_mian_cont ul').width(); 
    var mn = $('.slider_inner').width(wd * len); 
    var testa = $('.slider_mian_cont ul li').width(); 
    /* calculate max left*/ 
    var maxLeft = len * testa; 

    $('#next').click(function() { 
     var leftValue = $('.slider_inner').position().left; 

     var movedValue = leftValue - testa; 
     /* hide or show "#next" depending on end or not*/ 
     $(this).toggle(movedValue >= maxLeft);  

     $('.slider_inner').animate({ 
      left: movedValue 
     }, 200) 
    }) 
}); 

Answer 2

你可以試試這個，這將工作

$(document).ready(function(e) { 
    var len = $('.slider_mian_cont ul li').length; 
    var wd = $('.slider_mian_cont ul').width(); 
    var mn=len*wd; 
    //var mn = $('.slider_inner').width(wd*len); 
    var testa = $('.slider_mian_cont ul li').width(); 
    //console.log(len, wd); 
    //console.log(mn); 
    $('#next').click(function(){ 
     var leftValue = $('.slider_inner').position().left; 
     //console.log(leftValue); 
     var movedValue = leftValue - testa; 
     var posv=Math.abs(leftValue) 
     var mix= posv+testa+wd; 
     console.log(mix , mn); 
     //$(this).toggle(mn <= mix) 
     if(mix == mn){ $('#next').toggle();} 
     $('.slider_inner').animate({ left: movedValue }, 200) 
    }); 

});