Пару дней назад, когда я делал портфолио другу на его сайте, я опять встретился с этой проблемой. И мне пришла в голову мысль. Я видел несколько статей где изменяют стандартные стили 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>
Вот и всё, если у кого что-то не работает из-за моей ошибки, пишите в комментариях, исправлю (у меня всё работает :).
Комментарии (34)
dpigo
24.10.2016 20:26+6Слайдшоу без JS это вот так.
OtshelnikFm
24.10.2016 22:41А я жду статью «слайдшоу без js», а внутри инструкция как из 5 jpg слепить один gif.
Это какой-то дикий тренд. То год без jquery, теперь вот год без js…
Хорошо когда возможности инструментов и языков знаешь, но серьезно преподносить это…
PaulMaly
25.10.2016 10:53+1Год без js уже идет: http://youmightnotneedjs.com ;)))
OtshelnikFm
25.10.2016 10:55Да, спасибо, и про этот ресурс я тоже имел ввиду — его по пабликам активно репостят
MetaDone
24.10.2016 21:17+20<script> var idArray = [<?php $i=1; while($i <= $b){echo '"s'.$i.'"'; $i++};?>];
dmx102
24.10.2016 22:21У меня при заходе с мобильного несколько раз редиректит и отправляет на сайт какого-то хостера.
ingumsky
24.10.2016 22:45+3Я всё понимаю, конечно, но, судя по стилю и восторгу неофита, статью писал ребёнок или подросток. Мне кажется, можно было обойтись без зубодробительного сарказма в его адрес. Качество статьи – сомнительно, то, что статья прошла песочницу – странно, но парня загнобили зазря :/
Merkat0r
24.10.2016 23:50+4Возможно, но лучше сразу наставить на путь истинный, а что как не хабр лучше всего сбивает спесь и максимализм :)
ingumsky
25.10.2016 00:02+3Мне показалось, что никакой спеси не было, просто весьма детская радость за то, что сам придумал. Зло как-то получилось со стороны сообщества.
stokker
25.10.2016 00:21Автор просто решил повысить ЧСВ читателей…
ingumsky
25.10.2016 00:43+2Молодыми и наивными мы все были. А такой приём сообщества, возможно, на всю жизнь отобьёт у человека желание изучать новое и делиться им с другим.
Поставил ему плюс в карму, чтобы хотя бы немного компенсировать урон :/ Будем считать, что «за старание».
MetaDone
25.10.2016 09:38среди статей написанных подростками есть и вполне нормальные — https://habrahabr.ru/post/303912/ например. там тоже корявости, но автор хотя бы понимает что они есть
0Ilya
25.10.2016 03:04Интернет пестрит подобными статьями, года 2 назад видел статью «слайдер на чистом css», ничем от содержания данной статьи не отличается. :/
SDI
25.10.2016 13:10+2На мой взгляд, эта статья более полезная (и на нее затратилось больше времени), чем популярные нынче статьи «Функция X из ES6/ES7 быстрее/медленнее функции Y из ES5/ES3, так как я проверил этот факт с помощью цикла for»
Pavel_White
25.10.2016 17:40Я понял, понял что я ещё маленький, да. Но у меня ещё нет денег для защиты от Ddos, зачем вы к сайту то пристали?
rikert
25.10.2016 19:06На Хабре главное в правильном регистре написать заглавную букву, верно расставить знаки препинания ну и не дай бог включить смайл в текст. А статьи школьников за обилием проплаченных текстов модераторы не видят.
gunlinux
25.10.2016 19:06+1Кликните Admin Panel
Откройте просмотр исходного кода
<!doctipe html>
Орите
pan-alexey
25.10.2016 19:06Пожалуй добавлю в закладки, вдруг пригодиться. По моему мы нашли победителя в номинации лучший js код, но без js.
Правда автопереключение на следующую картинку наверное на html, css не сделать
Существуют такие способы transition и animation и т.п.
MGames
25.10.2016 19:06Что-то последнее время на хабре непонятные вещи происходят. Как подобные статьи проходят модерацию? Нет, я понимаю, что для новичков тоже должен быть материал, но ведь от подобного больше вреда, чем пользы.
Stenni
25.10.2016 19:06Ув. автор не пишите больше для хабра пока не наберетесь достаточно опыта и знаний. Подобные решения в таком исполнении травмируют психику…
Rad1calDreamer
25.10.2016 19:06осталось еще изображения на фон ставить чуть меньше чем 800кб и тогда заживем…
funnybanana
Мне было бы стыдно такое писать на хабр…
Очень надеюсь что это был сарказм…