jQueryを使ったランダムなスライドショー: jQuery

Tweet

Pocket

jQueryを使ったスライドショー(作成中)

»デモ
»ダウンロード

JavaScriptファイル

var randomSlide = {
    // property
    ulArr: null,
    totalSlide : 0,
    currentSlide : 0,
    isCompletedArr : [false,false,false,false,false,false],
    // method
    init : function(){
        this.ulArr = $("#randomSlide ul");
        this.totalSlide = this.ulArr.length;
        this.currentSlide = 0;
        this.setAnimate(this.ulArr[this.currentSlide]);
    },
    splitID : function(value)
    {
        return $(value).attr('id').split('-').pop();
    },
    checkCompleted : function(listNumber) {
        var self = this;
        if (this.isCompletedArr[listNumber] == false) {
            this.isCompletedArr[listNumber] = true;
        }
        var isCompleted = this.isCompletedArr.toString();
        if (isCompleted.indexOf('false') == -1) {
            for (var i = 0; i < this.isCompletedArr.length; i++) {
                this.isCompletedArr[i] = false;
                
            }
            if(this.currentSlide < this.totalSlide-1) {
                // currentSlideはstringなので数へ変換
                var slideNumber = parseInt(this.currentSlide,10) + 1;
                this.currentSlide = slideNumber;
                setTimeout(function(){self.setAnimate(self.ulArr[self.currentSlide]);}, 4000);
            } else {
                setTimeout(function(){
                    self.currentSlide = 0;
                    self.setAnimate(self.ulArr[self.currentSlide]);}, 6500);
            }
        }
    },
    execAnimate : function(animateType, elem,listNumber){
        if (animateType == 1){
            $(elem).children("img").css({visibility: "visible", left: "320px"});
            $(elem).children("img").animate({left: '0px'}, {duration: "normal", easing: "easeOutQuad"});
            this.checkCompleted(listNumber);
        }else if (animateType == 2){
            $(elem).children("img").css({visibility: "visible", top: "180px"});
            $(elem).children("img").animate({top: '0px'}, {duration: "normal", easing: "easeOutQuad"});
            this.checkCompleted(listNumber);
        }else if (animateType == 3){
            $(elem).children("img").css({visibility: "visible", left: "-320px"});
            $(elem).children("img").animate({left: '0px'}, {duration: "normal", easing: "easeOutQuad"});
            this.checkCompleted(listNumber);
        }else{
            $(elem).children("img").css({visibility: "visible", left: "-180"});
            $(elem).children("img").animate({left: '0px'}, {duration: "normal", easing: "easeOutQuad"});
            this.checkCompleted(listNumber);
        }
    },
    setAnimate : function(value){
        // setTimeoutで設定するコールバック関数(xecAnimationメソッド)を呼び出すための処理。
        var self = this;
        self.currentSlide = self.splitID(value);
        for(var j = 0; j < this.totalSlide; j++) {
            if (!j==this.currentSlide) {
                $(this.ulArr[j]).css("zIndex", "0");
            }
        }
        $("#randomSlide-" + self.currentSlide).css("zIndex", "1");
        // li要素取得
        var listArr = $(value).children("li");
        // ドロップダウン処理
        listArr.each(function(i){
            var animateType = Math.ceil(Math.random()*3);
            self.execAnimate(animateType, listArr[i],i);
        });
    }
}