【JAVASCRIPT】左右にスライドするスクリプトなのですが、以下のスクリプトでは、スライドがループしませんが、ループするようにするにはソースのどの部分をどう変えればいいでしょうか?(最後→最初、最初→最後という感じです)またそれとあわせて、○秒ごとに自動でスライドさせるにはどうしたらいいでしょうか?さらにこれの縦バージョンは可能でしょうか?

高ポイント差し上げます。

http://woorktuts.110mb.com/art_of_reuse_code/index4.html
http://woorktuts.110mb.com/art_of_reuse_code/mootools.svn.js

回答の条件
  • 1人5回まで
  • 登録:2009/12/09 15:05:40
  • 終了:2009/12/09 16:48:02

ベストアンサー

id:mattn No.1

mattn回答回数104ベストアンサー獲得回数232009/12/09 15:30:03

ポイント60pt

ループするには画像の再配置が必要なので少し手間がかかりますが、以下の様に

    //-------------------------------------
    // EVENTS for the button "previous"
    $('previous').addEvents({ 
        'click' : function(event){ 
            if(totIncrement>=0)                             // ここと
                totIncrement = maxRightIncrement-increment; // ここ
            if(totIncrement<0){
                totIncrement = totIncrement+increment;
                fx.stop()
                fx.start(totIncrement);
            }
        }
    }); 

    //-------------------------------------
    // EVENTS for the button "next"
    $('next').addEvents({ 
        'click' : function(event){ 
             if(totIncrement<=maxRightIncrement)          // ここと
                totIncrement = increment;                 // ここ
             if(totIncrement>maxRightIncrement){
                totIncrement = totIncrement-increment;
                fx.stop()
                fx.start(totIncrement);
            }
        }
    })

こうすると右端から左端へ、もしくは左端から右端へニュルーンと戻る様にはなります。

id:tsuntsuku

おぉ、なるほど。

ありがとうございます!

2009/12/09 15:46:33

その他の回答(4件)

id:mattn No.1

mattn回答回数104ベストアンサー獲得回数232009/12/09 15:30:03ここでベストアンサー

ポイント60pt

ループするには画像の再配置が必要なので少し手間がかかりますが、以下の様に

    //-------------------------------------
    // EVENTS for the button "previous"
    $('previous').addEvents({ 
        'click' : function(event){ 
            if(totIncrement>=0)                             // ここと
                totIncrement = maxRightIncrement-increment; // ここ
            if(totIncrement<0){
                totIncrement = totIncrement+increment;
                fx.stop()
                fx.start(totIncrement);
            }
        }
    }); 

    //-------------------------------------
    // EVENTS for the button "next"
    $('next').addEvents({ 
        'click' : function(event){ 
             if(totIncrement<=maxRightIncrement)          // ここと
                totIncrement = increment;                 // ここ
             if(totIncrement>maxRightIncrement){
                totIncrement = totIncrement-increment;
                fx.stop()
                fx.start(totIncrement);
            }
        }
    })

こうすると右端から左端へ、もしくは左端から右端へニュルーンと戻る様にはなります。

id:tsuntsuku

おぉ、なるほど。

ありがとうございます!

2009/12/09 15:46:33
id:mattn No.2

mattn回答回数104ベストアンサー獲得回数232009/12/09 15:41:30

ポイント60pt

タイマによる自動再生ですが

    var timer = 0;
    $('slider-stage').addEvents({'mouseout' : function() {
        timer = setInterval(function() {
            $('next').fireEvent('click');
        }, 2000)
    }});
    $('slider-stage').addEvents({'mouseover' : function() {
        clearInterval(timer);
    }});
    $('slider-stage').fireEvent('mouseout');

こんな感じで出来ます。

id:tsuntsuku

引き続きありがとうございます!

}, 2000)

の行がnull'はNull または オブジェクトではありません。となります。

私の挿入位置がおかしいんですかね・・・

2009/12/09 15:58:28
id:mattn No.3

mattn回答回数104ベストアンサー獲得回数232009/12/09 15:46:11

ポイント60pt

あと縦型ですが...

CSSで

#slider-stage{width:632px; overflow:auto; overflow-x:hidden; overflow-y:hidden; height:200px; margin:0 auto;}

のheight:200pxを500pxくらいに

#slider-list li{

list-style:none;

margin:0;

padding:0;

border:0;

margin-right:4px;

padding:4px;

background:#DEDEDE;

float:left;

width:200px;

height:200px;

}

のfloat:leftを削除

var fx = new Fx.Style('slider-list', 'margin-left', {

duration: 1000,

transition: Fx.Transitions.Back.easeInOut,

wait: true

});

のmargin-leftをmargin-topに変えればいけます。

id:tsuntsuku

すごい、できました。

ありがとうございます!

2009/12/09 16:07:10
id:mattn No.4

mattn回答回数104ベストアンサー獲得回数232009/12/09 16:01:37

ポイント60pt

タイマの件ですが

window.addEvent('domready', function(){ 
   ... ここの一番下あたりに書きます。 ...
})
id:tsuntsuku

こちらもありがとうございます。できました。

ループの件ですが、最後まで行ったら一気に戻らないで逆に一つづつ戻っていくというのも難しいですか?

2009/12/09 16:08:55
id:mattn No.5

mattn回答回数104ベストアンサー獲得回数232009/12/09 16:30:57

ポイント60pt

next/previousの制御を考えるのが面倒だったので、いったりきたりする専用のリンクroundがあったとして...

    $('round').addEvents({ 
        'click' : function(event){ 
            if(totIncrement>=0 && increment<0)
                increment=-increment;
            if(totIncrement<=maxRightIncrement)
                increment=-increment;
            totIncrement = totIncrement+increment;
            fx.stop()
            fx.start(totIncrement);
        }
    })

右端もしくは左端で折り返します。

(next/previousとの併用不可)

id:tsuntsuku

いえ、ここまでしていただいてありがとうございました!

大変助かりました。

mattnさんくらい使えるようになれば楽しいでしょうね。羨ましい限りです。

2009/12/09 16:46:00
  • id:mattn
    ポイントありがとうございます。:)

    > mattnさんくらい使えるようになれば楽しいでしょうね。羨ましい限りです。

    javascriptは目で見て動きが確認出来るので、やってても楽しいですよね。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません