HTML、CSS、Javaスクリプトを使用して

質問

HTML、CSS、Javaスクリプトを使用して1つの場所に、リンク付きの画像を順番に複数表示させ、それをループさせるにはどのようにすれば良いでしょうか？

回答No.13

AsarKingChang · ベストアンサー

必要ファイルはすべてCDNからの自力取り込みです。
（外部にある、サーバーから入手しているという事）
なので、貴方が用意するのは、
画像とリンクを押した後の画像のみ？となるでしょう。

技術的に、突っ込んでくれたらうれしいポイントが、
ヘッダー内で、scriptを実行しているが、
この位置ではまだ、body内のHTMLは読み込んでないんじゃないの？
ってことに気が付いてくれたら結構、「お～」だったりも＾＾
だから$で始まるんですけどね。(というか、jqueryのthisポインタ)
HTMLを読み込み終わってから$が動くために
先に宣言をまとめられるという特性です。
こうすると、BODYの中は、綺麗になるのが、わかってもらえたかと。

ただ、やってることは他のサンプルをローカルで動くように
しただけなので、特に私は何もしてませんけどね。

ではでは！おそくなりましたね。ごめんね～

お礼

ありがとうございました。 大変助かりました。 無事組み込めました。

Powered by GRATICA

回答No.2

AsarKingChang

>リンク付きの画像を順番に複数表示させ
であれば、例えば、
<style>
.waaa {
display : none;
}
</style>
HTML パートでは、このクラスをキーとした
<a herf=アドレス class=waaa><img src="画像"></a>
<a herf=アドレス class=waaa><img src="画像"></a>
<a herf=アドレス class=waaa><img src="画像"></a>
　必要個数並べる
　しかし、デフォルトがdisplay:noneなので、表示はされない。
後は、JavaScriptで、キーwaaaを拾うと、使用した個数classが見つかるので、
全部に display : none; にオーバーライドをかけたら、
次の表示物だけをdisplay : show;にオーバーライドしていく。
ってのを、タイマー割込みにセット。
後は、見つかった個数を超えたらカウンタリセット。

これで、要件定義は満たすと思われます。

回答No.1

t_ohta

フルスクラッチで作りたいのですか？
それとも画像をスライドさせる機能が実現すればいいだけですか？

機能を実現するだけなら Splide などのライブラリを使うのが手っ取り早いと思います。