关闭

superslide插件ajax动态添加滚动元素时,如何销毁slide实例

来源:网络 文章列表 2019-03-11 8
本文介绍了superslide里新增的destroy方法,来销毁slide实例。

有个大屏幕滚动效果,用的是jquery插件SuperSlide。

需求如图

1、定时5分钟更新TOP15的数据,每隔3秒,当前数据进行一次滚动。

正常的做法就是

jQuery(".top15").slide({mainCell:".bd ul", autoPage:true, autoPlay: true, effect:"topLoop", interTime: 6000, scroll:1, vis:1});

但是因为我们的数据是ajax获取的,一开始是没有DOM元素的。

如果直接实例化slide,是会出现没有滚动动画出现。

那此时我想的是 ajax 获取到数据后,在执行实例化slide。

这样确实可以,期间加个变量,避免重复执行slide。但是问题又来了,我们的数据内容是动态改变的,因为我们需要动态定时去获取数据,此时需要再设置一个定时器,进行定时数据更新。

这个倒也是简单,但是问题出在,第二次更新的数据,superslide,并不会更新。

试过多种方法还是不行。后来,找了插件开发者,开发者非常热情,马上给了我解决方法。原来,在superslide 2.0版这个问题确实无法很好的解决,但是作者已经开发完成了3.0版。并且将3.0版示例给到我。再此非常感谢superslide作者。

如果你遇到这个问题,可以看下网上是否已经发布了3.0版的superslide插件,没有的话,可以找作者要,或者找我要。

3.0版增加了新的api方法。 destroy 方法来销毁示例。

下面是我这个项目的完整代码,仅供给我参考。

html代码:

<div class="flex sub-title sub-title-top3">
  当日交易额TOP15
</div>
<div class="top15 txtScroll-top">
  <div class="bd">
    <ul class=""></ul>
  </div>
</div>

 

js代码:

    var isFirstRunSetTitle = true
    var slides = ''
    function set_title(res) {
        var title_txt = '';
        var newArr = sliceArray(res, 3); // 将返回的15条数据,按3个一组来拆分数组
        if (res.length>0) {
          for (var i in newArr) {
              title_txt += '<li>'
              for (var j in newArr[i]) {
                  title_txt += '<p><span style="margin-right:20px;">'+newArr[i][j].company_name+'</span>¥'+newArr[i][j].total_amount+'</p>';
              }
              title_txt += '</li>';
          }
        }

        $(".top3 .bd ul").html(title_txt);
        if (isFirstRunSetTitle) { // 避免重复实例化slide
            slides = jQuery(".top3").slide({mainCell:".bd ul", autoPage:true, autoPlay: true, effect:"topLoop", interTime: 6000, scroll:1, vis:1}); // 将实例对象存储
            isFirstRunSetTitle = false
        } else {
            slides[0].destroy(); // 获取到实例对象,并且销毁
            slides = jQuery(".top3").slide({mainCell:".bd ul", autoPage:true, autoPlay: true, effect:"topLoop", interTime: 6000, scroll:1, vis:1});
        }
    }

好多网友给我留言,说想要SuperSlide3.0,这里我给下下载链接 SuperSlide3.0下载

阿里云618优惠卷大放送

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论
  • 2021.08.17

    终于找到了,解决了一直困扰的问题

  • 2019.12.10

    可以发一份superslide3.0给我么