Question

我阅读了W3Schools JavaScript章节，并尝试制作图片幻灯片。我先做了一切，它在第一轮中运作正常。例如，假设我单击下一个按钮，它将继续滑动幻灯片直到幻灯片结束，然后如果我再次单击它将重置所有内容但在此之后永远不会工作。此外，当我包含DocType减速时，它甚至从一开始就不会起作用。

以下是包含CSS和JavaScript代码的HTML：

    <html lang="en">
       <head>
        <title>
          Project Name
        </title>

       <style>
*
{
margin: 0px;
padding: 0px;
}

body
{
margin: 25px;
}

#slideshow
{
width : 300px;
height: 300px;
border: 1px solid #000;
margin: 0 auto;

}

#slides
{
position: relative;
width: 900px;
height: 300px;
transition: 1s;

}

.slide
{
 width : 300px;
 height: 300px;
 float: left;
}
      </style>
      </head>

<body>
    <div id="slideshow">
        <div id="slides">
            <img class ="slide" src="images/slide1.jpg">
            <img class="slide" src="images/slide2.jpg">
            <img class="slide" src="images/slide3.jpg">
        </div>
    </div>

    <button onclick="prev()">prev</button>
    <button onclick="next()">next</button>





    <script type="text/javascript">
        var value = 300;
        function next()
        {
            var slider = document.getElementById("slides");

            if(value == 900)
            {
                 slider.style.left = "0";
                 value = 300;        
            }
            else
                {
                    slider.style.right = value;
                    value += 300;
                }
        }
    </script>
</body>

Answer 1

完成一轮后，您必须将right属性设置为0。在您的代码中，您将left设置为0，但您的权利仍然是900。这是问题，因此请更改代码以将right设置为0

        if(value == 900)
        {
             slider.style.right = "0";
             value = 300;        
        }

Answer 2

硬编码JS值是不好的做法有一天你会改变CSS中的滑块宽度，并想知道JS部件发生了什么......

使其响应
使用JS动态计算幻灯片的数量
创建计数器变量c=0
上一个/下一个操纵您的计数器值（使用%循环）
tranistion-animate为-100*c，百分比为%

var slider = document.getElementById("slides"),
    slide  = slider.querySelectorAll(".slide"),
    tot = slide.length, c = 0;

function anim() {
  c = c<0 ? tot-1 : c%tot;
  slider.style.left= -100*c +"%";
}anim();

function next() { ++c; anim(); }
function prev() { --c; anim(); }

#slideshow {
  height: 150px;
  border: 1px solid #000;
  overflow:hidden;
}

#slides {
  position: relative;
  height: 100%;
  width: 100%;
  white-space:nowrap;
  font-size:0; /* removes 4px inline-block gap */
  transition: 1s; -webkit-transition: 1s;
}

.slide {
  font-size: 1rem; /* restore font size */
  display:inline-block;
  vertical-align:top;
  width : 100%;
  height: 100%;
  background: none 50%;
  background-size: cover;
}

<div id="slideshow">
  <div id="slides">
    <div class="slide"
         style="background-image:url(http://placehold.it/800x600/0fb);"></div>
    <div class="slide"
         style="background-image:url(http://placehold.it/800x600/bf0);"></div>
    <div class="slide"
         style="background-image:url(http://placehold.it/800x600/f0b);"></div>
  </div>
</div>

<button onclick="prev()">prev</button>
<button onclick="next()">next</button>

现在您的滑块已响应，请放入任何容器中，并且宽度可以容纳。

我的JavaScript图片滑块仅适用于一轮？

2 个答案: