javascript - 下一张图片按钮
问题描述
尝试制作下一个按钮但不起作用。 https://jsfiddle.net/vd89ekrf/6/
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('myImages');
var modalImg = document.getElementById('img01');
var captionText = document.getElementById('caption');
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function() {
modal.style.display = 'block';
modalImg.src = this.src;
captionText.innerHTML = this.alt;
};
}
var span = document.getElementsByClassName('close')[0];
span.onclick = function() {
modal.style.display = 'none';
};
var nextimage = document.getElementById('next');
for (var i = 0; i < images.length; i++) {
var currentImage = images[i];
nextimage.onclick = function() {
currentImage++;
};
}
.frame {
margin: auto;
}
.column {
max-width: 25%;
flex: 25%;
padding: 0 0%;
}
.column img {
vertical-align: middle;
width: 100%;
padding: 10% 10%;
}
body {
margin: auto;
max-width: 1500px;
background-image: linear-gradient(135deg, #4da0b0, #d39d38);
}
.picFrame {
display: flex;
flex-wrap: wrap;
margin: auto;
transition opacity: .25s ease-in-out;
}
.myImages {
border-radius: 50%;
}
.myImages:hover {
opacity: 0.7;
cursor: pointer;
}
div {
display: block;
}
.searchBar {
text-align: center;
}
input {
width: 450px;
font-size: 20px;
padding: 10px;
margin: 2% auto;
border: solid rgb(204, 203, 203);
border-radius: 25px;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: none;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
outline: 1px blue;
}
.modal-content {
display: flex;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
max-width: 1000px;
}
.modal-content,
#caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #fffefe;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: rgb(143, 143, 143);
text-decoration: none;
cursor: pointer;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
color: white;
font-weight: bold;
transition: 0.6s;
font-size: 40px;
}
.prev:hover,
.next:hover {
transition: 0.35s;
transform: scale(2);
}
.next {
right: 5%;
}
.prev {
left: 5%;
}
<div class="frame">
<div class="picFrame">
<div class="column">
<img class="myImages" id="myImg" src="http://cdn.cnn.com/cnnnext/dam/assets/181010131059-australia-best-beaches-cossies-beach-cocos3.jpg" />
<div id="myModal" class="modal">
<span class="close">×</span>
<a class="prev">❮</a>
<a class="next">❯</a>
<img class="modal-content" id="img01" />
<div id="caption">Description</div>
</div>
<img class="myImages" id="myImg" src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/beach-quotes-1559667853.jpg" />
<div id="myModal" class="modal">
<img class="modal-content" id="img01" />
<div id="caption">Description</div>
</div>
</div>
</div>
</div>
解决方案
您正在尝试使用 ID“next”(不存在)选择下一个按钮。此外,在选择下一个图像时也存在问题。
工作代码:
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('myImages');
var modalImg = document.getElementById('img01');
var captionText = document.getElementById('caption');
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function () {
const currentImage = images[currentImageIndex];
modalImg.src = this.src;
captionText.innerHTML = this.alt;
modal.style.display = 'block';
};
}
var span = document.getElementsByClassName('close')[0];
span.onclick = function () {
modal.style.display = 'none';
currentImageIndex = 0; // reset index
};
var currentImageIndex = 0;
const currentImage = images[currentImageIndex];
var nextimage = document.getElementById('next');
nextimage.onclick = function () {
if (images[currentImageIndex + 1]) {
currentImageIndex++;
const currentImage = images[currentImageIndex];
modalImg.src = currentImage.src;
captionText.innerHTML = currentImage.alt;
modal.style.display = 'block';
}
};
.frame {
margin: auto;
}
.column {
max-width: 25%;
flex: 25%;
padding: 0 0%;
}
.column img {
vertical-align: middle;
width: 100%;
padding: 10% 10%;
}
body {
margin: auto;
max-width: 1500px;
background-image: linear-gradient(135deg, #4da0b0, #d39d38);
}
.picFrame {
display: flex;
flex-wrap: wrap;
margin: auto;
transition opacity: .25s ease-in-out;
}
.myImages {
border-radius: 50%;
}
.myImages:hover {
opacity: 0.7;
cursor: pointer;
}
div {
display: block;
}
.searchBar {
text-align: center;
}
input {
width: 450px;
font-size: 20px;
padding: 10px;
margin: 2% auto;
border: solid rgb(204, 203, 203);
border-radius: 25px;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: none;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
outline: 1px blue;
}
.modal-content {
display: flex;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
max-width: 1000px;
}
.modal-content,
#caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #fffefe;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: rgb(143, 143, 143);
text-decoration: none;
cursor: pointer;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
color: white;
font-weight: bold;
transition: 0.6s;
font-size: 40px;
}
.prev:hover,
.next:hover {
transition: 0.35s;
transform: scale(2);
}
.next {
right: 5%;
}
.prev {
left: 5%;
}
<div class="frame">
<div class="picFrame">
<div class="column">
<img class="myImages" id="myImg" src="http://cdn.cnn.com/cnnnext/dam/assets/181010131059-australia-best-beaches-cossies-beach-cocos3.jpg" />
<div id="myModal" class="modal">
<span class="close">×</span>
<a class="prev">❮</a>
<a id = "next" class="next">❯</a>
<img class="modal-content" id="img01" />
<div id="caption">Description</div>
</div>
<img class="myImages" id="myImg" src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/beach-quotes-1559667853.jpg" />
<div id="myModal" class="modal">
<img class="modal-content" id="img01" />
<div id="caption">Description</div>
</div>
</div>
</div>
</div>
推荐阅读
- node.js - Heroku Container:stderr:“gcc:尝试执行'cc1plus'时出错:execvp:没有这样的文件或目录
- vba - PATHS:尾随反斜杠还是不尾随反斜杠?
- powershell - Powershell - 合并两个 Note 属性
- events - rpi4 add_event_detect 事件触发器
- javascript - 在 React Native 中更新屏幕上的内容会使动画组件冻结
- c# - 从 VB6 中读取 C# dll
- sql - 操作数类型错误:日期与 int 不兼容
- css - CSS Grid Nesting 导致子网格从父网格单元格中溢出
- amazon-web-services - 是否有任何 RDS 的 cloudwatch 警报指标来检查连接问题?
- apache-kafka - 如何迁移 Confluent 的 Apache Kafka Schema Registry < 5.2.0?