javascript - 单击时更改 div 的图像背景
问题描述
我正在尝试使用 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>
解决方案
在这里,我编辑了一些代码,希望对您有所帮助。
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>
推荐阅读
- javascript - 承诺不等待 NodeJS 中的返回值
- javascript - 如何使用 Axios 定义是否需要参数?
- python-3.x - 如何在 Visual Studio Code IDE 中解决“无法导入 'requests'pylint(import-error)”?
- python - 尝试通过 VSCodium 打开执行 Python 脚本的文件时没有此类文件或目录错误
- android - 不能在两个不同的视图上使用相同的 BindingAdapter
- sql-server - 迁移后的 SSRS 异常
- python - FileNotFoundError: [Errno 2] No such file or directory: 'D:\\global.txt' 我在谷歌协作 ipython 笔记本上执行这个
- android - MutableLiveData setValue:Activity 的 onCreate 中的意外行为
- nativescript - 如何导航到 Nativescript 中的另一个组件?
- ios - 为什么辅助 ViewConrollers 的 First Responder 不显示主要 ViewController 方法?