@danilich44

Как сделать чтобы при движении ползунка(range) менялась картинка?

Всем привет, Как сделать чтобы при движении ползунка(range) менялась картинка на js?
60a512e4dc864329776096.jpeg
  • Вопрос задан
  • 82 просмотра
Пригласить эксперта
Ответы на вопрос 2
@haveacess
Джун не диагноз. Хотя, могло быть иначе
Повесить на событие (движение ползунка) получение его значения.

Полагаю будет Минимальное значение 0. Максимальное 100.
Ну а дальше дело техники предположим у нас есть 5 картинок, 100/5 = шаг 20 (т.е. каждые 20 ед. ползунка мы должны менять картинку).
0 - 20 = 1 картинка
20 - 40 = 2 картинка
40 - 60 = 3 картинка ну и тд

Ну и как выбрать текущую картинку. Формула будет примерно такой:
100 / кол-во картинок = X (наш шаг) //20
текущее положение ползунка / X = номер картинки (только тут получится дробное число, приведи к целому (int)число).Примерно так

HTML
<body>
        <div>
            <input type="range" id="volume" name="volume"  min="0" max="100" value="0">
            <label for="volume" id="imageInfo"></label>
        </div>
    </body>


//с ивентами тут можно поиграться. что бы в процессе уже срабатывал ивент, а не только после отжатия кнопки
        $('#volume').change(function() {
            let images = ['one.jpg', 'two.png', '3.png', 'четвертое изображение', '5 картинка'];

            let position = $(this).val();
            let curImage = Math.trunc(position / (100 / images.length));
            $('#imageInfo').text('Position: ' + position + ' ;Image: ' + images[curImage]);
        });


PS решение выше куда элегантнее)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы