关于SuperSlide的使用方法 以及 调用属性参数的介绍
2024-04-20 14:21:53
关于SuperSlide的调用属性
- 1、引用jQuery.js 和 jquery.SuperSlide.js
- ONE:以横向条幅为例的效果
- 2、编写HTML
- 3、编写CSS，为HTML赋予样色
- 4、调用SuperSlide
- 5、使用参数 介绍
SuperSlidev2.1使用
1、引用jQuery.js 和 jquery.SuperSlide.js
因为SuperSlide是基于jQuery的插件，所以前提必须先引用jQuery，再引用SuperSlide
ONE:以横向条幅为例的效果
<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.1.js"></script>
2、编写HTML
默认的HTMl结构，分别是 div".picScroll" 里面包含ul>li， “li” 里面包含a标签
a内包含img
<div class="picScroll"><ul><li><a target="_blank" href="#/"><img _src="data:images/1.jpg" src="data:images/blank.png" /></a></li><li><a target="_blank" href="#/"><img _src="data:images/2.jpg" src="data:images/blank.png" /></a></li><li><a target="_blank" href="#/"><img _src="data:images/3.jpg" src="data:images/blank.png" /></a></li><li><a target="_blank" href="#/"><img _src="data:images/4.jpg" src="data:images/blank.png" /></a></li><li><a target="_blank" href="#/"><img _src="data:images/5.jpg" src="data:images/blank.png" /></a></li><li><a target="_blank" href="#/"><img _src="data:images/6.jpg" src="data:images/blank.png" /></a></li><li><a target="_blank" href="#/"><img _src="data:images/7.jpg" src="data:images/blank.png" /></a></li><li><a target="_blank" href="#/"><img _src="data:images/8.jpg" src="data:images/blank.png" /></a></li><li><a target="_blank" href="#/"><img _src="data:images/9.jpg" src="data:images/blank.png" /></a></li><li><a target="_blank" href="#/"><img _src="data:images/10.jpg" src="data:images/blank.png" /></a></li></ul><a class="prev" href="javascript:void(0)"></a><a class="next" href="javascript:void(0)"></a></div>
3、编写CSS，为HTML赋予样色
<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:#FF8400; }.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:50px; width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa; border-left:2px solid #aaa; }/* 本例子css */.picScroll{ margin:10px auto; position:relative; border:1px solid #eee; width:732px; padding:10px 0 10px 30px; background:#fff; overflow:hidden; }.picScroll .prev,.picScroll .next{ display:block; position:absolute; top:86px; left:5px; width:23px; height:23px; background:url(images/btns.png) no-repeat; }.picScroll .next{ left:auto; right:5px; background-position:-25px 0; }.picScroll .prev:hover{ background-position:0 -30px; }.picScroll .next:hover{ background-position:-25px -30px; }.picScroll ul{ overflow:hidden; zoom:1; }.picScroll ul li{ width:120px; float:left; overflow:hidden; padding:0 10px; }.picScroll ul li img{ width:120px; height:170px; display:block; background:url(images/loading.gif) center center no-repeat; }</style>4、调用SuperSlide
在本例中，请在 “.picScroll” div结束后立刻调用 SuperSlide，这样会得到最好的效果，避免整个页面加载后再调用 SuperSlide；
因为是默认HTML结构，所以参数都为默认值，不用填写titCell、mainCell等。
<script type="text/javascript">
jQuery(".picScroll").slide({ mainCell:"ul", effect:"leftMarquee", vis:5, autoPlay:true, interTime:50, switchLoad:"_src" });</script>
5、使用参数 介绍
| 参数 | 版本 | 默认值 | 说明 | 详细 |
|---|---|---|---|---|
| type | 2.1 | slide | 效果类型，可选"slide"“menu”，引入type:"menu"专门处理菜单/导航效果 | |
| defaultPlay | 2.1 | true | 默认是否执行效果（第一次运行是否执行效果）常用于导航/菜单 | |
| returnDefault | 2.1 | false | 鼠标移出容器，是否返回默认状态，常用于导航/菜单 | |
| mouseOverStop | 2.1 | true | 鼠标移到容器层（无缝滚动是mainCell）是否停止播放 | |
| playStateCell | 2.1 | “.playState” | 播放/暂停状态按钮，点击后会增加/删除"pauseState"类名用于控制样色。可参考 [2.22-真·全屏焦点图] | |
| switchLoad | 2.0 > 2.1 | null | 内容切换加载，暂时只支持图片，必须配合后台程序使用。当为图片的时候switchLoad为图片实际路径的属性名称，例如switchLoad:"_src"[v2.1] 修复当scroll>1时，switchLoad无效的bug。 | 详解 |
| easing | 2.0 > 2.1 | “swing” | 缓动效果；[v2.1]更改默认效果为“swing”，使效果更流畅 | 所有 |
| startFun | 2.0 > 2.1 | null | 每次切换效果开始时执行函数，用于处理特殊情况或创建更多效果。用法 startFun:function(i,c){ }； 其中i为当前分页，c为总页数[v2.1]增加传递参数，startFun:function( i, c, slider, titCell, mainCell, targetCell, prevCell, nextCell ){}，这样简写就方便了例如 jQuery(".slideBox").slide({ startFun:function( i,c,s ){ s.show() } }); 这里的 s.show() 相当于 jQuery(".slideBox").show() } | 详解 |
| endFun | 2.0 > 2.1 | null | 每次切换效果结束时执行函数，用法和startFun一致 | 详解 |
| triggerTime | 2.0 | 150 | 毫秒，titCell触发时间，默认150毫秒延迟，以防重复执行效果。若为0即鼠标移过titCell立刻执行效果 | |
| targetCell | 2.0 > 2.1 | null | 切换元素对象，处理内容切换元素非包裹状态下等情况，实现更多效果，处理更多情况，能和titCell、mainCell同时使用。只支持fade效果。[v2.1] 增加支持slideDown效果。 | 详解 |
| pageStateCell | 2.0 | “.pageState” | 分页状态对象，用于显示分页状态，例如：2/3 | |
| pnLoop | 2.0 | true | 前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效，同时增加prevStop/nextStop类名控制样色 | |
| opp | 2.0 | false | 默认反方向运动，例如 effect:“leftMarquee” 然后设置 opp:true，则效果为右滚动。常用于leftMarquee/topMarquee | |
| autoPage | 1.2 > 2.1 | false |
[v1.2] 程序自动分页，需结合titCell使用，若为true，则titCell为导航元素的包裹层对象。ps：scroll>1时，记得设置autoPage:true，否则分页错误。[v2.1] 支持自定义分页html，为数字替换位置。例如autoPage:"<li><a>为数字替换位置。例如autoPage:"<li><a>为数字替换位置。例如autoPage:"<li><a>"，如果不想输出数字：autoPage:"
|
图解 |
| titCell | 1.0 | “.hd li” | 导航元素对象（鼠标的触发元素对象） | 图解 |
| mainCell | 1.0 | “.bd” | 切换元素的包裹层对象 | 图解 |
| effect | 1.0 > 2.0 >2.1 | “fade” | 动画效果[v1.0] fade：渐显； top：上滚动； left：左滚动 topLoop：上循环滚动；leftLoop：左循环滚动； topMarquee：上无缝循环滚动； leftMarquee：左无缝循环滚动；[v2.0] fold：淡入淡出[v2.1] slideDown：下拉效果 | |
| autoPlay | 1.0 | false | 自动运行 | |
| interTime | 1.0 | 2500 | 毫秒；自动运行间隔。当effect为无缝滚动(topMarquee/leftMarquee)时，相当于运行速度。 | |
| delayTime | 1.0 | 500 毫秒； | 切换效果持续时间（一次切换效果执行所用的时间长度）。 | |
| trigger | 1.0 | “mouseover” | titCell触发方式 | |
| scroll | 1.0 | 1 | 每次滚动个数。 | |
| vis | 1.0 | 1 | visible缩写，mainCell的可视范围个数，当实际内容个数少于可视个数的时候，不执行SuperSlide效果。 | 图解 |
| prevCell | 1.0 | “.prev” | 前一个/页按钮对象。 | |
| nextCell | 1.0 “.next” | 后一个/页按钮对象。 | ||
| defaultIndex | 1.0 | 0 | 默认的当前位置索引。0是第一个； defaultIndex:1 时，相当于从第2个开始执行 | |
| titOnClassName | 1.0 | “on” | 当前titCell位置自动增加的class名称 |
关于SuperSlide的使用方法 以及 调用属性参数的介绍相关推荐
- C#线程调用带参数的方法 ~
在 .NET Framework 2.0 版中,要实现线程调用带参数的方法有两种办法. 第一种:使用ParameterizedThreadStart. 调用 System.Threading.Thre ...
- Java方法的调用以及参数传递
一.方法的调用及参数的传递 1.方法的调用 1.1 定义方法的语法 [访问修饰符] 返回值类型 方法名([参数类型 参数1,参数类型 参数2,-]){ 方法体 } 详解: 访问修饰符:用于修饰这个 ...
- ScriptManager调用 无参数WebService
在工程中添加一个 webservice 使用默认的 红色部分为后添加 为了要让ScriptManager识别这个WEBSERVICE WebService.cs using System; using ...
- PHP中普通方法如何调用静态属性,php中的静态属性和静态方法如何调用
静态属性.方法(包括静态与非静态)在内存中,只有一个位置(而非静态属性,有多少实例化对象,就有多少个属性). (推荐教程:php图文教程) 实例: header("content-type: ...
- Collection 属性ArrayList.add方法内部调用过程
Collection 属性 //二进制搜索阈值 private static final int BINARYSEARCH_THRESHOLD = 5000; //改变阈值 private stati ...
- 7.1.3 Python进阶 《函数》定义、调用，参数，返回值《面向对象》概念，类，实例，对象，属性，方法《模块、包》导入，自定义，常用内置：datatime，time，random，os，sys
目录 ======== 第四部分 Python进阶 ======== 第一节 函数 4.1.1 函数定义及调用 4.1.2 函数的参数 4.1.3 函数的返回值 第二节 面向对象 4.2.1 面向对象 ...
- 彻底搞懂Python类属性和方法的调用
Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的. 一.类.对象概述 在面向对象程序设计中,把数据以及对数据的操作封装在一起,组成一个整体(对象 ...
- python类之间方法互相调用_Python中类与类之间属性和方法的调用
Python中类与类之间属性和方法的调用 class A(object): #定义一个类 name='python' #类属性 def __init__(self): #实例属性 self.age= ...
- Go - 反射中 函数 和 方法 的调用 - v.Call()
上一篇文章 说到了 Golang 中的反射的一些基本规则,重点就是文章中最后的三点,但是这篇文章并没有说如何在反射中调用函数和方法,这就是接下来要说的. 反射中调用 函数 众所周知,Golang 中的 ...
最新文章
- 重庆规模最大数据中心启用
- V-1-2 登陆ESXi服务器
- Python-装饰器
- DM9000 寄存器的定义
- html弹出div提示自动关闭,html弹出div弹窗
- linux rsync删文件速度,Linux下使用rsync最快速删除大量文件的方法
- 大数据技术Hbase 和 Hive 详解
- loader 编写一个android_Android之Loader理解
- 主成份分析（PCA）——原理、实现步骤
- 电子地图市场现状研究分析报告 -
- 一种基于折射反向学习机制与自适应控制因子的改进樽海鞘群算法
- shiro+springMVC文档
- Astah Professional UML 建模工具2022版
- Python——枚举（enum）
- 美爆！《自然》公布2018年19张最震撼的科学图片
- 萨特《禁闭》由他人来解读“他人即地狱”
- DBSCAN原理及matlab仿真代码
- 基于CQRS的架构在答题PK小游戏中的实践案例
- UMLChina建模知识竞赛第3赛季第13轮：SysML和系统工程知识
- uni-app使用iconfont