Слайд-шоу без JS

Вам приходилось когда-нибудь делать на сайте слайд-шоу? Думаю да, именно поэтому я решил написать эту статью. Иногда мне приходится делать это на сайтах, но я пока не знаю js и обычно ищу, скачиваю исходники и пытаюсь их настроить.

Пару дней назад, когда я делал портфолио другу на его сайте, я опять встретился с этой проблемой. И мне пришла в голову мысль. Я видел несколько статей где изменяют стандартные стили radio и checbox, с помощью тега label. Вот я и решил сделать вот такое странное «формное» слайд-шоу. Когда я сделал что-то типа слайд-шоу_без_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; }

Bот и главное демо: 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 radio. В конце 10000 — это время между переключениями.

A теперь сюрприз для 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>

Вот и всё, если у кого что-то не работает из-за моей ошибки, пишите в комментариях, исправлю (у меня всё работает :).

Автор: Pavel_White

Источник