1. 程式人生 > >一個簡單的jquery圖片輪播外掛

一個簡單的jquery圖片輪播外掛

前提佈局: 左浮li標籤,支援左右切換,自動輪播,原始碼:

引數:ul: 需要動畫的ul   prev:上一個切換按鈕  next: 下一個切換按鈕

function rotation(ul, prev, next) {
    var li = $(ul).find("li");
    var liWidth = li.width();
    var liLength = $(ul).find("li").length;
    var interval;
    $(ul).width(liWidth * liLength);
    /*上一個按鈕點選*/
    $(prev).click(function(){
        delay();
        animate("prev");
    });
    /*下一個按鈕點選*/
    $(next).click(function(){
        delay();
        animate("next");
    });
    /*動畫*/
    function animate(direction){
        if($(ul).is(":animated"))
        {
            return;
        }
        if (direction == "next") {
            $(ul).animate({
                left: -liWidth
            }, 1000, "easeOutSine", function () {
                //定位回撥成原來狀態
                $(ul).append($(ul).find("li:first-child"));
                $(ul).css({left: 0});
            });
        }
        else if (direction == "prev") {
            //定位
            $(ul).prepend($(ul).find("li:last-child"));
            $(ul).css({left: -liWidth});
            //logo圖片動畫
            $(ul).animate({
                left: 0
            }, 1000, "easeOutSine");
        }
    }
    /*自動輪播*/
    function play() {
        interval = setInterval(function () {
            animate("next")
        }, 3000);
    }
    play();
    /*清除並啟動定時器*/
    function delay() {
        clearInterval(interval);
        play();
    }
    /*游標懸浮li標籤時清除自動輪播*/
    $(li).hover(function(){
        clearInterval(interval);
    },function(){
        play();
    });
}