插件拓展 - 利用js实现n个元素重新组合

经常有童鞋为了一款插件不能支持多个元素切换而换插件，其实没有必要那麻烦的，自己手动小改一下就可以实现了，如果是自己写的插件那请你忽略此篇。下面我们举个例子，先看图：

见上图，右上角有左右切换按钮，每次点击可切换一组6个图片。本案例中使用的是一个名为SuperSlide的插件，有喜欢的可以去插件官网自己看。

预览地址：
http://build.gzwhir.com/oagw2013021906387/web_YL/index.shtml

基本思路：
在页面加载完成之后使用js获取元素个数，按照一组6个重新组合，元素组合之后再执行需要执行的插件或者代码即可

下面是代碼：

<div class="CaseList"><ul><li><a href="#">复旦大学附属肿瘤医院</a></li><li><a href="#">同济大学附属肺科医院</a></li><li><a href="#">中南大学湘雅医院</a></li>.......</ul>
</div>

js代碼：

<script type="text/javascript">$(".HomeApp").ready(function() {$div = null;$(".AppList li").each(function(i){if ( i % 6 == 0) {$div = $( '<div class="item"></div>' );$div.appendTo(".AppList");}$(this).appendTo($div);});//执行插件jQuery(".HomeApp").slide({mainCell:".AppList",effect:"left",autoPlay:false});});
</script>

如果需要多处使用也是可以的

$(".prostyle2 .slidelist").each(function(n){$div = null;$("li",this).each(function(i){if ( i % 4 == 0) {$div = $( '<ul class="item ul clearfix"></ul>' );$(".prostyle2 .slidelist").eq(n).append($div);}$(this).appendTo($div);});
});

插件拓展 - 利用js实现n个元素重新组合相关推荐

html中免费的四级联动,利用JS实现省市区街道四级联动插件
特效描述:利用JS实现省市区街道四级联动插件.利用JS实现省市区街道四级联动插件代码结构 1. 引入CSS 2. 引入JS 3. HTML代码所在地区所在地区请选择请选择请选择请选择 ...
JS事件与操作元素--世纪佳缘（用户名、显示隐藏内容）--黑马程序员pink老师JS第P25-操作元素总结及作业1
需求:利用JS事件与操作元素复刻--世纪佳缘(用户名.显示隐藏内容). 开发环境:VScode.Edge 参考网站:世纪佳缘官网注册截面头部包含算法: 1.利用JS操作元素.事件以及if分支,修改表 ...
js获取classname值_利用js获取元素class值的两种方法
我们有时为了达到某种效果,需要以元素的class值为条件做判断. 我们如何利用JavaScript获取元素class的值?我们先看下面代码: x=document.getElementsByTagNa ...
利用 JS清除某元素背景/字体颜色
已经为某元素设置了背景颜色,利用 JS 如何清除呢? htmlObject.style.backgroundColor = "transparent"; htmlObject.st ...
html 更改元素坐标,利用JS修改元素的位置属性，为什么style.left可行而style.top失效？...
Q.想利用JS中的move函数实现小图的斜线下移,但是明明代码几乎一样,left的移动可以实现,top却怎么也动不了台球桌 *{ padding:0; margin:0; } div{ backgr ...
js动态生产html元素,js 动态创建 html元素
js 动态创建 html元素 js学习之动态创建html元素 body{margin:0;padding:0;} .sky{background:#000;width:1000;height:500p ...
Case Study: 利用JS设计高级检索功能通过PHP获取MySQL数据
一.目标该笔记的目的是引导读者借助WampServer平台和MySQL数据库,利用HTML/CSS/JS/PHP设计一个含有高级检索功能的数据库网页.该功能效果如图1所示.用户在文本框中输入相应内容 ...
captcha.js一个生成验证码的插件，使用js和canvas生成
一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...
ajax 批量上传图片插件,jQuery多文件上传插件jquery.imageuploader.js
插件描述:jQuery多文件上传插件jquery.imageuploader.js,可以同时上传多个文件并支持拖拽上传 jquery.imageuploader.js 一款jquery多文件上传插件. ...
php修改js内容,js怎样修改html元素的内容？HTML DOM实现修改内容
js怎样修改html元素的内容?本章就给大家介绍在js中利用HTML DOM是怎样修改html元素内容的.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们要了解HTML DO ...

插件拓展 - 利用js实现n个元素重新组合

插件拓展 - 利用js实现n个元素重新组合相关推荐

最新文章

热门文章