javascript - 单击时更改 div 的图像背景

Question

我正在尝试使用 JavaScript 和 razor 代码构建自己的 slider 叠加层。

如果 slider 包含 3 个图像，则底部将有 3 个“较小”图像。我想要做的是可以单击底部图像之一，完成后，顶部 slider 会更改图像。

这是我的 html + razor 部分:

@{
 var slideshow = Model.Value<IEnumerable<IPublishedContent>>("SlideShowImages"); // From Umbraco published model
 }
<section class="background-overlay-container" style="margin: 0; text-align: center;">
  @foreach (var item in slideshow)
    {
        <div class="slideshow" style="background: url('@item.Url')left center/100% 140% no-repeat !important;">
            <h3 style="position:absolute"></h3>
            <button class="button-left" onclick="plusDivs(-1)">&#10094;</button>
            <button class="button-right" onclick="plusDivs(1)">&#10095;</button>
        </div>
    }
</section>
<div class="dots" style="border: 0px solid red; width:100%; display:block; position:relative; padding:12px; text-align:center">
    @foreach (var item in slideshow)
    {
        <img src="@item.Url" width="150" height="90" style="display:inline-block; cursor:pointer;" onclick="currentDiv()" />
    }

</div>

这是 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";
}

浏览器输出

 <section class="background-overlay-container" style="margin: 0; text-align: center;">
        <div class="slideshow" style="background: url('/media/xk5bmxzg/book1.jpg')left center/100% 140% no-repeat !important;">
            <h3 style="position:absolute"></h3>
            <button class="button-left" onclick="plusDivs(-1)">&#10094;</button>
            <button class="button-right" onclick="plusDivs(1)">&#10095;</button>
        </div>
        <div class="slideshow" style="background: url('/media/qf3laila/book6.png')left center/100% 140% no-repeat !important;">
            <h3 style="position:absolute"></h3>
            <button class="button-left" onclick="plusDivs(-1)">&#10094;</button>
            <button class="button-right" onclick="plusDivs(1)">&#10095;</button>
        </div>
        <div class="slideshow" style="background: url('/media/qqjpadbt/book5.jpg')left center/100% 140% no-repeat !important;">
            <h3 style="position:absolute"></h3>
            <button class="button-left" onclick="plusDivs(-1)">&#10094;</button>
            <button class="button-right" onclick="plusDivs(1)">&#10095;</button>
        </div>
    </section>
<div class="dots" style="border: 0px solid red; width:100%; display:block; position:relative; padding:12px; text-align:center">
        <img src="/media/xk5bmxzg/book1.jpg" width="150" height="90" style="display:inline-block; cursor:pointer;" onclick="currentDiv()" />
        <img src="/media/qf3laila/book6.png" width="150" height="90" style="display:inline-block; cursor:pointer;" onclick="currentDiv()" />
        <img src="/media/qqjpadbt/book5.jpg" width="150" height="90" style="display:inline-block; cursor:pointer;" onclick="currentDiv()" />

</div>

Answer 1

这里我编辑了一些代码希望这对你有帮助。

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")
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="background-overlay-container" style="margin: 0; text-align: center;">
        <div class="slideshow" style="background: url('/media/xk5bmxzg/book1.jpg')left center/100% 140% no-repeat !important;">
            <h3 style="position:absolute"></h3>
            <button class="button-left" onclick="plusDivs(-1)">&#10094;</button>
            <button class="button-right" onclick="plusDivs(1)">&#10095;</button>
        </div>
        <div class="slideshow" style="background: url('/media/qf3laila/book6.png')left center/100% 140% no-repeat !important;">
            <h3 style="position:absolute"></h3>
            <button class="button-left" onclick="plusDivs(-1)">&#10094;</button>
            <button class="button-right" onclick="plusDivs(1)">&#10095;</button>
        </div>
        <div class="slideshow" style="background: url('/media/qqjpadbt/book5.jpg')left center/100% 140% no-repeat !important;">
            <h3 style="position:absolute"></h3>
            <button class="button-left" onclick="plusDivs(-1)">&#10094;</button>
            <button class="button-right" onclick="plusDivs(1)">&#10095;</button>
        </div>
    </section>
<div class="dots" style="border: 0px solid red; width:100%; display:block; position:relative; padding:12px; text-align:center">
        <img src="https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="150" height="90" style="display:inline-block; cursor:pointer;" onclick="currentDiv(this)" />
        <img src="https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__340.jpg" width="150" height="90" style="display:inline-block; cursor:pointer;" onclick="currentDiv(this)" />
        <img src="https://thumbs.dreamstime.com/b/autumn-oak-leaf-fantastic-beautiful-spray-bubbles-blue-background-magic-autumn-blue-background-yellow-oak-leaf-158238643.jpg" width="150" height="90" style="display:inline-block; cursor:pointer;" onclick="currentDiv(this)" />

</div>