<body>
<div style="margin:0 auto;width:500px;">
<div id="scrollable">
<a class="prev" href="#"></a>
<!-- 外部div使用相对定位，里面的div使用绝对定位 -->
<div class="items" style="overflow: hidden; position: relative; visibility: visible; width: 478px;">
<div style="position: absolute; width: 200000em; left: 0px;" class="scrollable_demo">
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a>6</a>
<a>7</a>
<a>8</a>
<a>9</a>
<a>10</a>
<a>11</a>
<a>12</a>
<a>13</a>
<a>14</a>
<a>15</a>
</div>
<br clear="all"/>
</div>
<!-- "prev page" link -->
<a class="next" href="#"></a>
</div>
</div>
<div style="margin:0 auto;width:500px;">
<div id="scrollable">
<a class="prev" href="#"></a>
<!-- 外部div使用相对定位，里面的div使用绝对定位 -->
<div class="items" style="overflow: hidden; position: relative; visibility: visible; width: 478px;">
<div style="position: absolute; width: 200000em; left: 0px;" class="scrollable_demo">
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a>6</a>
<a>7</a>
<a>8</a>
<a>9</a>
<a>10</a>
<a>11</a>
<a>12</a>
<a>13</a>
<a>14</a>
<a>15</a>
</div>
<br clear="all"/>
</div>
<!-- "prev page" link -->
<a class="next" href="#"></a>
</div>
</div>
</body>
js:
$(function(){
var $content = $(".scrollable_demo");
var i = 5; //已知显示的<a>元素的个数
var m = 5; //用于计算的变量
var count = $content.find("a").length;//总共的<a>元素的个数
$(".next").click(function(){
if( !$content.is(":animated")){ //判断元素是否正处于动画，如果不处于动画状态，则追加动画。
if(m<count){ //判断 i 是否小于总的个数
m++;
$content.animate({left: "-=96px"}, 600);
}
}
});
$(".prev").click(function(){
if( !$content.is(":animated")){
if(m>i){ //判断 i 是否小于总的个数
m--;
$content.animate({left: "+=96px"}, 600);
}
}
});
})
需引入：jquery.js
效果如下:
691
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
