人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

●質問者: tsuntsuku
●カテゴリ:インターネット ウェブ制作
✍キーワード:JavaScript スクリプト スライド ソース バージョン
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● mattn
●60ポイント ベストアンサー

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

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

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

◎質問者からの返答

おぉ、なるほど。

ありがとうございます!


2 ● mattn
●60ポイント

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

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

こんな感じで出来ます。

◎質問者からの返答

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

}, 2000)

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

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


3 ● mattn
●60ポイント

あと縦型ですが...

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に変えればいけます。

◎質問者からの返答

すごい、できました。

ありがとうございます!


4 ● mattn
●60ポイント

タイマの件ですが

window.addEvent('domready', function(){ 
 ... ここの一番下あたりに書きます。 ...
})
◎質問者からの返答

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

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


5 ● mattn
●60ポイント

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との併用不可)

◎質問者からの返答

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

大変助かりました。

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ