Ротатор картинок и всего чего угодно на CSS3 JS JQuery
Динамический переключатель класса элемента HTML
Лично мне нравится тем, что предельно прост и универсален.
Данный скрипт через промежуток времени последовательно убирает и добавляет класс active к элементу списка <li class="item">
Таким образом, внутрь элемента списка можно вставлять все что угодно. А в данном случае: элементы списка прозрачны, т.е. не видны (opacity:0;), но при добавлении класса active, opacity становится равным 1.
Не обязательно это будет слайдер или ротатор. Все зависит от CSS и от вашей фантазии. Вплоть до того чтобы сделать светофор.
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 любым удобным способом
