홈>

javascript - 슬라이드 쇼에서 작동하지 않는 이전 버튼

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

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 슬라이드 쇼를 기반으로합니다. 나는 이것에 매우 익숙하므로 모든 사람들의 도움과 인내심에 감사드립니다.

javascripthtmlcssslideshow

  • 답변 # 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 - 여러 단어를 검증하는 단수 정규식