分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

isilder js ?插件动态切换图片

发布时间:2023-09-06 02:21责任编辑:顾先生关键词:js

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

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

<!--html--><div id="islider-wrapper"></div>
//js//实例化islidervar 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就会重新渲染

isilder js ?插件动态切换图片

原文地址:https://www.cnblogs.com/Mxy-cnblog/p/9922002.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved