Ротатор картинок и всего чего угодно на 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:400px;
	height:200px;
}
.easyslider li {
	list-style:none;
	position:absolute;
	top:0;
	left:0;
	opacity:0;
-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:400px;
	height:200px;
}
.easyslider li.active {
	opacity:1;
}

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 #1 Владимир 17.06.2014 17:01
Классный слайдер, простота в установке
Цитировать

Добавить комментарий


Защитный код
Обновить