$(function(){?var $area = $('#content');?var $con1 = $('#con1');?$area.scrollTop = 0;?var myScroll = setInterval('myAnimate()',1000);?function myAnimate(){?????????? $area.animate({????????????? scrollTop:'$con1[0].scrollHeight()'?????}),'slow',function(){????????????if($area.scrollTop >= $con1[0].scrollHeight){???????$area.scrollTop = 0;??????}else{???????? $area.scrollTop++;???????? };??????};??????????????? };?$area.hover(function(){??clearInterval(myScroll);??},function(){???myScroll = setInterval('myAnimate()',1000);???});????})
2 回答
已采納
OlderSkee
TA貢獻123條經驗 獲得超103個贊
$(function () {
? ?var timer = null;
? timer = ?setTimeout(auto,20)
? ?function auto(){
? ? ? ?clearTimeout(timer)
? ? ? ?$("#con1").css({"marginTop":"-=1px"})
? ? ? ?if(parseInt($("#con1").css("marginTop"))<-249){ ?//這里其實有一像素的偏差，修正一下
? ? ? ? ? ?$("#con1").css("marginTop",100);
? ? ? ?}
? ? ? ?setTimeout(auto,20)
? ?}
})//無縫只需要加上這一句就可以了。
for(var i=0;i<4;i++){
? ?$("#con1").append($("#con1 li").eq(i).clone(true))
}
-
雞肋2016非常感謝您的回答?。∥抑耙恢庇胊nimate()、定時器、scrollTop在弄，您給了我新的思路，但是您的代碼不能實現 無縫滾動呀 還是得克隆一個con2吧 但還是得感謝您 好人啊哈哈哈！ -
OlderSkee嗯是的呀， 深度克隆下就行了 用for循環4次，我改了下這個代碼，你再看下就知道了~
-
雞肋2016哈哈哈 太感謝你了 您的方法簡單又好用，但你給的margin-top<-249和100是有一點出入的，我發現只要 第一個值（-249）和第二個值（100）只要相加等于-225（我有9個li,每個li高25，得225）就能無縫滾動 ，比如 （-225）和（0），太開心了！謝謝您?。≈x謝！
點擊展開后面2條
-
雞肋2016好的 我黏貼一下 代碼有點多 html css肯定沒問題 js我也可以實現 就是JQ我不太會 麻煩您給看下 謝謝謝！！
-
雞肋2016<div id="warp"> <div class="header"> <div class="header_one"> <h1 class="title">最新課程</h1> <a href="#">更多>></a> </div> <div class="header_tip"></div> </div> <div id="content"> <ul id="con1"> <li><a href="#">1.學會html5 絕對的屌絲逆襲（案例）</a><span>2013-09-18</span></li> <li><a href="#">1.學會html5 絕對的屌絲逆襲（案例）</a><span>2013-09-18</span></li> <li><a href="#">2.tab頁面切換效果（案例）</a><span>2013-10-09</span></li> <li><a href="#">3.圓角水晶按鈕制作（案例）</a><span>2013-10-21</span></li> <li><a href="#">4.HTML+CSS基礎課程(系列)</a><span>2013-11-01</span></li> <li><a href="#">5.分頁頁碼制作（案例）</a><span>2013-11-06</span></li> <li><a href="#">6.導航條菜單的制作（案例）</a><span>2013-11-08</span></li> <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li> <li><a href="#">8.下拉菜單制作(案例)</a><span>2013-11-22</span></li> <li><a href="#">9.如何實現“新手引導”效果</a><span>2013-12-06</span></li> </ul> <ul id="con2"></ul> </div> </div>
-
雞肋2016*{ padding:0; margin:0; } #warp{ width:400px; height:200px; border:4px solid #ccc; margin:0 auto; } .header{ width:400px; height:60px; background:#C33; } .header_one{ width:400px; height:50px; color:#fff; float:left; } .header h1{ margin:10px 0 0 10px; display:inline-block; } .header a{ float:right; margin:30px 10px 0 0; color:#fff; text-decoration:none; } .header_tip{ width:400px; height:10px; float:left; background:#fff; } #content{ width:400px; height:110px; overflow:hidden; } #con1,#con2{ margin:0 auto; width:300px; list-style-type:none; font-size:10px; } #con1 li,#con2 li { height:25px; line-height:25px; } #con1 li a,#con2 li a{ color:#000; text-decoration:none; } #con1 li span,#con2 li span{ color:#999; float:right; }
點擊展開后面1條
- 2 回答
- 0 關注
- 1445 瀏覽
添加回答
舉報
0/150
提交
取消