基于jquery的滑动样例代码

复制代码代码如下:<html> <head> <title>here</title> <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> </head> <body style="text-align: center;"> <div style="width:540px; margin: 0 auto;"> <div id="button1" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">1</div> <div id="button2" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">2</div> <div id="button3" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">3</div> <div id="button4" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">4</div> <div id="button5" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">5</div> <div id="button6" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">6</div> <div id="button7" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">7</div> <div id="button8" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">8</div> <div id="button9" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">9</div> <div id="button10" class="button" style="float:left;width:50px;margin:2px;background-color:#F00; cursor:pointer;">10</div> </div> <div style="clear: both"></div> <div style="width: 540px; margin: 0 auto; height: 400px; position: relative; z-index: 999; overflow: hidden;"> <div style="position:relative;padding:0px;margin:0 auto;width:100px;"> <div id="list" style="width:1000px;height:400px;position:absolute; z-index:9;left:-220px;"> <div style="width:96px;height:400px;background-color:#004;margin:2px;float:left;color:#FFF;">1</div> <div style="width:96px;height:400px;background-color:#008;margin:2px;float:left;color:#FFF;">2</div> <div style="width:96px;height:400px;background-color:#00F;margin:2px;float:left;color:#FFF;">3</div> <div style="width:96px;height:400px;background-color:#044;margin:2px;float:left;color:#FFF;">4</div> <div style="width:96px;height:400px;background-color:#048;margin:2px;float:left;color:#FFF;">5</div> <div style="width:96px;height:400px;background-color:#04F;margin:2px;float:left;color:#FFF;">6</div> <div style="width:96px;height:400px;background-color:#444;margin:2px;float:left;color:#FFF;">7</div> <div style="width:96px;height:400px;background-color:#448;margin:2px;float:left;color:#FFF;">8</div> <div style="width:96px;height:400px;background-color:#44F;margin:2px;float:left;color:#FFF;">9</div> <div style="width:96px;height:400px;background-color:#484;margin:2px;float:left;color:#FFF;">10</div> </div> </div> </div> </body> <script> $(document).ready(function(){ var speed = 1000; var div_width = $("#list > div:first").width() + parseInt($("#list > div:first").css("margin-left")) + parseInt($("#list > div:first").css("margin-right")); var offset = 220; $(".button").click(function(){ id = $(this).attr("id").replace("button",""); var _length = -(id - 1) * div_width - offset; $("#list").animate({left:_length + "px"},speed); }); }); </script> </html>

　　推荐阅读

　　js 判断checkbox是否选中的实现代码

//第几个没有选 <input type="checkbox" name="checkbox1" checked> <input type="checkbox" name="checkbox1"> <input type="checkbox" name="checkbox1" checked> <input type="checkbox" name="checkbox1"> <in>>>详细阅读

本文标题：基于jquery的滑动样例代码

地址：http://www.17bianji.com/kaifa2/JS/25367.html

1/2 1