我正在尝试使用javascript和剃刀代码构建自己的滑块叠加层。
如果滑块包含3张图像,则底部将显示3张“较小”图像。我想做的就是可以单击底部的图像之一,一旦完成,顶部的滑块就会更改图像。
这是我的html +剃须刀部分:
@{
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>
答案 0 :(得分: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)">❮</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="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>