基于jquery的滑动样例代码

时间：2021-05-25

复制代码 代码如下:
<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>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章