jquery实现简单的无缝滚动

jquery实现简单的无缝滚动

<！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>

scroll（）用法：

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是滚动的速度，可以自己调整

以上所述就是本文的全部内容了，希望大家能够喜欢。