幻燈片內容從右到左

我使用以下 http://jsfiddle.net/ZSFFS/27/ 在我的例子中，但它不會滑動我附上我的代碼下面請驗證並讓我知道我犯了什麼錯誤，我不能對發現我的錯誤幻燈片內容從右到左

<html> 
<head> 
<style type="text/css"> 
.container{ 
    width:500px; 
height:250px; 
overflow:hidden; 
margin:10px; 
position:relative 
} 
.table{ 
position:absolute; 
width:2000px; 
height:250px; 
left:0; 

background: -moz-linear-gradient(to right, red, orange, yellow, green, blue, indigo,   violet); 
} 
</style> 

<script type="text/javascript"> 
$('.next').click(function(event){ 
if($('.table').css('left') != '-1500px') { 
$(this).prop('disabled', true)  
    $('.table').animate({left:'-=500px'}, 500, function() { 
      $('.next').prop('disabled', false)  
    }); 
} 
}); 


$('.prev').click(function(event){ 
if($('.table').css('left') != '0px') { 
$(this).prop('disabled', true) 
    $('.table').animate({left:'+=500px'}, 500, function() { 
      $('.prev').prop('disabled', false)  
    }); 
} 
}); 
</script> 
</head> 
<body> 
<div class="container"> 
<div class="table"> 
    <table border="2"> 
     <tr> 
      <td>sam</td> 
      <td>sam</td><td>sam</td><td>sam</td><td>sam</td><td>sam</td><td>sam</td> <td>sam</td><td>sam</td><td>sam</td><td>sam</td><td>sam</td><td>sam</td><td>sam</td><td>sam</td><td>sam</td><td>man</td><td>man</td><td>man</td><td>sam</td><td>sam</td><td>sam</td><td>sam</td><td>bool</td> 
     </tr> 
    </table> 

</div> 
</div> 
<input type='button' class="prev" value='prev'> 
<input type='button' class="next" value='next'> 

</body> 
</html>

它運作良好，在http://jsfiddle.net/ZSFFS/27/ 預先感謝

來源

2013-04-01 Ganesh

你是什麼意思'它運作良好'？當我點擊'.prev'和'.next'按鈕*沒有任何反應*。你的問題在JS小提琴上覆制，還是不？ –

您省略$(document).ready(function(){ });，也包含jQuery框架的：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script> 

$(document).ready(function(){ 
    $('.next').click(function(event){ 
    if($('.table').css('left') != '-1500px') { 
    $(this).prop('disabled', true)  
    $('.table').animate({left:'-=500px'}, 500, function() { 
      $('.next').prop('disabled', false)  
    }); 
    } 
    }); 


    $('.prev').click(function(event){ 
    if($('.table').css('left') != '0px') { 
    $(this).prop('disabled', true) 
    $('.table').animate({left:'+=500px'}, 500, function() { 
      $('.prev').prop('disabled', false)  
    }); 
    } 
    }); 

}); 
</script>

來源

2013-04-01 10:24:08

謝謝Matei Mihai我得到了我的輸出 – Ganesh

但如果我想追加更多的列，並通過點擊一個按鈕而不顯示滑動 – Ganesh

幻燈片內容從右到左

回答

相關問題