【发布时间】：2023-03-14 14:51:01
【问题描述】：
我正在尝试使用 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)">❮</button>
<button class="button-right" onclick="plusDivs(1)">❯</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)">❮</button>
<button class="button-right" onclick="plusDivs(1)">❯</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)">❮</button>
<button class="button-right" onclick="plusDivs(1)">❯</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)">❮</button>
<button class="button-right" onclick="plusDivs(1)">❯</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>
【问题讨论】：
-
为什么要为每张幻灯片添加一个 img/button div？你不是只需要一个吗？另外，请发布最终的 HTML，而不是模板代码。
-
按钮不是问题，因为它们会在每张图片上更新，但我可以将它们移到循环之外。您在上面看到的是滑块的完整代码，它工作正常。如果您需要知道我如何访问循环，请更新我的答案
-
只看JS代码，
imgFullURL指向一个HTMLImageElement，而不是它的URL。 -
@MishMish 您可以发布此代码的输出 HTML。或 slideshow 的对象值？
-
@ZulqarnainJalil 当你说输出时，你的意思是浏览器如何翻译它？
标签： javascript asp.net model-view-controller razor umbraco8