Слайдер для изображений
Вложений: 1
Помогите, пожалуйста, девочке с js. Учусь делать слайдер, в котором при прокрутке изображений частично видны предыдущее и последующее изображения. Размер моих фото 640х480px. Не знаю, как изменить код, чтобы первый снимок смещался на 640px, а последующие на 680px. Помогите!
var width = 640; // ширина изображения
var count = 1; // количество изображений
var slider = document.getElementById('slider');
var list = slider.querySelector('ul');
var listElems = slider.querySelectorAll('li');
var position =0; // текущий сдвиг влево
slider.querySelector('.prev').onclick = function() {
// сдвиг влево
position = Math.min(position + width * count, 0)//Возвращает наименьший из списка аргументов
list.style.marginLeft = position + 'px';}
slider.querySelector('.next').onclick = function() {
// сдвиг вправо
position = Math.max(position - width * count, -width * (listElems.length - count));//Возвращает наибольший из списка аргументов
list.style.marginLeft = position + 'px';
};
|
virgoprima,
а html? |
Слайдер для изображений
Вложений: 2
рони,
Совсем забыла:)) Я приложила код к сообщению как txt файлы. Помогите, пожалуйста!!! |
virgoprima,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slider</title>
<style type="text/css">html{font-size:10px}
body{padding:10px}
.slider{position:relative;width:1000px;height:550px;background:#aed;padding-top:50px}
.img{width:800px;overflow:hidden;margin:auto;background:#F00}
.slider img{width:640px;height:480px;display:block;opacity:0.6}
.img ul{height:480px;width:9999px;list-style:none;transition:left 500ms;font-size:0;position:relative}
.img li{display:inline-block;margin-right:40px}
.arrow{position:absolute;top:500px;padding:0;background:#ddd;border-radius:15px;border:1px solid gray;font-size:24px;line-height:24px;color:#444;display:block}
.arrow:focus{outline:none}
.arrow:hover{background:#ccc;cursor:pointer}
.prev{left:25px}
.next{right:25px}
.img ul{transition:all 1s ease-in-out}
</style>
</head>
<body>
<div id="slider" class="slider">
<button class="arrow prev">⇦</button>
<div class="img">
<ul>
<li id="img1"><img src="http://lorempixel.com/image_output/nature-q-c-640-480-4.jpg" alt="природа"></li>
<li id="img2"><img src="http://lorempixel.com/image_output/nature-q-c-640-480-5.jpg" alt="природа"></li>
<li id="img3"><img src="http://lorempixel.com/image_output/nature-q-c-640-480-7.jpg" alt="природа"></li>
<li id="img4"><img src="http://lorempixel.com/image_output/nature-q-c-640-480-8.jpg" alt="природа"></li>
<li id="img5"><img src="http://lorempixel.com/image_output/nature-q-c-640-480-3.jpg" alt="природа"></li>
</ul>
</div>
<button class="arrow next">⇨</button>
</div>
<script>
var slider = document.getElementById("slider");
var list = slider.querySelector("ul");
var listElems = slider.querySelectorAll("li");
var position = 0;
function move(position) {
var sum = 0;
for (var i = 0; i < position; i++) sum += i ? 680 : 640;
list.style.marginLeft = -sum + "px"
}
slider.querySelector(".prev").onclick = function() {
position = ++position % listElems.length;
move(position)
};
slider.querySelector(".next").onclick = function() {
--position;
position < 0 && (position = listElems.length - 1);
move(position)
};
</script>
</body>
</html>
|
рони,
Спасибо вам огромное за помощь!!! Подскажите, пожалуйста, правильно ли я понимаю работу тернарного оператора в кусочке кода ниже
function move(position) {
var sum = 0;
for (var i = 0; i < position; i++) {sum += i ? 680 : 640};
list.style.marginLeft = -sum + "px"
}
В начале просмотра i=0, поэтому возвращается false - следовательно marginLeft = -640; в случае true sum = sum+680. Верно? Подскажите, пожалуйста, как работает функция для селектора .prev? Еще раз большое-большое-большое вам спасибо!! |
рони,
Я прошу прощения. Имела в виду, что не понимаю, как работает функция для .next.:thanks: |
Цитата:
Цитата:
prev - position = 0 1 2 3 4 0 1 2 3 4 ...; next - position = 0 4 3 2 1 0 4 3 2 1 ...; лучше назвать index а не position, в этом варианте. |
рони,
Спасибо!!!!:thanks: :thanks: :thanks: |
| Часовой пояс GMT +3, время: 08:02. |