Question

我正在使用以下内容 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/中效果很好提前致谢

Answer 1

您已省略$(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>

从右到左滑动表格内容

1 个答案: