Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.05.2016, 13:02
Новичок на форуме
Отправить личное сообщение для virgoprima Посмотреть профиль Найти все сообщения от virgoprima
 
Регистрация: 17.04.2016
Сообщений: 5

Слайдер для изображений
Помогите, пожалуйста, девочке с 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';
     
      
    };
Изображения:
Тип файла: jpg Безымянный.jpg (11.4 Кб, 3 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 08.05.2016, 13:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

virgoprima,
а html?
Ответить с цитированием
  #3 (permalink)  
Старый 09.05.2016, 20:18
Новичок на форуме
Отправить личное сообщение для virgoprima Посмотреть профиль Найти все сообщения от virgoprima
 
Регистрация: 17.04.2016
Сообщений: 5

Слайдер для изображений
рони,

Совсем забыла) Я приложила код к сообщению как txt файлы. Помогите, пожалуйста!!!
Вложения:
Тип файла: txt slider.txt (2.5 Кб, 1 просмотров)
Тип файла: txt style.txt (1.0 Кб, 1 просмотров)
Ответить с цитированием
  #4 (permalink)  
Старый 09.05.2016, 21:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #5 (permalink)  
Старый 10.05.2016, 16:14
Новичок на форуме
Отправить личное сообщение для virgoprima Посмотреть профиль Найти все сообщения от virgoprima
 
Регистрация: 17.04.2016
Сообщений: 5

рони,

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

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?


Еще раз большое-большое-большое вам спасибо!!
Ответить с цитированием
  #6 (permalink)  
Старый 10.05.2016, 16:21
Новичок на форуме
Отправить личное сообщение для virgoprima Посмотреть профиль Найти все сообщения от virgoprima
 
Регистрация: 17.04.2016
Сообщений: 5

рони,

Я прошу прощения. Имела в виду, что не понимаю, как работает функция для .next.
Ответить с цитированием
  #7 (permalink)  
Старый 10.05.2016, 16:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от 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, в этом варианте.

Последний раз редактировалось рони, 10.05.2016 в 16:24.
Ответить с цитированием
  #8 (permalink)  
Старый 10.05.2016, 21:27
Новичок на форуме
Отправить личное сообщение для virgoprima Посмотреть профиль Найти все сообщения от virgoprima
 
Регистрация: 17.04.2016
Сообщений: 5

рони,

Спасибо!!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Дополнить плагин для мозилы JS-API 10000руб Chris_Phils Работа 2 30.09.2015 13:59
[job] JS-разработчик (+Angular) на UI внутреннего проекта (для других разработчиков:) Anna-HR Работа 12 19.01.2015 13:50
Посоветуйте слайдер для показа .swf TheWanderer jQuery 2 29.06.2013 10:40
HTA-приложение для радио Pianorama Magneto Ваши сайты и скрипты 42 22.01.2012 08:34
Посоветуйте слайдер для магазина Zhazhah jQuery 3 22.11.2011 22:05