在網上找了很久,沒有找到合適的模板,其實我這個也是公司用的,希望以后也能復用,節省時間
function scrollAuto(scrollBox, list){//兩個參數分別填列表的ul的class屬性和li的class屬性 var listHeight = $(list).outerHeight(true); var mTop = 0; function listGo() { if(mTop > -listHeight) { $(scrollBox).css({'margin-top': mTop}); mTop = mTop - 0.5; } else { mTop = 0; $(scrollBox).css({'margin-top': '0'}); $(scrollBox).find('.a-list:first-child').appendTo(scrollBox); //此處的a-list為li的class屬性名 } } var listTime = setInterval(listGo, 20); $(scrollBox).mouseenter(function(){ clearInterval(listTime); }) $(scrollBox).mouseleave(function(){ listTime = setInterval(listGo, 20); })
由於我是先寫好靜態頁面再實現滾動的,所以沒有特別設置CSS樣式
在$(function(){})中調用,直接調用,即可實現打開頁面向上輪播li列表
注:這個方法可能造成輪播時圖片、文字抖動,暫時還沒想到解決辦法
