締切済み

画像／文字をスクロールさせるスクリプト

2009/09/03 00:57

表題の通り、JavaScriptで、文字や画像をスクロールさせる外部ライブラリを探しています。今のところ、左へ向けてスクロールしていくものしか発見できませんでした。現状、/jquery-1.3.2.min.js　と、sc_text/jcarousellite_1.0.1.js　を使って、次のようなスクロールまでは出来ています。 http://www.royal-e.com/javascript/test5.htm 【ソース】※相対リンクなので、そのままコピーしても動きません。悪しからずご了承ください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=shift_jis"> <TITLE>無題ドキュメント</TITLE> <SCRIPT type="text/javascript" src="sc_text/jquery-1.3.2.min.js"></SCRIPT> <SCRIPT type="text/javascript" src="sc_text/jcarousellite_1.0.1.js"></SCRIPT> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY> <DIV class="carousel"> <UL> <LI><IMG src="images/best_1.jpg"></LI> <LI><IMG src="images/best_2.jpg"></LI> <LI><IMG src="images/best_3.jpg"></LI> <LI><IMG src="images/best_4.jpg"></LI> <LI><IMG src="images/best_5.jpg"></LI> <LI><IMG src="images/best_6.jpg"></LI> <LI><IMG src="images/best_7.jpg"></LI> <LI><IMG src="images/best_8.jpg"></LI> <LI><IMG src="images/best_9.jpg"></LI> <LI><IMG src="images/best_10.jpg"></LI> </UL> </DIV> <A href="#" class="prev">戻る</A> <A href="#" class="next">次</A> </BODY> </HTML> 希望としては１．左　右　などのボタンで、スクロールの方向を、簡単に切り替えられる。（もちろん、現在表示の位置から方向が変わる） ⇒例えば、上のサンプルで、５を見逃したら、ボタンを押す（あるいはマウスオン）で回転方向が逆になって、５が左から出てくる　という感じです。２．早送り、巻き戻し　など、スクロールの速度も変更できる。　３や４が表示されているとき、ボタンやマウスオンで、動きが早くなって、９や10まで素早く移動できるという感じです。そのような外部ライブラリをご存知でしたら、教えていただけないでしょうか？ jcarousellite　の改造方法でもけっこうです。スクロールする画像や文字を頻繁に入れ替えたいので、その部分についてはjcarousellite　のように簡単に指定できると、たいへん助かります。

hiro7314
お礼率71% (10/14)

JavaScript
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

みんなの回答

fujillin
ベストアンサー率61% (1594/2576)

2009/09/04 19:53 回答No.2

#1です。一例として、方向反転オプション（reverse）を追加する場合を。（あとは同じ要領なので、適宜アレンジしてください。） ------------------------------------------- ◆jcarouseへのコードの追加（インデントを全角スペースにしてありますのでご注意） 1)設定値のデフォルト部分に以下を追加。　　reverse:null, 2）function設定部分に以下を追加。　　if(o.reverse) 　　　　$(o.reverse).click(function() { 　　　　　　o.scroll *= -1; 　　　　}); ◆HTML側の記述（ご提示の例の場合での例） 1）script呼出し部分（オプション等の設定）　$(".carousel").jCarouselLite({ 　　　auto: 800, 　　　speed: 2000, 　　　visible: 5, 　　　reverse: "#reverse" 　}); 2）HTML部分 <div class="carousel"> <ul> 　～～～～～～ </ul> </div> <p><input type="button" id="reverse" value="reverse"> ------------------------------------------------ みたいにすれば、reverseボタンを押す度にautoでスクロールしている移動方向が反転するようになります。

fujillin
ベストアンサー率61% (1594/2576)

2009/09/04 15:53 回答No.1

jqueryはよく知りませんが、回答がないみたいなので… jcarouselliteのライセンスはMIT and GPLみたいなので、改変は可能でしょう。コードを見てみると、使用法の説明までついているし、分かりやすく書かれているので、比較的改変もやすいかと。もともとのPrev/Nextの機能は指定コマ分前/後にスライドするものですが、ご質問の内容だと不要そうなので、これをスライドの方向を変えるものにしてあげればよいと思われます。（別に機能を追加してもOKです）ゼロから自作するより、改変のほうが簡単そうなので、とりあえず、考え方と方法のみ… ------------------------------------------------- 元のautoは指定コマ（o.scroll)分スライドすることをインターバルで繰り返していますので、Prev/Nextでgo()をreturnするかわりに、単にo.scrollの値を-1/1に切り替えるようにしてあげればautoでスライドする方向を切り替えられるようになります。（切り替えだと、ボタンは2個なくても「方向逆転」という一個のボタンで済みますね。　o.scroll *= -1 とか）もちろん、Prev/Nextを書き換えるのではなくて、新しい機能として追加してもよいです。速度の変化も基本的に同じ要領で、イベント発生時にo.speed（あるいはo.auto)の値を変えてあげればよろしいかと。（speedはコマ移動の時間、autoは表示して静止している時間）ただし、これらの値は、setIntervalの待機時間に使用されていますので、ある程度の大きさの正の値になるように下限を設けておいて制御してあげる必要があります。また、jCarouselLite全体が匿名化されていますので、各機能の設定方法を参考にして、同じように匿名関数の中での定義を追加してあげれば宜しいでしょう。（関数の外からだと、条件設定の値が参照できないので） ------------------------------------------------- あと、関係ないけど、ご提示の質問文のままだとスクリプトエラーで動かないですけど…？（不要な「,」が入っているのでは？）