jquery melaksanakan penatalan lancar yang mudah
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
</head>
<style>
*{ margin: 0px; padding: 0px;}
li{ list-style: none;}
.content{ width: 1020px; height:112px; overflow: hidden; border: #4e83c2 solid 1px; margin:50px auto; }
.content ul{ width: 1020px; height:100px;}
.content ul li{ float: left; width: 100px; height: 100px; border:#ccc solid 1px; display: block; margin: 5px;}
</style>
<body>
<div class="content">
<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>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
</ul>
</div>
<script>
function scroll(){
$(".content ul").animate({"margin-left":"-110px"},function(){
$(".content ul li:eq(0)").appendTo($(".content ul"))
$(".content ul").css({"margin-left":0})
})
}
setInterval(scroll,1000)
</script>
</body>
</html>penggunaan tatal():
function scroll(){
$(".content ul").animate({"margin-left":"-110px"},function(){
//这个是让整个ul先向前滑动个li ,如果要一次性滑动5个~那么就是550px.
//想向上滚动就改成 $(".content ul").animate({"margin-top":"-105px"}
//想向下滚动就改成 $(".content ul").animate({"margin-top":"105px"}
//想向右滚动就改成 $(".content ul").animate({"margin-left":"110px"}
$(".content ul li:eq(0)").appendTo($(".content ul"))
$(".content ul").css({"margin-left":0})
//对应这的这边
//想向上滚动就改成 $(".content ul").animate({"margin-top":0}
//想向下滚动就改成 $(".content ul").animate({"margin-top":0}
//想向右滚动就改成 $(".content ul").animate({"margin-left":0}
})
}
setInterval(scroll,1000)
//这上面的是1000是滚动的速度，可以自己调整
Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.
Apakah pemalam jquery?
Bagaimana untuk mengendalikan json dengan jquery
Bagaimana untuk memadam elemen dalam jquery
Penggunaan kaedah jQuery hover().
jquery melaksanakan kaedah paging
Apakah elemen tersembunyi dalam jquery
Apa yang ditonjolkan dalam jquery
Semak sepuluh mata wang kripto teratas yang bernilai melabur
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
