zoukankan      html  css  js  c++  java
  • isilder js 插件动态替换图片

    在项目中用到了islider.js插件,需求中有个要求需要在轮播图中显示两组图片,场景1的图片在场景2中要全部替换成相应的图, 但是islider .js 插件是基于js 的插件不像双向绑定的vue 、react、angular等,不会实时响应,在相关网站中找到了可以动态追加数据的demo,调用了 pushData的方法,但没找到替换所有data的方法,于是查了下源码,发现源码中有个reset方法,
    如图

    在更改了 data后,再调一下 reset方法即可令控件做出响应。
    code

    <!--html-->
    <div id="islider-wrapper"></div>
    
    //js
    //实例化islider
    var arg1=[{content: "./images/pic1.jpg"},{content: "./images/pic2.jpg"}];
    var arg2=[{content: "./images/pic1-change.jpg"},{content: "./images/pic2-change.jpg"}];
    
    var islider = new iSlider({
    				data: arg1,
    				dom: document.getElementById("iSlider-wrapper"),
    				isLooping: 1,
    				isOverspread: 0,
    				isAutoplay: 0,
    				animateTime: 600,
    				animateType: 'rotate',
    				plugins: ['dot', 'button'],
    				onSlideChanged: function(number) {
    					
    				}
    });
    
    
    //更换图片,比如点击一个按钮
    islider.data=arg2;
    islider.reset();
    //islider的图片就会全部替换
    
  • 相关阅读:
    [洛谷P3369] 普通平衡树 Treap & Splay
    [NOIp2016] 组合数问题
    [洛谷P4777] [模板] 扩展中国剩余定理
    [洛谷P3384] [模板] 树链剖分
    [NOIp2017] 时间复杂度
    [bzoj3270] 博物馆
    [USACO06DEC] Milk Patterns
    [USACO5.1] Musical Themes
    后缀数组 模板+详解
    [HNOI2004] L语言
  • 原文地址:https://www.cnblogs.com/Mxy-cnblog/p/9922002.html
Copyright © 2011-2022 走看看