👩🏻‍🎤 🍘 🧚🏿 JSを使用しないスライドショー 🤓 ⚽️ 🖐🏻

サイトでスライドショーをしたことがありますか？そう思うので、この記事を書くことにしました。時々私はサイトでこれをしなければなりませんが、私はまだjsを知らず、通常それを探し、ソースをダウンロードして、それらを設定しようとします。

数日前、友人のウェブサイトで友人のポートフォリオを作成していたときに、この問題に再び遭遇しました。そして、私に考えが起こりました。 labelタグを使用して標準のラジオおよびchecboxスタイルを変更する記事をいくつか見ました。それで、私はそのような奇妙な「正式な」スライドショーを作ることにしました。 slideshow_without_js_v1.0のようなことをしたとき、このコードのシンプルさを実感しました。確かに、次の画像への自動切り替えはおそらくhtmlであり、CSSは実行できませんが、誰かがそれを必要としないが、誰がそれを必要とするか、私はすべてをJSに配置しました。もっと正確に言えば、私ではなく、少しグーグルで検索しなければなりませんでした。

だからv1：

<div class="slideshow"> <div class="slides"> <label><img class="slide" src="__1"><input id='s1' type=radio /></label> <label><img class="slide" src="__2"><input id='s2' type=radio /></label> <label><img class="slide" src="__3"><input id='s3' type=radio /></label> </div> <div class="labels"> <label for="s1"><img src="__1" class='label'></label> <label for="s2"><img src="__2" class='label'></label> <label for="s3"><img src="__3" class='label'></label> </div> </div>

まあ、スタイル：

 input[type=radio] {display: none;} img.slide {max-width: 950px; max-height: 500px; margin: 0 auto; border-radius: 5px; display: none;} label input:checked ~ img {display: block;} img.label {height: 150px; }

こことメインデモ： slauk3run.pe.hu/portfolio 。

そして、私が約束したように、自動切り替えが必要な人のために：

 var idArray = ["s1", "s2", "s3"]; var i = 0; setInterval(function(){ document.getElementById(idArray[i]).click(); i = (i+1)%idArray.length; }, 10000);

最初は、s1、s2、s3はid無線です。 10,000の終わりは、シフト間の時間です。

そして今、PHPプログラマーには驚きがあり、各ファイルをページに入力する必要がなく、単にフォルダーにドロップするだけです（スーパーアップグレード）：

  <div class="slideshow"> <div class="slides"> <?php $a = 1; foreach (glob("____/*.jpg") as $Picture) { $a = $a + 1; echo "<label><input name=slide type=radio id=s".$a; if($a == 2)echo " checked"; echo "><img class='slide' src='".$Picture."'></label>"; }; ?> </div> <div class="labels"><?php $b = 1; foreach (glob("images/*.jpg") as $Picture) { $b = $b + 1; echo "<label for='s".$b."'><img class='label' src='".$Picture."'></label>"; }; ?></div> </div> <script> var idArray = [<?php $i=1; while($i <= $b){echo '"s'.$i.'"'; $i++};?>]; var i = 0; setInterval(function(){ document.getElementById(idArray[i]).click(); i = (i+1)%idArray.length; }, 10000); </script>

それがすべてです、私の間違いのために何かが誰かのためにうまくいかない場合、コメントを書いて、私はそれを修正します（すべてが私のために働く:)。

JSを使用しないスライドショー

More articles: