スクロールスライドショー

質問

https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js　を使って
モニター横100％で画像のスライドショーを作りたいのですが、
高さは300ｐｘくらいで、３枚表示され、マウス操作かボタンクリックで右や左の画像に代わっていく

ご指導お願いいたします。

回答No.1

fujillin · ベストアンサー

＞モニター横100％で画像のスライドショーを作りたいのですが、
＞高さは300ｐｘくらいで、３枚表示され、マウス操作かボタンクリックで
＞右や左の画像に代わっていく

どこまでできているのか/ないのか、あるいはどこまでわかっているのか／いないのかを提示しないと回答しようがないのでは？

とりあえず、
（１）画像をリスト（リストでなくても良い）などでHTMLソースに記しておいて、表示/非表示はstyleのdisplayで制御し、一つだけ表示するようにする。
マウスの操作に応じて、次（前）の画像を表示するように切り替える。（クラス設定で切り替えるようにしても良い）

とか、
（２）表示用の画像要素（1つ）をソースに用意しておき、表示対象の画像URIを配列などで定義しておいて、マウスの操作に応じてインデックスを増減し、画像要素のURIを変更することで表示を切り替える。

などの方法が考えられます。

切替をスクロールで行なうのであれば、表示位置をアニメーションで移動する（左右なら、leftの値を変えてアニメーション）ようなことが必要になります。
この場合は、単純な切替ではないので、最低でも2つの画像を同時に表示してアニメーションする必要があります。
アニメーションを伴う場合は、（１）の考え方で画像を横に並べておいて、その親要素にoverflow:hiddenを指定しておくことによって見える範囲を1画像分に限定しておき、リスト全体を左右に移動させることでスライドさせているものが多いのではないかと思います。

あるいは、
（３）ご質問のようなスクリプトは、すでに沢山作成されていると思いますので、そういったものを検索して気に入ったものを使うとか…
　　（作ることにはなりませんけれど）

関係ないけれど、なんで「1.4」なんだろうか…？　（最新版は1.7）

お礼

ありがとうございます
1.2.3をやってみます。
ご教授、ありがとうございました。

補足

ありがとうございます。
初心者ではないのですが、初心者のような者で。。。
質問が簡潔すぎて申し訳ありません。
dreamweverを使っているのですが、どうにもうまくできず。。。」