0

我在我的例子中使用了以下 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/中运行良好在此 先感谢

4

1 回答 1

0

你已经省略$(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-01T10:24:08.073 回答