Question

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

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

我试着

＆＃13;

(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);

＆＃13;

<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>

＆＃13;

但是有错误......

未捕获的TypeError：$（...）。延迟（...）。效果不是函数

Answer 1

.effect()是jquery ui的函数，您必须将其包含在项目中

jQuery-ui [.effect（effect [，options] [，duration] [，complete]）]

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

返回： jQuery对象

以下是一个包含良好版本(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);的工作代码段：

＆＃13;

<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>

＆＃13;

const jsonString = '{"eventName":"Hilton Hotel","photographer_name":["Ethan Richardson"],"image_url":"https://s-media-cache-ak0.pinimg.com/originals/a0/b8/b6/a0b8b6b2e9b077a8ac7791455f83a27b.jpg","subtitle":"Enjoy the night","result":"1"}'
const jsonObject = JSON.parse(jsonString)
const name = jsonObject.photographer_name[0]

＆＃13;

自动播放滑块内容jquery

1 个答案: