信游平台登陆

注册 | 登录 | 网址 接待拜候八百站长

全能插件SuperSlide轻松完成核心图幻灯标签切换图片转动

2017/5/7 7:00:25 作者:站长日志 来历:http://www.superslide2.com 浏览:4734次

SuperSlide努力于处置网站大局部殊效展现题目,使网站代码标准整齐,便利保护更新。网站上经常利用的“核心图/幻灯片”“Tab标签切换”“图片转动”“无缝转动”等只要要一个SuperSlide便可处置!今后无需网上苦苦寻找殊效,无需加载n个插件,无需惧怕代码抵触,你须要的只是一个SuperSlide!还能够多个SuperSlide组合缔造更多结果哦~(兼容包罗ie6的绝大局部浏览器)


1、援用jQuery.js 和 jquery.SuperSlide.js

由于SuperSlide是基于jQuery的插件,以是条件必须先援用jQuery,再援用SuperSlide

<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布局,别离是 ".hd" 外面包罗ul, ".bd" 外面包罗ul

<div class="slideTxtBox">
    <div class="hd">
        <ul><li>教导</li><li>培训</li><li>出国</li></ul>
    </div>
    <div class="bd">
        <ul>
            <li><a href="http://tattoovisit.com" target="_blank">SuperSlide2.0正式宣布!</a></li>
            ...
        </ul>
        <ul>
            <li><a href="http://tattoovisit.com" target="_blank">名师教作文:3妙招巧写高分</a></li>
            ...
        </ul>
        <ul>
            <li><a href="http://tattoovisit.com" target="_blank">澳大利亚八大名校招生申明会</a></li>
            ...
        </ul>
    </div>
</div>

3、编写CSS,为HTML付与样色

当真查抄您的css,保障兼容大局部浏览器条件下再挪用SuperSlide

.slideTxtBox{ width:450px; border:1px solid #ddd; text-align:left;  }
.slideTxtBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 20px; border-bottom:1px solid #ddd;  position:relative; }
.slideTxtBox .hd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px;   }
.slideTxtBox .hd ul li{ float:left; padding:0 15px; cursor:pointer;  }
.slideTxtBox .hd ul li.on{ height:30px;  background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
.slideTxtBox .bd ul{ padding:15px;  zoom:1;  }
.slideTxtBox .bd li{ height:24px; line-height:24px;   }
.slideTxtBox .bd li .date{ float:right; color:#999;  }

4、挪用SuperSlide

在本例中,请在 “.slideTxtBox” div竣事后立即挪用 SuperSlide,如许会获得最好的结果,防止全部页面加载后再挪用 SuperSlide;
由于是默许HTML布局,以是参数都为默许值,不必填写titCell、mainCell等。

<script type="text/javascript">jQuery(".slideTxtBox").slide(); </script>

5、参数详查


参数版本默许值申明具体
type2.1slide结果范例,可选"slide"||"menu",引入type:"menu"特地处置菜单/导航结果
defaultPlay2.1true默许是不是履行结果(第一次运转是不是履行结果)经常利用于导航/菜单
returnDefault2.1false鼠标移出容器,是不是前往默许状况,经常利用于导航/菜单
mouseOverStop2.1true鼠标移到容器层(无缝转动是mainCell)是不是遏制播放
playStateCell2.1".playState"播放/停息状况按钮,点击后会增添/删除"pauseState"类名用于节制样色。可参考 
switchLoad2.0 > 2.1null内容切换加载,临时只撑持图片,必须共同背景法式利用。当为图片的时辰switchLoad为图片现实途径的属性称号,比方switchLoad:"_src"
[v2.1] 修复当scroll>1时,switchLoad有效的bug。
easing2.0 > 2.1"swing"缓动结果;
[v2.1]变动默许结果为“swing”,使结果更流利
startFun2.0 > 2.1null每次切换结果起头时履行函数,用于处置特别环境或建立更多结果。用法 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()
endFun2.0 > 2.1null每次切换结果竣事时履行函数,用法和startFun分歧
triggerTime2.0150毫秒,titCell触发时辰,默许150毫秒提早,以防反复履行结果。若为0即鼠标移过titCell立即履行结果
targetCell2.0 > 2.1null切换元素工具,处置内容切换元素非包裹状况劣等环境,完成更多结果,处置更多环境,能和titCell、mainCell同时利用。只撑持fade结果。
[v2.1] 增添撑持slideDown结果。
pageStateCell2.0".pageState"分页状况工具,用于显现分页状况,比方:2/3
pnLoop2.0true前/后按钮是不是延续轮回,若为false则当翻动到最前/后页时,前/后按钮点击有效,同时增添prevStop/nextStop类名节制样色
opp2.0false默许反标的目的活动,比方 effect:"leftMarquee" 而后设置 opp:true,则结果为右转动。经常利用于leftMarquee/topMarquee
autoPage1.2 > 2.1false[v1.2] 法式主动分页,需连系titCell利用,若为true,则titCell为导航元素的包裹层工具。ps:scroll>1时,记得设置autoPage:true,不然分页毛病
[v2.1] 撑持自界说分页html,$为数字替代地位。比方autoPage:"<li><a>$</a></li>",若是不想输入数字:autoPage:"<li><a></a></li>"。
titCell1.0".hd li"导航元素工具(鼠标的触发元素工具)
mainCell1.0".bd"切换元素的包裹层工具
effect1.0 > 2.0 >2.1"fade"动画结果
[v1.0] fade:渐显; || top:上转动;|| left:左转动;|| topLoop:上轮回转动;|| leftLoop:左轮回转动;|| topMarquee:上无缝轮回转动;|| leftMarquee:左无缝轮回转动;
[v2.0] fold:淡入淡出
[v2.1] slideDown:下拉结果

autoPlay1.0false主动运转
interTime1.02500毫秒;主动运转距离。当effect为无缝转动(topMarquee/leftMarquee)时,相称于运转速率。
delayTime1.0500毫秒;切换结果延续时辰(一次切换结果履行所用的时辰长度)。
trigger1.0"mou搜索引擎优化ver"titCell触发体例 || mou搜索引擎优化ver:鼠标移过触发;|| click:鼠标点击触发;
scroll1.01每次转动个数。
vis1.01visible缩写,mainCell的可视规模个数,当现实内容个数少于可视个数的时辰,不履行SuperSlide结果。
prevCell1.0".prev"前一个/页按钮工具。
nextCell1.0".next"后一个/页按钮工具。
defaultIndex1.00默许的以后地位索引。0是第一个; defaultIndex:1 时,相称于从第2个起头履行
titOnClassName1.0"on"以后titCell地位主动增添的class称号


更多利用方式请参考http://www.superslide2.com

上一篇: jQuery图片笔墨无中断转动插件YLMarquee 下一篇: 不了