HTML&CSS,  jQuery

HTML&CSS:スライドの切り替え1(初期状態の画像の設定について)

HTML&CSS:スライドの切り替え1(初期状態の画像の設置について)

やりたいこと!

初期状態では1枚目の画像を表示しておき、
2番目のボタンを押すことで、2枚目の写真が表示されるようにする

①今までのパターン:初期状態では要素を完全に隠し、イベントで表示させる

今までは、隠したい要素をCSSのdisplay:none;で全て非表示にしておき、
クリックなどイベントが生じた際に、addClassを使って、
事前に用意しておいたdisplay:block;のCSSを持つクラスを追加。

初期状態では、html内にdisplay:block;を持つクラスを設置しないのが
ポイントで、これによって、要素すべてにdisplay:none;が適用、
要素が全く表示されないようになっている。

html

<ul>

<li class="slide"><img src="#"></li>
          
<li class="slide"><img src="#">lt;/li>
<li class="slide"><img src="#"></li>
<li class="slide"><img src="#"></li>

</ui>


CSS

.slide {
 display:none;
 }

.active {
 display:block;
 }

②今回のパターン:初期状態で1枚目の画像を表示、イベントによって画像を切り替える

今回の場合は、これと少し違って初期状態では、
1枚画像を表示させるようにしたい。

そこで、1枚目の画像に任意のクラス(例:active)をつけ、
CSSで任意のクラスにdisplay:block;をつけておく。

これで、display:block;のついている1枚目の画像が表示され、
残りの画像は、display:none;によって非表示になる。

パターン①と違い、初期状態で、html内にdisplay:blockを持つクラスを設置するのがポイント。

2番目のボタンを押すことで、2枚目の画像が表示されるようにするには、
ボタンがクリックされたとき、1枚目につけていたactiveのクラスを外し、
クリックされた番号の画像、今回は2枚目の画像にactiveクラスを追加すればよい。

html

<ul>

<li class="slide active"><img src="#"></li>
          
<li class="slide"><img src="#"></li>
<li class="slide"><img src="#"></li>
<li class="slide"><img src="#"></li>

</ui>

CSS

.slide {
 display:none;
 }

.active {
 display:block;
 }

コメントを残す

メールアドレスが公開されることはありません。