Question

我正在尝试创建一个简单的JQuery Div Slider，但它似乎并没有隐藏初始div或正常运行。

这是我的HTML：

<div id="feature">
    <div class="feature_container">
        <div><p>Slide 1 Content</p></div>
        <div><p>Slide 2 Content</p></div>
    </div>
</div>

这是JQuery代码：

    <script>
  $(function(){
    $('.feature_container div:gt(0)').hide();
    setInterval(function() {
        $('.feature_container :first-child').fadeOut()
            .next('div').fadeIn()
            .end().appendTo('.feature_container');},
        3000);
    })
  });
  </script>

我在JQuery代码中做了哪些不允许或不正确的事情？

提前感谢您的任何帮助 - 非常感谢！我也会使用插件，但我真的想通过手工制作来弄清楚这一切......

Answer 1

你忘了a）

$('.feature_container div:gt(0)').hide();

为了帮助发现这些错误，只需弹出Firefox的错误面板即可。它会立刻抛出错误并给你它所在的线。

Answer 2

除了@jpea指出的问题，你仍然有另一个语法问题。最后一行是无关的，应删除。

此外，您的选择器'.feature_container：first-child'会转换为：'。feature_container *：first-child'，这意味着不仅第一个DIV会褪色，而且其中的P也会褪色。所以你应该把它改成：'。feature_container div：first-child'。所以你最终得到了这个：

<script>
$(function(){
  $('.feature_container div:gt(0)').hide();
  setInterval(function() {
      $('.feature_container div:first-child').fadeOut()
          .next('div').fadeIn()
          .end().appendTo('.feature_container');},
      3000);
  });
</script>

所以你的jQuery使用没有任何问题。正是您的JavaScript语法和CSS导致了您的问题。

Answer 3

我刚刚废弃了上面的代码并重新编写了它，这似乎正在起作用：

    $('.feature_container div:gt(0)').hide();
setInterval(function(){
    $('.feature_container div:first').fadeOut().next('div').fadeIn().end().appendTo('.feature_container');
}, 8000);

My Simple JQuery Div Slider的问题

3 个答案: