<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
.left {
float:left;
}
</style>
<script language="javascript">
$(document).ready(function(){
alert($(document).width());
var docw = $(document).width() - 599;
$("#SliderRight").click(function(){
$("#main").animate({
scrollLeft: $("#main").scrollLeft() + docw
}, 700,function(){});
});
$("#SliderLeft").click(function(){
$("#main").animate({
scrollLeft: $("#main").scrollLeft() - docw
}, 700,function(){});
});
});
</script>
</head>
<body>
<input type="button" id="left" value="左" /> <input type="button" id="right" value="右" /> <div id="main" style="margin: 50px auto; overflow: hidden; width: 100%; height: 600px;"> <div style="width: 4200px;"> <div class="left">1<br /><img src="1.jpg" alt="" width="300px" /></div> <div class="left">2<br /><img src="2.jpg" alt="" width="300px" /></div> <div class="left">3<br /><img src="3.jpg" alt="" width="300px" /></div> <div class="left">4<br /><img src="4.jpg" alt="" width="300px" /></div> <div class="left">5<br /><img src="5.jpg" alt="" width="300px" /></div> </div> </div></body>
</html>
參考資料：
http://sweeteason.pixnet.net/blog/post/37793032-%E7%B7%B4%E7%BF%92%E7%94%A8jquery-%E8%AE%93%E9%A0%81%E9%9D%A2%E5%B7%A6%E5%8F%B3%E6%BB%91%E5%8B%95
發表文章
0 意見: