цикличный слайдер
Помогите пожалуйста на чистом js написать слайдер, суть его в том что при нажатии влево картинка уходит влево и появляется следующая, и соответственно, вправо, при всем при этом когда заканчиваются фотографии должен происходить цикл, то есть опять первая фотография должна сменять последнюю, большое спасибо всем отозвавшимся
<div id="left_arrow"></div>
<div id="right_arrow"></div>
<div id="slider">
<img class="child_img" src="">
<img class="child_img" src="">
<img class="child_img" src="">
</div>
http://learn.javascript.ru/play/AbKn5 Я понимаю что строю велосипед есть много примеров на jquery, но я хочу ради урока создать самому с нуля, подскажите что делать надо |
http://learn.javascript.ru/play/zfzaeb
извиняюсь за нецензурщину в ссылке, такой адрес выдали, я не виноват |
Спасибо большое очень благодпрен
можете прокомментировать чтобы легче было разобраться в логике? <script>
var picsNum = document.getElementById('slider').getElementsByTagName('img').length;
var now = 0;
var sliderOffset = [];
for (var i = 0; i < picsNum; i++) sliderOffset.push(-i * 104 + 'px');
console.table(sliderOffset);
document.getElementById('left_arrow').onclick = function() {
--now;
if(now < 0) now = picsNum - 1;
document.getElementById('slider').style.left = sliderOffset[now];
}
document.getElementById('right_arrow').onclick = function() {
++now;
if(now > picsNum - 1) now = 0;
document.getElementById('slider').style.left = sliderOffset[now];
}
</script>
|
var picsNum = document.getElementById('slider').getElementsByTagName('img').length; // считаем сколько картинок заложено в слайдер
var now = 0; // первой будет выведена картинка с индексом 0 (т.е. первая)
var sliderOffset = [];
for (var i = 0; i < picsNum; i++) sliderOffset.push(-i * 104 + 'px'); // создаем массив с вариантами смещения слайдера для каждой картинки
console.table(sliderOffset); // для отладки, это я забыл убрать. Выводит в консоль получившийся массив. Можете удалить строку
document.getElementById('left_arrow').onclick = function() {
--now;// уменьшаем индекс картинки
if(now < 0) now = picsNum - 1; // если залезли в отрицательную область, делаем текущей последнюю картинку
document.getElementById('slider').style.left = sliderOffset[now]; //смещаем слайдер в соответствии с текущей картинкой
}
document.getElementById('right_arrow').onclick = function() {
++now; // увеличиваем индекс картинки
if(now > picsNum - 1) now = 0; // если индекс больше, чем может быть, делаем текущей первую картинку
document.getElementById('slider').style.left = sliderOffset[now]; // см. выше
}
|
В продолжении темы о слайдерах, очень пригодится ваша логика в построении того слайдера который нужен. Есть замечательный css слайдер картинок,Существует задача чтобы вместе с картинками менялся и текст соответствующий картинкам. Сложность существует в том что в данном слайдере невозможно почему то выделить селекторы кнопок вправо влево, смотрите самиhttp://learn.javascript.ru/play/hMpwob
Дайте пожалуйста направление как сделать меняющимся и текст |
Цитата:
А в данном случае, если есть возможность поправить верстку, легко можно добавить нужным label id'шники и навешивать обработчики клика по ним. |
например, я не понимаю как это сделать там же leblов динамическое количество, продемонстрируйте пожалуйста
|
Цитата:
<div class="side-controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>
<label for="slide6"></label>
</div>
|
Извините не указал что собираюсь сделать слайдер динамическим, будет так
<div class="side-controls">
<?
foreach ($slider as $key=>$value){
?>
<label for="slide<?=$value['id']?>"></label>
<?
}
?>
</div>
|
Цитата:
<label id="lab<?=$value['id']?>" for="slide<?=$value['id']?>"></label> ммм? |
| Часовой пояс GMT +3, время: 10:36. |