自动播放滑块内容jquery

Question

我需要创建一个线滑块来自动旋转 h3 列表。

我已经创建了包装器和内部元素。现在我有一个功能来显示一个元素，隐藏所有另一个。延迟后，我尝试捕捉下一个元素并显示它。

我尝试

(function($) {
  $(document).ready(function() {
    function context(obj, func) {
      return function() {
        func(obj);
      }
    };
    var bestNews = {
      i: 0,
      init: function(id) {
        this.items = $(id);
        this.item = this.items[this.i];
        return this;
      },
      run: function() {
        var next = context({
          obj: this
        }, function(data) {
          data.obj.i++;
          if (data.obj.i >= data.obj.items.length) {
            data.obj.i = 0;
          }
          data.obj.item = data.obj.items[data.obj.i];

          var next_run = context({
            obj: data.obj
          }, function(data) {
            data.obj.run();
          });
          $(data.obj.item).show('drop', {
            direction: 'left'
          }, 1000, next_run);
        });
        $(this.item).delay(6000).effect('drop', {
          direction: 'right'
        }, 1000, next);
      }
    }
    bestNews.init('.slideshoww h3').run();

  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshoww">
  <h3>Text 1</h3>
  <h3>Text 2</h3>
  <h3>Text 3</h3>
</div>

但是有错误...

Uncaught TypeError: $(...).delay(...).effect 不是函数

Answer 1

.effect() 是jquery ui 的一个函数，你必须将它包含在你的项目中

.effect()[.effect(效果[,选项][,持续时间][,完成])]

说明：对元素应用动画效果。

返回：jQuery 对象

这是一个有效的sn-p，带有jQuery-ui的好版本：

(function($) {
  $(document).ready(function() {
    function context(obj, func) {
      return function() {
        func(obj);
      }
    };
    var bestNews = {
      i: 0,
      init: function(id) {
        this.items = $(id);
        this.item = this.items[this.i];
        return this;
      },
      run: function() {
        var next = context({
          obj: this
        }, function(data) {
          data.obj.i++;
          if (data.obj.i >= data.obj.items.length) {
            data.obj.i = 0;
          }
          data.obj.item = data.obj.items[data.obj.i];

          var next_run = context({
            obj: data.obj
          }, function(data) {
            data.obj.run();
          });
          $(data.obj.item).show('drop', {
            direction: 'left'
          }, 1000, next_run);
        });
        $(this.item).delay(6000).effect('drop', {
          direction: 'right'
        }, 1000, next);
      }
    }
    bestNews.init('.slideshoww h3').run();

  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<div class="slideshoww">
  <h3>Text 1</h3>
  <h3>Text 2</h3>
  <h3>Text 3</h3>
</div>