Слайд-шоу без 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>

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

Similar posts

Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 34

    +15
    Мне было бы стыдно такое писать на хабр…

    A теперь сюрприз для php-программистов


    Очень надеюсь что это был сарказм…
      +12
      Гениальная статья. Автор, это лучшее, что я читал за последние 85 лет. Вы открыли мне глаза!
        +18
        и рот
        +4
        Мне кажется, или я вижу JS в коде, хотя, исходя из названия, его быть не должно было?
        UPD: очень похоже на рекламу портфолио.
          +7
          Которое теперь редиректит на сайт хостера из-за превышения лимита использования CPU. Facepalm.
          +1
          В мемориз!
            +6
            Слайдшоу без JS это вот так.
              0
              А я жду статью «слайдшоу без js», а внутри инструкция как из 5 jpg слепить один gif.

              Это какой-то дикий тренд. То год без jquery, теперь вот год без js…

              Хорошо когда возможности инструментов и языков знаешь, но серьезно преподносить это…
                +1
                Год без js уже идет: http://youmightnotneedjs.com ;)))
                  0
                  Да, спасибо, и про этот ресурс я тоже имел ввиду — его по пабликам активно репостят
              +9
              Как это прошло отбор из песочницы? НЛО, ты здоров?
                +20
                 <script>
                   var idArray = [<?php $i=1; while($i <= $b){echo '"s'.$i.'"'; $i++};?>];
                

                image
                  0
                  Php в js, я старался:)
                  0
                  У меня при заходе с мобильного несколько раз редиректит и отправляет на сайт какого-то хостера.
                    +3
                    Я всё понимаю, конечно, но, судя по стилю и восторгу неофита, статью писал ребёнок или подросток. Мне кажется, можно было обойтись без зубодробительного сарказма в его адрес. Качество статьи – сомнительно, то, что статья прошла песочницу – странно, но парня загнобили зазря :/
                      +4
                      Возможно, но лучше сразу наставить на путь истинный, а что как не хабр лучше всего сбивает спесь и максимализм :)
                        +3
                        Мне показалось, что никакой спеси не было, просто весьма детская радость за то, что сам придумал. Зло как-то получилось со стороны сообщества.
                          0
                          Автор просто решил повысить ЧСВ читателей…
                            +2
                            Молодыми и наивными мы все были. А такой приём сообщества, возможно, на всю жизнь отобьёт у человека желание изучать новое и делиться им с другим.

                            Поставил ему плюс в карму, чтобы хотя бы немного компенсировать урон :/ Будем считать, что «за старание».
                      0
                      среди статей написанных подростками есть и вполне нормальные — https://habrahabr.ru/post/303912/ например. там тоже корявости, но автор хотя бы понимает что они есть
                      0
                      Интернет пестрит подобными статьями, года 2 назад видел статью «слайдер на чистом css», ничем от содержания данной статьи не отличается. :/
                        0
                        Спасибо! Посмеялся от души. ))))
                        Оставлю себе в избранном.
                          +1
                          «у меня всё работает» — так видно сразу, слова не мальчика, но мужа!
                            +1
                            Ну, зато статья попадет в самое обсуждаемое чувствую.
                              +2
                              На мой взгляд, эта статья более полезная (и на нее затратилось больше времени), чем популярные нынче статьи «Функция X из ES6/ES7 быстрее/медленнее функции Y из ES5/ES3, так как я проверил этот факт с помощью цикла for»
                                0
                                Я понял, понял что я ещё маленький, да. Но у меня ещё нет денег для защиты от Ddos, зачем вы к сайту то пристали?
                                  0
                                  На Хабре главное в правильном регистре написать заглавную букву, верно расставить знаки препинания ну и не дай бог включить смайл в текст. А статьи школьников за обилием проплаченных текстов модераторы не видят.
                                  • UFO just landed and posted this here
                                      +1

                                      Кликните Admin Panel


                                      Откройте просмотр исходного кода


                                      <!doctipe html>

                                      Орите

                                        0
                                        Пожалуй добавлю в закладки, вдруг пригодиться. По моему мы нашли победителя в номинации лучший js код, но без js.
                                        Правда автопереключение на следующую картинку наверное на html, css не сделать

                                        Существуют такие способы transition и animation и т.п.
                                          0
                                          Что-то последнее время на хабре непонятные вещи происходят. Как подобные статьи проходят модерацию? Нет, я понимаю, что для новичков тоже должен быть материал, но ведь от подобного больше вреда, чем пользы.
                                            0
                                            Ув. автор не пишите больше для хабра пока не наберетесь достаточно опыта и знаний. Подобные решения в таком исполнении травмируют психику…
                                              0
                                              осталось еще изображения на фон ставить чуть меньше чем 800кб и тогда заживем…

                                              Only users with full accounts can post comments. Log in, please.