Question

我最近在这里创建了一个简单的图像滑块：http://americanbitcoinacademy.com/test2/

它基本上有一个next和prev按钮并滑动图像。您可以在此处查看代码：https://jsfiddle.net/mmytscuz/

现在我正在尝试将这些代码应用到我的新元素，但这一次而不是图像我试图使用div元素应用它。

您可以在此处查看我当前的进度：https://jsfiddle.net/7808uLpv/

所以基本上当你点击下一个按钮时，它必须在下一个列表项元素上向上滑动。出于某种原因，它现在也不会隐藏其他元素，也不会滑动。

到目前为止，我的元素布局如何：

<ul class="slider">

<li>
  <div class="box center">
  <h1>What is your name?</h1>
  <input type="text" name="name" placeholder="Your Name.."/>
    <div id="slider-nav">
        <button data-dir="next" >Next &raquo;</button>
    </div>
  </div>
</li>

<li>
  <div class="box center">
  <h1>How much money do you have?</h1>
  <input type="text" name="money" placeholder="Your Money.."/>
  <div id="slider-nav">
    <button data-dir="next" >Next &raquo;</button>
  </div>
  </div>
</li>

<li>
  <div class="box center">
  <h1>Your Birthday?</h1>
  <input type="text" name="bday" placeholder="Your Birthday.."/>
  <div id="slider-nav">
    <button data-dir="next" >Next &raquo;</button>
  </div>
  </div>
</li>

</ul>

这是我的javascript：

(function() {
 var container = $('div.slider').css('overflow', 'hidden').children('ul'),
   slider = new Slider( container, $('#slider-nav') );

 slider.nav.find('button').on('click', function() {
   slider.setCurrent( $(this).data('dir') );
   slider.transition();
 });
})();


function Slider( container, nav ) {
    this.container = container;
    this.nav = nav.show();

    this.imgs = this.container.find('img');
    this.imgWidth = this.imgs[0].width; // 600
    this.imgsLen = this.imgs.length;

    this.current = 0;
}

Slider.prototype.transition = function( coords ) {
    this.container.animate({
        'margin-left': coords || -( this.current * this.imgWidth )
    });
};

Slider.prototype.setCurrent = function( dir ) {
    var pos = this.current;

    pos += ( ~~( dir === 'next' ) || -1 );
    this.current = ( pos < 0 ) ? this.imgsLen - 1 : pos % this.imgsLen;

    return pos;
};

当我点击“下一步”按钮时，不知道我做错了什么。按钮为什么元素不滑动为什么它们都会立刻出现？

Answer 1

添加jQuery是因为没有不工作。参见演示here

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

Answer 2

你的小提琴有很多不妥。

没有加载jQuery。
您引用插件初始化时没有div.slider。
您像对象一样使用id slider-nav。 Id必须是唯一的。
在css中li.slider需要.slider li
您正在寻找js中的图片，但标记中没有图片。
因此，您的插件会抛出错误，尝试检测不存在的这些图像的宽度：this.imgs[0].width;

Imo，重新开始，获得稳固的html和css基础，然后尝试编写js插件。

Div滑块不起作用 - Javascript

2 个答案: