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

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);
        });
    }
}

コメント


  1. はじめまして。
    重複なしのランダムで、複数枚のバナーを出力したいと考えていたところ
    こちらへ辿りつきました。

    このプラグインをぜひ利用させていただければと考えておりますが、
    画像の枚数が多いため、HTMLに直接画像ファイルを指定するのではなく、
    外部jsから指定できればと考えておりますが、どういった方法が
    検討できるでしょうか?

    ご多忙のところ、大変に恐れ入りますが、ご教授いただければ幸いです。

    よろしくお願い申し上げます。

    Comment by ponta — 2011-12-18 @ 2:22 午前

  2. 1.はじめまして。
    重複なしのランダムで、複数枚のバナーを出力したいと考えていたところ
    こちらへ辿りつきました。

    このプラグインをぜひ利用させていただければと考えておりますが、
    画像の枚数が多いため、HTMLに直接画像ファイルを指定するのではなく、
    外部jsから指定できればと考えておりますが、どういった方法が
    検討できるでしょうか……?

    ご多忙のところ、大変に恐れ入りますが、ご教授いただければ幸いです。

    よろしくお願い申し上げます。

    Comment by ponta — 2011-12-18 @ 5:11 午後

  3. pontaさん
    プラグインの利用を検討いただきありあとうございます。
    申し訳ありません。だいぶ前に作成したプラグインでして忙しさもありご希望にそうことができません。
    時間ができたら考えたいと思います。

    Comment by findxfine — 2011-12-20 @ 10:07 午前

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。