-1
필자는 내 함수가 전역이 아니므로 변경했지만 내 showSlides 함수 만 적용되지 않고 작동하지 않을 수 있다는 점을 읽었습니까? 이 문제를 어떻게 해결할 수 있습니까? 미안 일부 명백한 대답이 있다면, 나는 webdev에 새로운 있습니다.하나의 JS 함수가 작동하지 않지만 나머지는 jsfiddle에서 괜찮습니까?
참고 : showSlides가 아니기 때문에 currentSlide와 plusSlides가 작동하는지 여부는 알 수 없지만 문제가 연결된 것으로 가정합니다. 클래스 명 '데모'로 모든 요소를 가지고 있지 않기 때문에
window.openModal = function openModal() {
document.getElementById('myModal').style.display = "block";
}
window.closeModal = function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
window.plusSlides = function plusSlides(n) {
showSlides(slideIndex += n);
}
window.currentSlide = 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 = dots[slideIndex - 1].alt;
}body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background: rgba(0, 0, 0, 0.9);
}
/* Modal Content */
.modal-content {
position: relative;
background-color: rgba(0, 0, 0, 0.9);
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
text-decoration: none;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
t img.hover-shadow {
transition: all .2s ease-in-out;
}
.hover-shadow:hover {
transform: scale(1.1);
}
.modal-content {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}<body>
<h2 style="text-align:center">Modal Albums</h2>
<div class="row">
<div class="column">
<img src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1/4</div>
<img src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2/4</div>
<img src="http://www.hardwallpapers.com/uploads/3527_Smudge-hdr.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3/4</div>
<img src="https://assets.rockefellerfoundation.org/app/uploads/20151124121133/15659655525_e6cfc22b56_o-1200x800.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4/4</div>
<img src="https://support.kickofflabs.com/wp-content/uploads/2016/06/800x1200.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>https://jsfiddle.net/8ynLwfcf/
* " 나는 stackoverflow가 "* *"라고 말했기 때문에 이것을 입력했다. 관련없는 코드 블록을 제거하기 위해 질문을 작성하고 대신 관련 코드를 질문 본문에 직접 입력하십시오. Fiddles는 유용한 보충 자료이지만 요청하는 코드의 유일한 소스로 사용되어서는 안됩니다. 문제와 관련하여 브라우저의 콘솔을 확인 했습니까? (만약 당신이 문제를 좁히는 데 도움이되는 런타임 오류를 보게 될 것입니다.) – nnnnnn
각 코드 블록을 보여주고 각 단계에서 무슨 일이 일어나고 있는지 설명하면 사람들이 '디버그 code ' –
브라우저 ** 개발자 ** 도구 콘솔 (stckoverflow 이전에 디버깅의 첫 번째 지점이되어야 함)은'TypeError : dots [(slideIndex - 1)] is undefined'를 보여줍니다. –