Question

我正在尝试做滑块/旋转木马。由于用户点击左或右箭头，我设置了下方的点。这工作正常，用户可以单击一个点并以这种方式更改幻灯片。但是，当图像自动更改时，下面的所有点都是“空白”。

这是脚本：

    var myIndex = 0;
    carousel();

    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("dots");
      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";
    }

    function carousel() {
        var i;
        var x = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dots");
        for (i = 0; i < x.length; i++) {
           x[i].style.display = "none";  
        }
        for (i = 0; i < dots.length; i++) {
          dots[i].className = dots[i].className.replace(" active", "");
        }

        myIndex++;
        if (myIndex > x.length) {myIndex = 1}    
        x[myIndex-1].style.display = "block";  
        setTimeout(carousel, 5000); // Change image every 5 seconds
    }

这里有一些HTML

        <div id="slider_dots">
            <span class="dots" onClick="currentSlide(1)"></span>
            <span class="dots" onClick="currentSlide(2)"></span>
            <span class="dots" onClick="currentSlide(3)"></span>
            <span class="dots" onClick="currentSlide(4)"></span>
        </div><!--dots-->

Answer 1

您可能需要仔细检查Chrome中的点元素，以确定它不是与CSS相关的内容。

就个人而言，我总是发现使用vanilla javascript删除类有问题。幸运的是，jQuery极大地简化了它。

这是我经常使用的几乎相同的脚本......

    var slide = document.querySelectorAll("side nav ul");   // Identify each page to cycle through.
    var dots  = document.getElementsByClassName('dot');     // Identify each dot generated within #pagination.
    var slideIndex = 1;
    var slideViewing = false;


// Dynamically creates dots based on length of slides.
    for (i = 0; i < slide.length; i++) {
        $('#pagination').append("<a class='dot' rel='"+[i]+"'>" + [i] + "</a>" );
    }

    slider(slideIndex);


// Next/previous controls
    function slideChange(n) {
        slider(slideIndex += n);
        slideViewing = true;
    }


// Manual Transition (using arrow keys)
    document.addEventListener('keydown', function(e) {
        if(e.keyCode == 37) {
            slideChange(-1);
        }
        if(e.keyCode == 39) {
            slideChange(1);
        }
    });


    function slider(n) {
        if (n > slide.length) { 
            slideIndex = 1; 
        } 
        if (n < 1) {
            slideIndex = slide.length;
        }
        for (i = 0; i < slide.length; i++) {
            slide[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            $(dots[i]).removeClass('active');
        }

    // Style active slide and dot.
        slide[slideIndex - 1].style.display = "block";
        $(dots[slideIndex - 1]).addClass('active');

    // Loop (for auto transition)
        setTimeout(slider, 14000);
    }

这会使点（等于幻灯片的数量）自动插入...

<div id="pagination"></div>

滑块/旋转木马点不能正常用于半自动旋转木马

1 个答案: