在模态弹出窗口中,我需要隐藏第一张图像的左箭头,而左箭头对于两个中间幻灯片是可见的。并隐藏最后一张图像的右箭头,而左箭头在两个中间幻灯片中可见。基本上第一张图片只有右箭头,中间两张图片都有箭头,最后一张图片只有左箭头。请帮忙。请在整页中使用代码片段。
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
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("demo");
var captionText = document.getElementById("caption");
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";
captionText.innerHTML = this.alt;
}
.modal {
width: 58%;
height: 100%;
top: 0;
position: fixed;
display: none;
background-color: rgba(22,22,22,0.5);
margin-left: 300px;
max-width: 779px;
min-width: 779px;
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.mySlides {
display: none;
}
.close {
position: relative;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
left: 584px;
top: 90px;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
.cursor {
cursor: pointer;
}
.prev {
cursor: pointer;
position: relative;
top: -149px;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
left: -10%;
}
.next {
cursor: pointer;
position: relative;
top: -149px;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
left: 600px;
}
<body>
<tr>
<div class="row">
<div class="column">
<td>
<p align="center"><img
src="https://source.unsplash.com/collection/190727/1600x900" width="250" height="164"
onclick="openModal();currentSlide(1)" class="hover-shadow cursor" ></p>
</td>
</div>
<div class="column">
<td>
<p align="center"><img
src="https://source.unsplash.com/collection/190727/1600x910" width="250" height="164"
onclick="openModal();currentSlide(2)" class="hover-shadow cursor"></p>
</td>
</div>
</tr>
<tr>
<div class="column">
<td>
<p align="center"><img
src="https://source.unsplash.com/collection/190727/1600x920" width="250" height="164"
onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</td>
<td>
</div>
<div class="column">
<p align="center"><img
src="https://source.unsplash.com/collection/190727/1600x930" width="250" height="164"
onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</td>
</div>
</tr>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x900" style="width:
98%;
position: relative;
left: 10px;
top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x910" style="width:
98%;
position: relative;
left: 10px;
top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x920" style="width:
98%;
position: relative;
left: 10px;
top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x930" style="width:
98%;
position: relative;
left: 10px;
top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<a class="prev" id="prev1" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
您可以检查当前幻灯片是第一张还是最后一张。请看下面的代码片段:
let arrowPrev = document.querySelector(".prev");
let arrowNext = document.querySelector(".next");
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides((slideIndex += n));
}
function currentSlide(n) {
showSlides((slideIndex = n));
}
function showSlides(n) {
var slides = document.getElementsByClassName("mySlides");
//var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
slideIndex === 1
? (arrowPrev.style.display = "none")
: (arrowPrev.style.display = "block");
slideIndex === slides.length
? (arrowNext.style.display = "none")
: (arrowNext.style.display = "block");
for (let 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";
captionText.innerHTML = this.alt;
}
.modal {
width: 58%;
height: 100%;
top: 0;
position: fixed;
display: none;
background-color: rgba(22, 22, 22, 0.5);
margin-left: 300px;
max-width: 779px;
min-width: 779px;
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.mySlides {
display: none;
}
.close {
position: relative;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
left: 584px;
top: 90px;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
.cursor {
cursor: pointer;
}
.prev {
cursor: pointer;
position: relative;
top: -149px;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
left: -10%;
}
.next {
cursor: pointer;
position: relative;
top: -149px;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
left: 600px;
}
<body>
<tr>
<div class="row">
<div class="column">
<td>
<p align="center"><img src="https://source.unsplash.com/collection/190727/1600x900" width="250" height="164"
onclick="openModal();currentSlide(1)" class="hover-shadow cursor"></p>
</td>
</div>
<div class="column">
<td>
<p align="center"><img src="https://source.unsplash.com/collection/190727/1600x910" width="250" height="164"
onclick="openModal();currentSlide(2)" class="hover-shadow cursor"></p>
</td>
</div>
</tr>
<tr>
<div class="column">
<td>
<p align="center"><img src="https://source.unsplash.com/collection/190727/1600x920" width="250" height="164"
onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</td>
<td>
</div>
<div class="column">
<p align="center"><img src="https://source.unsplash.com/collection/190727/1600x930" width="250" height="164"
onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</td>
</div>
</tr>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x900" style="width:
98%;
position: relative;
left: 10px;
top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x910" style="width:
98%;
position: relative;
left: 10px;
top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x920" style="width:
98%;
position: relative;
left: 10px;
top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x930" style="width:
98%;
position: relative;
left: 10px;
top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<a class="prev" id="prev1" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<script src="ind.js"></script>
</body>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句