javascript - 创建一个 javascript slider ；幻灯片 Action 在第一张幻灯片上不起作用，但滑动 Action 在第二张幻灯片后起作用？

Question

我正在为我的网站构建一个 Javascript slider ，我似乎遇到了一个奇怪的问题。我希望在单击“下一张幻灯片”链接时发生滑动。当我第一次点击“下一张幻灯片”时，图像只是从第一张跳到第二张；但是，当我第二次单击“下一张幻灯片”时，图像会按我希望的方式滑动到第三张。有谁知道为什么滑动 Action 似乎跳过了初始点击？请参阅下面的代码。

.html

 <script>
    var Slider = function() { this.initialize.apply(this, arguments) }
    Slider.prototype = {

      initialize: function(slider) {
        this.ul = slider.children[0]
        this.li = this.ul.children

        // make <ul> as large as all <li>’s
        this.ul.style.width = (this.li[0].clientWidth * this.li.length) + 'px'

        this.currentIndex = 0
      },

      goTo: function(index) {
        // filter invalid indices
        if (index < 0 || index > this.li.length - 1)
          return

        // move <ul> left
        this.ul.style.left = '-' + (100 * index) + '%'

        this.currentIndex = index
      },

      goToPrev: function() {
        this.goTo(this.currentIndex - 1)
      },

      goToNext: function() {
        this.goTo(this.currentIndex + 1)
      }
    }
  </script>

  <div class="slider">
    <ul>
      <li><img src="commercial1.png"></li>
      <li><img src="commercial2.png"></li>
      <li><img src="commercial3.png"></li>
    </ul>
  </div>

  <script>
    var sliders = []
    $('.slider').each(function() {
      sliders.push(new Slider(this))
    })
  </script>

  <div class="controls">
    <ul>
      <li><a href="javascript:sliders[0].goToPrev()">.goToPrev()</a></li>
      <li><a href="javascript:sliders[0].goToNext()">.goToNext()</a></li>
    </ul>
    </div>

.CSS

.slider {
  width: 1000px; height: 500px;
  overflow: hidden;
}
  .slider > ul {

 position: relative;
-webkit-transition: 0.5s left;
-moz-transition: 0.5s left;
-ms-transition: 0.5s left;
-o-transition: 0.5s left;

    list-style: none;
    margin: 0; padding: 0;
  }
    .slider > ul > li {
      float: left;
      width: 1000px; height: 500px;
    }

    .controls {

    padding-top:10px;   

    }

Answer 1

它不起作用的原因是您提供了初始状态以供其转换。

简单地调整你的CSS

  .slider > ul {
   position: relative;
   transition: left .5s ease-in-out;
   left:0;
 }

*注意 left:0;

这样就可以了