Вам приходилось когда-нибудь делать на сайте слайд-шоу? Думаю да, именно поэтому я решил написать эту статью. Иногда мне приходится делать это на сайтах, но я пока не знаю 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> Вот и всё, если у кого что-то не работает из-за моей ошибки, пишите в комментариях, исправлю (у меня всё работает :).
ссылка на оригинал статьи https://habrahabr.ru/post/313472/
Добавить комментарий