Изменить фоновое изображение div на клике - PullRequest
Новая
       133

Изменить фоновое изображение div на клике

0 голосов
/ 30 января 2020

Я пытаюсь создать свой собственный оверлей ползунка, используя javascript и код бритвы.

Если слайдер содержит 3 изображения, то внизу будет 3 "меньших" изображения. Что я хочу сделать, так это сделать возможным щелкнуть одно из нижних изображений, и, как только это будет сделано, верхний ползунок сменит изображение.

Вот моя html + часть бритвы:

image

и вот часть javascript, которая не работает. То, что я пытаюсь написать, это получить текущий путь по кликнувшему изображению и обновить верхний фон div с ним: 

function currentDiv() {
var imgFullURL = document.querySelector('dots.img');
var slide = document.getElementsByClassName("slideshow").item(0);
slide.style.backgroundImage = "url('" + imgFullURL + "')";
}

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("slideshow");
    if (n > x.length) { slideIndex = 1 }
    if (n < 1) { slideIndex = x.length }
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    x[slideIndex - 1].style.display = "block";
}

ВЫХОД БРАУЗЕРА

image

1 Ответ

1 голос
/ 30 января 2020

Здесь я отредактировал код, надеюсь, это поможет вам. 

function currentDiv(img) {
var slide = document.getElementsByClassName("slideshow").item(0);
slide.style.backgroundImage = "url('"+img.src+"')";
}

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {

    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("slideshow");
    if (n > x.length) { slideIndex = 1 }
    if (n < 1) { slideIndex = x.length }
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    x[slideIndex - 1].style.display = "block";
    var images=document.querySelector(".dots").getElementsByTagName("img");
    x[slideIndex - 1].style.backgroundImage = "url('"+images[slideIndex - 1].src+"')"; document.querySelector(".dots").getElementsByTagName("img")
}
image
...