幻灯片内容从右到左

我使用以下 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

幻灯片内容从右到左

回答

相关问题