SuperSlide——再次接触
原来自己很早之前就接触过SuperSlider这个神奇的插件，原谅自己又得了“健忘症”，因此昨天就把自己“坑”了一把：
前言：
交易一期的项目即将上线，在解决测试同事们提出的bug的时候，无意间看到页面有一个神奇的现象：
看着这左右不停变换的图片，心里是不是有点高兴：这样的效果还真不错！可是头疼的却在后面……
当企业资质下只有一张图片时，它就变成了两张一模一样的图片，而且还是静态的，并不会自由轮播。究其原因：是负责这个页面的同事在选择轮播插件的时候，选择了一个bug多的插件。而恰好我又有“强迫症”，看见该同事在忙其他的，而他的电脑环境也都变成了go环境，于是热心的自己就上去解决bug，结果就深深的爱上了SuperSlider……
解决过程：
先到SuperSlider官网（http://www.superslide2.com/demo.html），找到类似的demo：
接着看看官网上的例子是怎样解决这个问题的，（html主要代码）：
用之前，记得先引用:
...
<script src="/static/js/jquery.min.js" type="text/javascript"></script>
<script src="/static/js/shopinfo/jquery.SuperSlide.2.1.1.js"></script>
...
这样才可以继续使用。
...
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px 宋体; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ color:#1974A1; }
.js{width:90%; margin:10px auto 0 auto; }
.js p{ padding:5px 0; font-weight:bold; overflow:hidden; }
.js p span{ float:right; }
.js p span a{ color:#f00; text-decoration:underline; }
.js textarea{ height:100px; width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa; border-left:2px solid #aaa; } /* 本例子css */
.slideGroup{ width:510px; border:1px solid #ddd; text-align:left; }
.slideGroup .parHd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 20px; border-bottom:1px solid #ddd; position:relative; }
.slideGroup .parHd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px; }
.slideGroup .parHd ul li{ float:left; padding:0 15px; cursor:pointer; }
.slideGroup .parHd ul li.on{ height:30px; background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
.slideGroup .slideBox{ overflow:hidden; zoom:1; padding:10px 0 10px 42px; position:relative; } .slideGroup .sPrev,.slideGroup .sNext{ position:absolute; left:5px; top:10px; display:block; width:30px; height:94px; border:1px solid #ddd; background:url(images/icoLeft.gif) center center no-repeat #f4f4f4; }
.slideGroup .sNext{ left:auto; right:5px; background:url(images/icoRight.gif) center center no-repeat #f4f4f4; }
.slideGroup .sPrev:hover,.slideGroup .sNext:hover{ border-color:#f60; } .slideGroup .parBd ul{ overflow:hidden; zoom:1; }
.slideGroup .parBd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center; }
.slideGroup .parBd ul li .pic{ text-align:center; }
.slideGroup .parBd ul li .pic img{ width:120px; height:90px; display:block; padding:2px; border:1px solid #ccc; }
.slideGroup .parBd ul li .pic a:hover img{ border-color:#999; }
.slideGroup .parBd ul li .title{ line-height:24px; } </style> <div class="slideGroup" style="margin:0 auto">
<div class="parHd">
<ul><li>教育</li><li>培训</li><li>出国</li></ul>
</div>
<div class="parBd"> <div class="slideBox">
<a class="sPrev" href="javascript:void(0)"></a>
<ul>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="data:images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1.1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="data:images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1.2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="data:images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1.3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="data:images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1.4</a></div>
</li>
</ul>
<a class="sNext" href="javascript:void(0)"></a>
</div><!-- slideBox End --> <div class="slideBox">
<a class="sPrev" href="javascript:void(0)"></a>
<ul>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="data:images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2.1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="data:images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2.2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="data:images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2.3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="data:images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2.4</a></div>
</li>
</ul>
<a class="sNext" href="javascript:void(0)"></a>
</div><!-- slideBox End --> <div class="slideBox">
<a class="sPrev" href="javascript:void(0)"></a>
<ul>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="data:images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3.1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="data:images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3.2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="data:images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3.3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="data:images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3.4</a></div>
</li>
</ul>
<a class="sNext" href="javascript:void(0)"></a>
</div><!-- slideBox End --> </div><!-- parBd End -->
</div>
...
接着还有最重要的js部分：
<script type="text/javascript">
/*
SuperSlide组合注意：
1、内外层mainCell、targetCell、prevCell、nextCell等对象不能相同，除非特殊应用；
2、注意书写顺序，通常先写内层js调用，再写外层js调用
*/ /* 内层图片滚动切换 */
jQuery(".slideGroup .slideBox").slide({ mainCell:"ul",vis:3,prevCell:".sPrev",nextCell:".sNext",effect:"leftLoop"}); /* 外层tab切换 */
jQuery(".slideGroup").slide({titCell:".parHd li",mainCell:".parBd"}); </script>
按照上面的介绍，再把自己项目中所需要的东西套进去（html主要代码）：
...
<li><span>企业资质：</span>
<div class="slideGroup" style="margin:0 auto">
<div class="parBd">
<div class="slideBox">
<a class="sPrev" href="javascript:void(0)"></a>
<ul>
{{if datas.companylist.yyzz}} <li>
<div class="pic"><a href="{{imgSiteUrl}}{{ datas.companylist.yyzz }}"
target="_blank"><img
src="{{imgSiteUrl}}{{ datas.companylist.yyzz }}"></a>
</div>
<div class="title"><a href="{{imgSiteUrl}}{{ datas.companylist.yyzz }}"
target="_blank">营业执照</a>
</div>
</li>
{{/if}}
{{if datas.companylist.zzdmz}}
<li>
<div class="pic"><a href="{{imgSiteUrl}}{{ datas.companylist.zzdmz }}"
target="_blank"><img
src="{{imgSiteUrl}}{{ datas.companylist.zzdmz }}"></a>
</div>
<div class="title"><a href="{{imgSiteUrl}}{{ datas.companylist.zzdmz }}"
target="_blank">组织机构代码证</a>
</div>
</li>
{{/if}}
{{if datas.companylist.khxkz}}
<li>
<div class="pic"><a href="{{imgSiteUrl}}{{ datas.companylist.khxkz }}"
target="_blank"><img
src="{{imgSiteUrl}}{{ datas.companylist.khxkz }}"></a>
</div>
<div class="title"><a href="{{imgSiteUrl}}{{ datas.companylist.khxkz }}"
target="_blank">开户许可证</a>
</div>
</li>
{{/if}}
{{if datas.companylist.nsrzgb}}
<li>
<div class="pic"><a href="{{imgSiteUrl}}{{ datas.companylist.nsrzgb }}"
target="_blank"><img
src="{{imgSiteUrl}}{{ datas.companylist.nsrzgb }}"></a>
</div>
<div class="title"><a href="{{imgSiteUrl}}{{ datas.companylist.nsrzgb }}"
target="_blank">一般纳税人资格表</a>
</div>
</li>
{{/if}}
{{if datas.companylist.swdjz}}
<li>
<div class="pic"><a href="{{imgSiteUrl}}{{ datas.companylist.swdjz }}"
target="_blank"><img
src="{{imgSiteUrl}}{{ datas.companylist.swdjz }}"></a>
</div>
<div class="title"><a href="{{imgSiteUrl}}{{ datas.companylist.swdjz }}"
target="_blank">税务登记证</a>
</div>
</li>
{{/if}}
</ul>
<a class="sNext" href="javascript:void(0)"></a>
</div> </div><!-- parBd End -->
</div>
</li>
...
部分js代码：
...
<script>
/* 内层图片滚动切换 */
jQuery(".slideGroup .slideBox").slide({
mainCell: "ul",
vis: 3,
prevCell: ".sPrev",
nextCell: ".sNext",
effect: "leftLoop"
});
</script>
...
最终达到的效果：
后记：
希望再次用到写轮播时，不要像昨天一样忘得那么“干净”，要做一个大神前必备技能！
SuperSlide——再次接触的更多相关文章
- 2014-08-05 再次接触VBA
今天是在吾索实习的第20天.本来今天的计划是完成BBS的界面的设计的,但是中途发生了一些小插曲,经理要求我帮忙用VBA实现EXCEL中表与表之间的动态联编,而且答应了客户明天就要看到成品了.所以只好放 ...
- Phaser-游戏之旅
虽然这个小游戏逻辑不是很复杂,但为了熟悉Phaser这个游戏框架的使用方法所以就选择了它. 另外第一次在项目中尝试使用ES6,之后利用babel进行转换. 自动化构建:gulp(其他文件复制和解析) ...
- 成 功 的 背 后 !( 致给所有IT人员)
转载了这篇文章,希望能对自己和看到这篇博客的人有所激励. 成功的背后,有着许多不为人知的故事,而正是这些夹杂着泪水和汗水的过去,才成就了一个个走向成功的普通人. ------------------- ...
- WebForm路由踩坑 ajax请求多次
WebForm路由踩坑 再次接触Asp.Net WebForm已是4年后的今天,源起新入职的公司,一个老的项目. Web接触的少,那就多动手写写. WebForm1.aspx <body> ...
- 记录一些在用wcf的过程中走过的泥巴路 【第一篇】
自从转移战场之后,比以前忙多了,博客也没能及时跟上,原本准备继续mvc系列,但是在那边技术比较陈旧还没能用得上,话说有3年没接触这玩意了,东西也 都忘了差不多了,既然再次接触,我也就继续温习温习,记录 ...
- 经典DOS游戏皇帝攻略(曾经的回忆)
最完美攻略>>>>> -------------------------------------------------------------------------- ...
- 成功的背后！（给所有IT人）
转载:来自CSDN第一名博主:http://blog.csdn.net/phphot/article/details/2187505 成功的背后,有着许多不为人知的故事,而正是这些夹杂着泪水和汗水的过 ...
- PHP关于依赖注入(控制反转)的解释和例子说明
PHP关于依赖注入(控制反转)的解释和例子说明 发表于2年前(2014-03-20 10:12) 阅读(726) | 评论(1) 8人收藏此文章, 我要收藏 赞2 阿里云双11绽放在即 1111 ...
- [转]行者，一念一生，成功的背后！（给所有IT人）
成功的背后,有着许多不为人知的故事,而正是这些夹杂着泪水和汗水的过去,才成就了一个个走向成功的普通人. 凌晨两点半,早 已习惯了一个人坐在电脑前的我,望着屏幕,任思绪在暗夜的包容下静静流淌,时光仿佛又 ...
随机推荐
- python学习笔记（22）--漫画生成html最终版
说明(2017.3.14): 1. 在主文件夹生成一个main.html作为目录 2. 在每个子文件夹生成一个index.html作为看图网页 3. 通过python批量生成html网页,js配合进行 ...
- 一款由css3和jquery实现的卡面折叠式菜单
之前已经为大家介绍了好多导航菜单.今天为大家再带来一款由css3和jquery实现的卡片折叠式菜单.当菜单关闭的时候,有三维堆叠的效果.我们一起看下效果图: 在线预览 源码下载 html代码: & ...
- Maven学习之（三）Maven插件创建web项目
这里来记录一下用eclipse 创建maven 的web项目. 添加jar依赖. <project xmlns="http://maven.apache.org/POM/4.0.0&q ...
- CocosIDE导出Android APK的注意事项
近期在用CocosIDE来开发新的游戏,整体感觉非常不错.支持断点调试.真机调试,调试时候的变量信息也比非常多vs的lua插件丰富.用起来也比一些专门的lua调试工具要方便.并且有一定的语法差错功能. ...
- java虚拟机和Dalvik虚拟机
java虚拟机和Dalvik虚拟机的区别: java虚拟机Dalvik虚拟机 java虚拟机基于栈. 基于栈的机器必须使用指令来载入和操作栈上数据,所需指令更多更多dalvik虚拟机是基于寄存器的 j ...
- platform_driver_probe 函数解析
结构体列举 // 几个结构体 // include/linux/device.h struct bus_type { const char *name; // "platform" ...
- zoj3228 Searching the String AC自动机查询目标串中模式串出现次数(分可覆盖，不可覆盖两种情况)
/** 题目:zoj3228 Searching the String 链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=34 ...
- iOS边练边学--view的封装
一.view封装的思路: *如果一个view内部的子控件比较多,一般会考虑自定义一个view,把它内部的子控件的创建屏蔽起来,不让外界关心 *外界可以传入对应的模型数据给view,view拿到模型数据 ...
- 在传统以太网中,为什么要有最小帧长度（64 bytes）和最大帧长度（1500 bytes）的限制?
遇到的问题:以太网的数据帧封装如下图所示,包含在IP数据报中的数据部分最长应该是( )字节? A.1434 B.1460 C.1480 D.1500 答案:C 原因: 以太网(IEEE 802.3)帧 ...
- R语言基于S4的面向对象编程
前言 本文接上一篇文章 R语言基于S3的面向对象编程,本文继续介绍R语言基于S4的面向对象编程. S4对象系统具有明显的结构化特征,更适合面向对象的程序设计.Bioconductor社区,以S4对象系 ...