[JS]自動スクロールスライドショーするタブ式メニュー
- Category :
- Javascript
今回紹介するjQueryのプラグインは、自動に横にスライドショーしていくタブ式メニューです。
Build an Auto-Scrolling Slideshow That Works With and Without JavaScriptで紹介、配布されてます。demo
…ここからが続き
slideshow.js 使い方、解説
Build an Auto-Scrolling Slideshow That Works With and Without JavaScriptのSourceからファイルを一式ダウンロード出来ます。
head内
<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3");</script> <script type="text/javascript" src="js/jquery.cycle.js"></script> <script type="text/javascript" src="js/slideshow.js"></script>
XHTML
<div id="slideshow"> <ul class="slides-nav"> <li class="on"><a href="#slide-one">メニュー 1</a></li> <li><a href="#slide-two">メニュー 2</a></li> <li><a href="#slide-three">メニュー 3</a></li> </ul> <div class="slides"> <ul> <li id="slide-one"><img src="image/001.jpg" alt="" width="300" /><img src="image/002.jpg" alt="" width="300" /></li> <li id="slide-two"><img src="image/003.jpg" alt="" width="300" /><img src="image/004.jpg" alt="" width="300" /></li> <li id="slide-three"><img src="image/005.jpg" alt="" width="300" /><img src="image/006.jpg" alt="" width="300" /></li> </ul> </div> </div>
気を付ける点としては、.slides-navから指定するリンク先と#slidesのli内に指定するID名を一緒にする事。
.slides-navの該当するページの場合はclass="on"とつくようになっているので、ここはCSSの方で指定しておきます。
CSS
#slideshow .slides-nav li { float: left; margin-right: 5px; } #slideshow .slides-nav li a { display: block; overflow: hidden; background: url(image/btn.gif) no-repeat; width: 10px; height: 10px; text-indent: -9999px; } #slideshow .slides-nav:after { height:0; visibility: hidden; content: "."; display: block; clear: both; } .js #slideshow .slides-nav li.on, .js #slideshow .slides-nav li.on a { background: url(image/btn_on.gif) no-repeat; }
Comments
お疲れ様です!もし同じような境遇の人の為にも公開しておきますね~
おかげさまで解決出来ました。
一応載せておきますね。。。ご存じかもしれませんが…
◆jQuery Content Gallery Plugin◆
http://spaceforaname.com/galleryview#
を導入
http://spaceforaname.com/filmstrip.html
上記を参考に記述
以上で何枚横並びにさせても一枚スクロールでループになりました。
いや〜疲れた。
MIYAさん
ありがとうございます。
なるほど〜やはりそうなのですね!
ちょっと宝探しの旅に出てきます(^o^)
解決出来たらご報告にあがりますね〜
okizさんはじめまして。
こちらのスクリプトは横並びさせた li 要素をスクロールさせているだけなので、一枚ずつスクロールは出来ないです…
一枚ずつだと違うスクリプトを探した方が良いですね><
はじめまして!
最近HTML/CSSを勉強し始め悪戦苦闘の毎日です。
そんな折りこちらのサイトを発見!かな〜り有効に活用させて頂いてます。
早速ですが、このページのスライドショーを実装中です。
サムネイル6枚を一括表示の上スライドさせています。
現状、スライド時には当然6枚一緒にスライドとなりますが、
これを6枚表示のまま一枚ごとスライドさせていくには、どのようなTipsがありますでしょうか?
色々試しているのですが、全く出口が見つからず行き詰まっております。
なにかヒントがありましたら、是非コメント頂けるとありがたいです!
ヨロシクお願いします。
小梅さん。はじめまして。
このデモページではスクリプトで枚数を制御してるんではないですよね…
.slides 内の li で制御していますので、その中に記述してある画像の枚数で決まります。
その際注意する点は .slides-nav で記述してる CSS は任意に変更する必要はありますよ。
はじめまして。
JSはまりたての者です。
すごく面白いと思って夢中になっています。
デモを拝見したのですが、2枚ずつずれていきますが、
これを一枚ずつずらすようにするには、どの部分を見ればよろしいですしょうか?
また、二枚ずつ視野に入りますが、これを五枚とか、増やすにはどの部分を見ればいいでしょうか。
よろしくお願いします。
いえいえ。お力になれてないですから…
クライアントからフィードバック来ない用自分も祈っておきますww
結局jCarouselをカスタマイズして使いました。
4日かかった。。これ以上クライアントがなんか言ってきたらもう泣きます。ありがとうございました。
Agehaさん
いろいろ試してはみたのですが、問題を解決出来きなかったです…お力になれなくてすみません><
すいません、再び失礼します。
slides-navをクリックした時に、fx: 'scrollLeft'の値を変えることは可能でしょうか。。
例えば画像が3つあって、今2つ目が表示されているとします。3つ目をクリックすると画像が右から左にスライド。1つ目をクリックすると左から右にスライド。。という動きです。
素人Aさん。
逆の現象になるのはページが全部読みこまれる前だけ起きるって認識でよろしいでしょうか?ちなみに該当のブラウザはどれでもなってしまうんでしょうか?後この js を使わなくてもページ事態はけっこう重たい感じなんでしょうか?
後、最後におっしゃってる名前の変更でそのような現象はおきませんよ。
このサイトを拝見して早速試してみたのですが
スクリプトをすべて読み込む前にカーソルをスライダー上にもっていくと、動作が逆(オンマウス時でスライドしてマウスをはずすとストップする。)という現象になるんですが、まったくの素人で原因がさっぱり分かりません。すべて読み込むのを待ってからですと正常に(オンマウスでスライドがストップ。マウスをはずすとスライドする。)なのです。
ちなみにFC2ブログなので”jquery.cycle.js”は
”jquerycycle.js”としています。
お手数ですがご教示頂ければ幸いです。宜しくお願い致します。
あー解決しました!!!
1. slideshow.jsファイルのpause: trueを
pause: true,
next: ("#next2"),
prev: ("#prev2")
に変える
※最後のprev: ("#prev2")の後にはカンマを入れない
2. htmlファイルに
Prev
Next
をつけくわえる
3. CSSで場所や画像を調整
元サイトのコメント欄を参照:
http://net.tutsplus.com/tutorials/javascript-ajax/building-an-auto-scrolling-slideshow-that-works-with-and-without-javascript/
MIYAさん、ありがとうございました。同じことを考えている人のためにもこれらのコメントを残して頂くとうれしいです。
回答ありがとうございます!
説明不足ですみません。jCarouselのように矢印アイコンもともに表示させたいのです。
1. メインイメージとサムネイルを表示
レイアウトはこんな感じです
http://pikachoose.com/demo/
2. メインイメージはフェードさせるのではなく横スライド
このプラグインと同じ動き
3. サムネイルのオン、オフ機能
このプラグイン、1.のサイト(http://pikachoose.com/demo/)と同じ動き
4. メインイメージの上に矢印ボタン
http://sorgalla.com/projects/jcarousel/examples/static_controls.html
5. 自動で動く
6. 最後の画像を表示したら最初に戻って繰り返し動き続ける
現在このプラグインのオン、オフ機能とjCarouselを合体させようとしているのですが、jCarouselはjquery-1.2.3.pack.jsというファイルを使っており、最新版のjQueryだとなぜか動かないので、どう合体させればいいのかわからないのです。。
Agehaさん
現状使っているプラグインは、この記事で紹介しているプラグインと同じって事でよろしいでしょうか?
そうであれば、#slideshow .slides-nav の部分の padding や width の数値を変更して頂くと場所を移動させる事が出来ますよ。
やっと思い通りに動くjQuery発見!と思ったのですが、Next, Prevのボタンをイメージ上に配置したいのです。ただいま奮闘中なのですが、参考になるサイトなどあれば教えて頂きたいです。。