Форум

virgoprima · #1 (**permalink**) 08.05.2016, 13:02

Помогите, пожалуйста, девочке с 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';
     
      
    };

рони · #2 (**permalink**) 08.05.2016, 13:24

virgoprima,
а html?

virgoprima · #3 (**permalink**) 09.05.2016, 20:18

рони,

Совсем забыла

) Я приложила код к сообщению как txt файлы. Помогите, пожалуйста!!!

рони · #4 (**permalink**) 09.05.2016, 21:30

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>

virgoprima · #5 (**permalink**) 10.05.2016, 16:14

рони,

Спасибо вам огромное за помощь!!! Подскажите, пожалуйста, правильно ли я понимаю работу тернарного оператора в кусочке кода ниже

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?

Еще раз большое-большое-большое вам спасибо!!

virgoprima · #6 (**permalink**) 10.05.2016, 16:21

рони,

Я прошу прощения. Имела в виду, что не понимаю, как работает функция для .next.

рони · #7 (**permalink**) 10.05.2016, 16:22

Сообщение от virgoprima

В начале просмотра i=0, поэтому возвращается false - следовательно marginLeft = -640; в случае true sum = sum+680. Верно?

да

Сообщение от virgoprima

Подскажите, пожалуйста, как работает функция для селектора .prev?

точно также как для next, только в другом направлении
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, в этом варианте.

virgoprima · #8 (**permalink**) 10.05.2016, 21:27

рони,

Спасибо!!!!

Форум

Справочник

Discord чат

Курсы javascript