javascript - 如何使用模态在同一页面上添加多个幻灯片?
问题描述
我在我的网站上创建了模态,并尝试在每个模态上添加不同的幻灯片。
使用此代码,我在每个模式上都获得了相同的幻灯片,但只是添加了一些幻灯片。
我想添加不影响其他幻灯片的幻灯片。
我怎样才能做到这一点?
HTML
<div class="experience-list exper1">
<img src="" class="exp-image" />
<button class="overlay" id="myBtn" data-modal="myModal">
<div class="exper-details">
<div class="exper-title"></div>
<div class="exper-info"></div>
</div>
</button>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext"><!--1 / 3--></div>
<img src="" />
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="" />
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="" />
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div class="modal-info">
<div class="modal-details">
</div>
</div>
<span class="close">×</span>
</div>
</div>
</div>
<div class="experience-list exper2">
<img src="" class="exp-image" />
<button class="overlay" id="myBtn2" data-modal="myModal2">
<div class="exper-details">
<div class="exper-title"></div>
<div class="exper-info"></div>
</div>
</button>
<div id="myModal2" class="modal">
<div class="modal-content">
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext"><!--1 / 3--></div>
<img src="" />
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="" />
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="" />
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div class="modal-info">
<div class="modal-details">
</div>
</div>
<span class="close">×</span>
</div>
</div>
</div>
JAVASCRIPT
<!--MODAL-->
<script>
var modalBtns = [...document.querySelectorAll(".overlay")];
modalBtns.forEach(function (btn) {
btn.onclick = function () {
var modal = btn.getAttribute('data-modal');
document.getElementById(modal).style.display = "block";
}
});
var closeBtns = [...document.querySelectorAll(".close")];
closeBtns.forEach(function (btn) {
btn.onclick = function () {
var modal = btn.closest('.modal');
modal.style.display = "none";
}
});
window.onclick = function (event) {
if (event.target.className === "modal") {
event.target.style.display = "none";
}
}
</script>
<!--SLIDESHOW-->
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
</script>
这是我添加到上一个问题模式的模式代码
<!--MODAL-->
<script>
var modalBtns = [...document.querySelectorAll(".overlay")];
modalBtns.forEach(function (btn) {
btn.onclick = function () {
var modal = btn.getAttribute('data-modal');
document.getElementById(modal).style.display = "block";
}
});
var closeBtns = [...document.querySelectorAll(".close")];
closeBtns.forEach(function (btn) {
btn.onclick = function () {
var modal = btn.closest('.modal');
modal.style.display = "none";
}
});
window.onclick = function (event) {
if (event.target.className === "modal") {
event.target.style.display = "none";
}
}
</script>
模态 CSS
/* MODAL */
.modal {
display:none;
position:fixed;
z-index: 1;
/*padding-top: 100px;*/
margin-top:100px;
left:0;
top:0;
width:100vw;
height: 750px;
overflow:auto;
/*background-color: rgb(0,0,0);*/
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fff;
color: #252C3C;
margin: auto;
padding: 0;
/*border: 1px solid #888;*/
width: 50%;
height: 720px;
}
.modal-info {
border-top: 3px solid #252C3C;
margin-left: 20px;
margin-right:20px;
}
.modal-info h1 {
font-weight: 400;
}
.modal-info h4 {
font-size: 18px;
}
.modal-details {
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.modal-info p {
font-size: 18px;
}
.modal-info a {
padding: 11px 30px;
margin-top:10px;
font-size: 15px;
transition: all .5s;
cursor: pointer;
background: #E31B6D;
color: #fff;
font-weight: 600;
border: 0;
}
.close {
color: #252C3C;
float:right;
font-size: 45px;
font-weight: bold;
position:fixed;
left:74%;
top:82%;
}
.close:hover, .close:focus {
color:pink;
text-decoration:none;
cursor:pointer;
}
解决方案
你可以试试这样的=>
在 JavaScript 中:
var slideIndex = 1;
showSlides(slideIndex, "mySlides");
showSlides(slideIndex, "mySlides2");
function plusSlides(n, slide) {
showSlides(slideIndex += n, slide);
}
function currentSlide(n, slide) {
showSlides(slideIndex = n, slide);
}
function showSlides(n, slide ) {
var i;
var slides = document.getElementsByClassName(slide);
var dots = document.getElementsByClassName("dot");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
//dots[slideIndex - 1].className += " active";
}
在 html 中:
<div class="experience-list exper1">
<img src="" class="exp-image" />
<button class="overlay" id="myBtn" data-modal="myModal">
<div class="exper-details">
<div class="exper-title"></div>
<div class="exper-info">
</div>
</button>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext"><!--1 / 3--></div>
<img src="" />
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="" />
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="" />
</div>
<a class="prev" onclick="plusSlides(-1,'mySlides')">❮</a>
<a class="next" onclick="plusSlides(1,'mySlides')">❯</a>
</div>
<div class="modal-info">
<div class="modal-details">
</div>
</div>
<span class="close">×</span>
</div>
</div>
</div>
<div class="experience-list exper2">
<img src="" class="exp-image" />
<button class="overlay" id="myBtn2" data-modal="myModal2">
<div class="exper-details">
<div class="exper-title"></div>
<div class="exper-info"></div>
</div>
</button>
<div id="myModal2" class="modal">
<div class="modal-content">
<div class="slideshow-container">
<div class="mySlides2 fade">
<div class="numbertext"><!--1 / 3--></div>
<img src="" />
</div>
<div class="mySlides2 fade">
<div class="numbertext"></div>
<img src="" />
</div>
<div class="mySlides2 fade">
<div class="numbertext"></div>
<img src="" />
</div>
<a class="prev" onclick="plusSlides(-1,'mySlides2')">❮</a>
<a class="next" onclick="plusSlides(1,'mySlides2')">❯</a>
</div>
<div class="modal-info">
<div class="modal-details">
</div>
</div>
<span class="close">×</span>
</div>
</div>
</div>
推荐阅读
- python - How OpenCV's ConnectedComponent algorithm works?
- python - 如何使用 python 在邮件正文中发送 html 内容?
- c - 如何使用 C 编程添加和显示从串行端口获取的数据的小时、分钟、秒
- javascript - ReactJS:如何防止 array.push 中的重复值?
- python - 如何使用python删除图像中图形周围的白色边框/边缘?
- python - 如何在 Python 中打开 .txt 文件进行数据存储?
- javascript - 如何重置我的许多选择框值?
- android - 删除或销毁当前活动之外的所有活动
- kubernetes - OpenEBS cstore 卷在删除和覆盖时非常慢
- kotlin - 每当 Recyclerview 行中的文本在 Kotlin 中更改时,是否有办法更改 MainActivity 中的 textview 文本