利用is做暗箱操作
css
*{margin: 0; padding: 0;list-style: none;} div.box{width: 260px;height: 60px;overflow: hidden;padding:10px ;margin:50px auto;background-color:skyblue;position:relative;} .box ul{width: 2000em;height: 60px;position:absolute;} .box ul li{float: left;width: 80px;height: 60px;margin-right: 10px;background-color:pink;color:white;line-height: 60px;text-align: center;font-size: 20px;} div.box a{position:absolute;width: 20px;height: 20px;border-radius:50%;text-align: center;line-height: 20px;font-size: 14px;background-color:yellow;left:1px;top:50%;transform:translateY(-50%);text-decoration:none;z-index: 3;;} div.box a:nth-of-type(2){left:258px;}
html
<div class="box"> <a href="#" class="prev"><</a> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <a href="#" class="next">></a> </div>
js
$(function(){ var u = $('ul'); var i = 3; var m = 3; var lil = u.children('li').length; //遍历长度 $('.next').click(function(event) { if(!u.is(":animated")){ if(lil>i){ i++; u.animate({"left": "-=90px"}, 600); } } }); $('.prev').click(function(event) { if(!u.is(":animated")){ if(i>m){ //判断 i 是否小于总的个数 i--; u.animate({"left": "+=90px"}, 600); } } }); })