25 мая 2014

Ротатор картинок и всего чего угодно на CSS3 JS JQuery

Динамический переключатель класса элемента HTML

Лично мне нравится тем, что предельно прост и универсален.

Данный скрипт через промежуток времени последовательно убирает и добавляет класс active к элементу списка <li class="item">

Таким образом, внутрь элемента списка можно вставлять все что угодно. А в данном случае: элементы списка прозрачны,  т.е. не видны (opacity:0;), но при добавлении класса active, opacity становится равным 1.

Не обязательно это будет слайдер или ротатор. Все зависит от CSS и от вашей фантазии. Вплоть до того чтобы сделать светофор.

  • 1
  • 2
  • 3

 

HTML:

<ul class="easyslider">
<li class="item"><img src="/images/2014/1.jpg" alt="1" /></li>
<li class="item"><img src="/images/2014/2.jpg" alt="2" /></li>
<li class="item"><img src="/images/2014/3.jpg" alt="3" /></li>
</ul>

 

CSS:


.easyslider {
	margin: 0;
	padding: 0;
	position: relative;
	width: 100%;
	height: 330px;
}

.easyslider li {
	list-style: none;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

.easyslider li img {
	width: 100%;
	height: 100%;
}

.easyslider li.active {
	opacity: 1;
	visibility: visible;
}

 

JS:

<script>
$(function () {
var $na = $('.item');
(function _loop(idx) {
$na.removeClass('active').eq(idx).addClass('active');
setTimeout(function () {
_loop((idx + 1) % $na.length);
}, 2000);
}(0));
});
</script>

Не забываем подключить JQuery любым удобным способом

 

 
Комментарии  
Владимир
+1 Владимир 17.06.2014 17:01
Классный слайдер, простота в установке
Цитировать
Добавить комментарий





Практически весь контент размещенный на сайте, вся информация является продуктом студии WSI. Если материалы взяты с других ресурсов, то обязательно указана ссылка на эти ресурсы. Вы можете бесплатно пользоваться информацией с нашего сайта, размещать ее на своих сайтах, но так же обязательна ссылка на наш сайт, Web-Sputnik.Info.


Меню
Копирайт © 2020 'Tochcha' Все права защищены