<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<div class="slider">
<ul>
<li><img src="i/1.jpg" alt=""></li>
<li><img src="i/2.jpg" alt=""></li>
<li><img src="i/3.jpg" alt=""></li>
<li><img src="i/4.jpg" alt=""></li>
<li><img src="i/5.jpg" alt=""></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".slider").each(function () { // обрабатываем каждый слайдер
var obj = $(this);
$(obj).append("<div class='nav'></div>");
$(obj).find("li").each(function () {
$(obj).find(".nav").append("<span rel='"+$(this).index()+"'></span>"); // добавляем блок навигации
$(this).addClass("slider"+$(this).index());
});
$(obj).find("span").first().addClass("on"); // делаем активным первый элемент меню
});
});
function sliderJS (obj, sl) { // slider function
var ul = $(sl).find("ul"); // находим блок
var bl = $(sl).find("li.slider"+obj); // находим любой из элементов блока
var step = $(bl).width(); // ширина объекта
$(ul).animate({marginLeft: "-"+step*obj}, 500); // 500 это скорость перемотки
}
$(document).on("click", ".slider .nav span", function() { // slider click navigate
var sl = $(this).closest(".slider"); // находим, в каком блоке был клик
$(sl).find("span").removeClass("on"); // убираем активный элемент
$(this).addClass("on"); // делаем активным текущий
var obj = $(this).attr("rel"); // узнаем его номер
sliderJS(obj, sl); // слайдим
return false;
});
</script>
<style type="text/css">
.slider {
z-index: 9;
width: 700px;
height: 290px;
overflow: hidden;
margin: 0 0 7px;
position: relative;
}
.slider ul,
.slider li {
padding: 0;
margin: 0;
list-style-type: none;
}
.slider ul {
width: 9999px;
}
.slider ul li {
list-style-type: none;
float: left;
width: 700px;
height: 290px;
}
.slider .nav {
position: absolute;
left: 15px;
bottom: 12px;
}
.slider .nav span {
opacity: 0.9;
background: #fff;
margin: 0 8px 0 0;
width: 16px;
height: 16px;
border-radius: 8px;
cursor: pointer;
overflow: hidden;
display: block;
float: left;
box-shadow: 0 1px 2px #000;
}
.slider .nav span.on {
background: #2e9419;
}
</style>
Используя этот модуль, преподаватели / сотрудники создают живые онлайн-классы, используя сервис Zoom.us
Модуль управления покупками - это инструмент для управления ежедневными покупками. Он упакован со всеми необходимыми функциями,
« Октябрь 2024 » | ||||||
---|---|---|---|---|---|---|
Пн | Вт | Ср | Чт | Пт | Сб | Вс |
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Комментарии
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.