JavaScript中實現li向上輪播


在網上找了很久,沒有找到合適的模板,其實我這個也是公司用的,希望以后也能復用,節省時間

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列表

注:這個方法可能造成輪播時圖片、文字抖動,暫時還沒想到解決辦法

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM