Question

我正在使用materializecss轮播，现在我有2个按钮。当我单击“工作”按钮（在转盘之外）时，转盘将转到下一张幻灯片。但是，当我单击“不工作”按钮（在转盘中）时，即使您在第一张幻灯片中，它也总是转到第一张幻灯片。

document.addEventListener("DOMContentLoaded", function() {
  var elems = document.querySelectorAll(".carousel");
  var instances = M.Carousel.init(elems);

  window.next = function() {
    var el = document.querySelector(".carousel");
    var l = M.Carousel.getInstance(el);
    l.next(1);
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="carousel">
  <a class="carousel-item red" href="#one!">
    <button class="btn next" onclick="next()">Not working</button>
  </a>
  <a class="carousel-item yellow" href="#two!"></a>
  <a class="carousel-item green" href="#three!"></a>
  <a class="carousel-item teal" href="#four!"></a>
  <a class="carousel-item blue" href="#five!"></a>
</div>
<button class="btn next" onclick="next()">Working</button>

我还使用了一种方法，如果我单击“不工作”按钮，它将触发“工作”按钮单击事件。我想要的是“不起作用”按钮，应该在不使用jquery的情况下转到下一张幻灯片

Answer 1

在button元素内每次单击，也是在锚标记内单击。这两个元素都在执行冲突的操作，或者您不想执行的操作。因此，您将必须停止其中之一。

一种实现方法是告诉每个按钮注册click事件，并停止向其父元素告知click事件，从而导致定位标记忽略点击。

由于您不想使用jquery，因此必须将此行为手动附加到每个元素。

var pages = document.querySelectorAll(".carousel-item button");

for(var i=0; i<pages.length;i++) {
    pages[i].addEventListener("click", function(e){
      e.stopPropagation();
    });
}


document.addEventListener("DOMContentLoaded", function() {
  var elems = document.querySelectorAll(".carousel");
  var instances = M.Carousel.init(elems);

  window.next = function() {
    var el = document.querySelector(".carousel");
    var l = M.Carousel.getInstance(el);
    l.next(1);
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="carousel">
  <a class="carousel-item red" href="#one!">
    <button class="btn next" onclick="next()">Not working</button>
  </a>
  <a class="carousel-item yellow" href="#two!"></a>
  <a class="carousel-item green" href="#three!"></a>
  <a class="carousel-item teal" href="#four!"></a>
  <a class="carousel-item blue" href="#five!"></a>
</div>
<button class="btn next" onclick="next()">Working</button>

Answer 2

这是针对Materialize版本1.0.0

HTML示例

                <a onclick="prev()" class="prev btn-floating btn waves-effect waves-light red"><i class="fas fa-chevron-left"></i></a>
    
                <a onclick="next()" class="next btn-floating btn waves-effect waves-light red"><i class="fas fa-chevron-right"></i></a>

            <div class="carousel carousel-slider center">
              <div class="carousel-fixed-item center">
                <a class="btn waves-effect white grey-text darken-text-2">button</a>
              </div>

              <div class="carousel-item amber white-text" href="#two!">
                <h2>Second Panel</h2>
                <p class="white-text">This is your second panel</p>
              </div>
              <div class="carousel-item green white-text" href="#three!">
                <h2>Third Panel</h2>
                <p class="white-text">This is your third panel</p>
              </div>
              <div class="carousel-item blue white-text" href="#four!">
                <h2>Fourth Panel</h2>
                <p class="white-text">This is your fourth panel</p>
              </div>
            </div>

Javascript部分

//the function below are functions that run after the Dom Content has been loaded
          document.addEventListener('DOMContentLoaded', function() {
                M.AutoInit();

               

                //carousel activation
                var elems = document.querySelectorAll('.carousel');
                var xinstances = M.Carousel.init(elems, 
                {
                  fullWidth: true,
                  indicators: true,
                  numVisible: 3
                });

                //carousel Next function
                window.next = function() {
                  var el = document.querySelector(".carousel");
                  var l = M.Carousel.getInstance(el);
                  l.next(1);
                }

                //carousel previous function
                window.prev = function() {
                  var el = document.querySelector(".carousel");
                  var l = M.Carousel.getInstance(el);
                  l.prev(1);
                }
           }

materializecss轮播下一个使用滑块内按钮的方法（javascript）

2 个答案: