Question

我正在尝试制作一个slideShow类似的东西，但当我尝试重新定位按钮时，我有保证金和/或位置绝对的问题当我写道：

<style="position: absolute; left: somepx; etc:"></style>

或

<div style="position: absolute; left: somepx; etc:"></div>

我在div中的代码例如我的按钮有这个代码：

<button class="slide" onclick="plusDivs(-1)" 
style="margin: 265px;">&#10094;</button>

我在这里有jsCode：

var slideIndex = 1;
    showDivs(slideIndex);

    function plusDivs(n) {
        showDivs(slideIndex += n);
    }

    function showDivs(n) {
        var i;
        var x = document.getElementsByClassName("mySlides");
        if (n > x.length) {slideIndex = 1}
        if (n < 1) {slideIndex = x.length} ;
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        x[slideIndex-1].style.display = "block";
    }

我也有一些文字他们在课堂上：mySlides

当我运行代码时按钮被重新定位但它不起作用

与保证金相同

请帮助

Answer 1

从你发布的代码中可以很难说出错误的地方，因为它不包括在内。请检查以下内容：

如果要使用onclick
你的幻灯片元素没有班级mySlides（也许你不小心把它给了容器）

或者您也可以使用按钮上的事件，因为您发布的脚本运行正常：

document.getElementById('btn').addEventListener('click', function() {
    plusDivs(-1);
});

这是一个完整的Snipptet

var slideIndex = 1;
showDivs(slideIndex);

document.getElementById('btn').addEventListener('click', function() {
  plusDivs(-1);
});

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  };
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
}

<div style="position: absolute; left: 50px;"></div>
<div class="mySlides">1</div>
<div class="mySlides">2</div>
<div class="mySlides">3</div>
<button id="btn" class="slide" style="margin: 8px;">&#10094;</button>

HTML5：位置：绝对或/和保证金会破坏我的代码

1 个答案: