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 に答える