[JS]自動スクロールスライドショーするタブ式メニュー

[JS]自動スクロールスライドショーするタブ式メニュー

今回紹介するjQueryのプラグインは、自動に横にスライドショーしていくタブ式メニューです。

Build an Auto-Scrolling Slideshow That Works With and Without JavaScriptで紹介、配布されてます。demo

demo page

…ここからが続き

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

demo page

Track Back

浜松在住のシステムエンジニアのリアル

[JS]自動スクロールスライドショーするタブ式メニュー

[JS]自動スクロールスライドショーするタブ式メニューhttp://www.css-lecture.com/log/javascript/039.html...

by 浜松在住のシステムエンジニアのリアル  

Comments

MIYA

MIYA

お疲れ様です!もし同じような境遇の人の為にも公開しておきますね~

2010年03月02日 16:07

okiz

okiz

おかげさまで解決出来ました。
一応載せておきますね。。。ご存じかもしれませんが…

◆jQuery Content Gallery Plugin◆
http://spaceforaname.com/galleryview#
を導入

http://spaceforaname.com/filmstrip.html
上記を参考に記述

以上で何枚横並びにさせても一枚スクロールでループになりました。
いや〜疲れた。

2010年03月02日 10:55

okiz

okiz

MIYAさん
ありがとうございます。

なるほど〜やはりそうなのですね!
ちょっと宝探しの旅に出てきます(^o^)

解決出来たらご報告にあがりますね〜

2010年02月26日 12:13

MIYA

MIYA

okizさんはじめまして。

こちらのスクリプトは横並びさせた li 要素をスクロールさせているだけなので、一枚ずつスクロールは出来ないです…
一枚ずつだと違うスクリプトを探した方が良いですね><

2010年02月26日 11:11

okiz

okiz

はじめまして!
最近HTML/CSSを勉強し始め悪戦苦闘の毎日です。
そんな折りこちらのサイトを発見!かな〜り有効に活用させて頂いてます。

早速ですが、このページのスライドショーを実装中です。
サムネイル6枚を一括表示の上スライドさせています。
現状、スライド時には当然6枚一緒にスライドとなりますが、
これを6枚表示のまま一枚ごとスライドさせていくには、どのようなTipsがありますでしょうか?
色々試しているのですが、全く出口が見つからず行き詰まっております。
なにかヒントがありましたら、是非コメント頂けるとありがたいです!
ヨロシクお願いします。

2010年02月25日 18:23

MIYA

MIYA

小梅さん。はじめまして。

このデモページではスクリプトで枚数を制御してるんではないですよね…

.slides 内の li で制御していますので、その中に記述してある画像の枚数で決まります。
その際注意する点は .slides-nav で記述してる CSS は任意に変更する必要はありますよ。

2010年02月14日 02:22

小梅

小梅

はじめまして。
JSはまりたての者です。
すごく面白いと思って夢中になっています。
デモを拝見したのですが、2枚ずつずれていきますが、
これを一枚ずつずらすようにするには、どの部分を見ればよろしいですしょうか?
また、二枚ずつ視野に入りますが、これを五枚とか、増やすにはどの部分を見ればいいでしょうか。
よろしくお願いします。

2010年02月10日 01:09

MIYA

MIYA

いえいえ。お力になれてないですから…

クライアントからフィードバック来ない用自分も祈っておきますww

2009年11月30日 18:27

Ageha

Ageha

結局jCarouselをカスタマイズして使いました。
4日かかった。。これ以上クライアントがなんか言ってきたらもう泣きます。ありがとうございました。

2009年11月30日 17:12

MIYA

MIYA

Agehaさん

いろいろ試してはみたのですが、問題を解決出来きなかったです…お力になれなくてすみません><

2009年11月28日 00:37

Ageha

Ageha

すいません、再び失礼します。
slides-navをクリックした時に、fx: 'scrollLeft'の値を変えることは可能でしょうか。。

例えば画像が3つあって、今2つ目が表示されているとします。3つ目をクリックすると画像が右から左にスライド。1つ目をクリックすると左から右にスライド。。という動きです。

2009年11月27日 07:42

MIYA

MIYA

素人Aさん。

逆の現象になるのはページが全部読みこまれる前だけ起きるって認識でよろしいでしょうか?ちなみに該当のブラウザはどれでもなってしまうんでしょうか?後この js を使わなくてもページ事態はけっこう重たい感じなんでしょうか?

後、最後におっしゃってる名前の変更でそのような現象はおきませんよ。

2009年11月06日 00:17

素人A

素人A

このサイトを拝見して早速試してみたのですが
スクリプトをすべて読み込む前にカーソルをスライダー上にもっていくと、動作が逆(オンマウス時でスライドしてマウスをはずすとストップする。)という現象になるんですが、まったくの素人で原因がさっぱり分かりません。すべて読み込むのを待ってからですと正常に(オンマウスでスライドがストップ。マウスをはずすとスライドする。)なのです。

ちなみにFC2ブログなので”jquery.cycle.js”は
”jquerycycle.js”としています。
お手数ですがご教示頂ければ幸いです。宜しくお願い致します。

2009年11月05日 15:55

Ageha

Ageha

あー解決しました!!!

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さん、ありがとうございました。同じことを考えている人のためにもこれらのコメントを残して頂くとうれしいです。

2009年10月29日 03:15

Ageha

Ageha

回答ありがとうございます!
説明不足ですみません。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だとなぜか動かないので、どう合体させればいいのかわからないのです。。

2009年10月29日 03:01

MIYA

MIYA

Agehaさん

現状使っているプラグインは、この記事で紹介しているプラグインと同じって事でよろしいでしょうか?

そうであれば、#slideshow .slides-nav の部分の padding や width の数値を変更して頂くと場所を移動させる事が出来ますよ。

2009年10月28日 21:37

Ageha

Ageha

やっと思い通りに動くjQuery発見!と思ったのですが、Next, Prevのボタンをイメージ上に配置したいのです。ただいま奮闘中なのですが、参考になるサイトなどあれば教えて頂きたいです。。

2009年10月28日 15:40

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article