>

슬라이드 쇼를위한 코드에 문제가 있으며, 매우 바보 같은 느낌이 들었습니다. '이전'버튼을 작동시킬 수 없습니다. 클릭해도 아무 변화가 없습니다. '다음'버튼은해야 할 일을합니다. 나는 그것이 내 자바 스크립트와 관련이 있다고 가정하며, 그 지식은 매우 제한적인 지식을 가지고 있습니다 (의미 없음).

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";}

.mySlides {display: none}
    img {vertical-align: middle;
    }

    .slideshow-container {
    width: 100%;
    hight: 100%;
    position: relative;
    margin: auto; 
    }
    .active, .dot:hover {
    background-color: #717171;
    }
    .prev {
    cursor: pointer;
    position: absolute;
    left:5px;
    margin-lift: 5px;
    }
    .next {
    cursor: pointer;
    position: absolute;
    right:5px;
    margin-right: 5px;
    }

<div class="mySlides fade">
     <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
     <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
     <div class="wrapper">
  <div class="imagelandscape"><img src="http://image.JPG" style= " display: block; max-height:auto; width:100%; "></div>
  </div>

전체 코드는 간단한 w3schools 슬라이드 쇼를 기반으로합니다. 나는 이것에 매우 익숙하므로 모든 사람들의 도움과 인내심에 감사드립니다.


  • 답변 # 1

    function init(){
        ul = document.getElementById('image_slider');
        liItems = ul.children;
        imageNumber = liItems.length;
        imageWidth = liItems[0].children[0].clientWidth;
        // set ul's width as the total width of all images in image slider.
        ul.style.width = parseInt(imageWidth * imageNumber) + 'px';
        prev = document.getElementById("prev");
        next = document.getElementById("next");
        /*.onclike = onClickPrev() will be fired when onload; is this because closure?? */
        prev.onclick = function(){ onClickPrev();};
        next.onclick = function(){ onClickNext();};
    }
    
    
    .nvgt{
        position:absolute;
        top: 120px;
        height: 50px;
        width: 30px;
        opacity: 0.6;
    }
    .nvgt:hover{
        opacity: 0.9;
    }
    #prev{
        background: #000 url('./image/prev.png') no-repeat center;
        left: 0px;
    }
    #next{
        background: #000 url('./image/next.png') no-repeat center;
        right: 0px;
    }
    
    
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="Image-Slider-LnR.js"></script>
        <link rel="stylesheet" type="text/css" href="Image-Slider-LnR.css">
    </head>
    <body>
        <div class="container">
            <div class="slider_wrapper">
                <ul id="image_slider">
                    <li><img src="./image/1.jpg"></li>
                    <li><img src="./image/4.jpg"></li>
                    <li><img src="./image/5.jpg"></li>
                    <li><img src="./image/4.jpg"></li>
                    <li><img src="./image/1.jpg"></li>
                    <li><img src="./image/5.jpg"></li>
                </ul>                   
                <span class="nvgt" id="prev"></span>
                <span class="nvgt" id="next"></span>
            </div>
        </div>
    </body>
    </html>
    
    

  • 이전 php - 배열에서 첫 번째 빈 키를 찾는 방법
  • 다음 javascript - 여러 단어를 검증하는 단수 정규식