0

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

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

这是我的 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>
4

1 回答 1

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>

于 2020-01-30T10:40:13.327 回答