联系信息

SuperSlide简介及基础使用方法

2020-02-08 13:27 By 致远 457
当前位置: 企业网站建设 > SuperSlide > SuperSlide简介及基础使用方法

superslide有什么用?

一个jquery插件解决大部分网站特效问题!SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。包括焦点图、Tab标签、图片滚动等只需要一个SuperSlide即可解决!

superslide官网:http://www.superslide2.com

作者如是说

很久之前我也是一个网站新手,在制作网页过程中,经常需要用到各种特效,于是到网上找合适的插件。找到后要熟悉它的参数、用法等,如果用到几种不同特效,就要找几个不同插件,结果页面代码臃肿,加载缓慢,还要害怕会不会冲突!实在痛苦。

于是我就想可不可以将多个特效合一,以后只需要调用一个插件就能实现网页大部分特效。经过千锤百炼后一个能实现各种效果的插件就浮出水面了,为了表示其异于常人的能力,我给它起了一个霸气的名字 -- SuperSlide!

superslide应该怎么用?

首先,你需要了解,superslide是一款基于jquery的js插件,所以在使用的时候需要事先引入jquery。superslide支持1.x,2.x,3.x,最低支持版本为1.4.2。可以根据你实际项目来选择那个jq版本,如果需要兼容ie678,则只能使用1.x版本的,如果不需兼容则可以大胆使用3.x的。

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

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.SuperSlide.2.1.1.js"></script>

2、编写html结构

<div class="slideTxtBox">
	<div class="hd">
		<ul><li>教育</li><li>培训</li></ul>
	</div>
	<div class="bd">
		<ul>
			<li><time>2011-11-11</time><a href="#" target="_blank">中国打破了世界软件巨头规则</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">口语:会说中文就能说英语!</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">农场摘菜不如在线学外语好玩</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">数理化老师竟也看学习资料?</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">学英语送ipad2,45天突破听说</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">学外语,上北外!</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">那些无法理解的荒唐事</a></li>
		</ul>
		<ul>
			<li><time>2011-11-11</time><a href="#" target="_blank">名师教作文:3妙招巧写高分</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">耶鲁小子:教你备考SAT</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">施强:高端专业语言教学</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">数理化老师竟也看学习资料?</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">【推荐】名校英语方法曝光!</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">2012高考“考点”大曝光!!</a></li>
			<li><time>2011-11-11</time><a href="#" target="_blank">涨价仍爆棚假日旅游冰火两重天</a></li>
		</ul>				
	</div>
</div>

3、编写CSS,为HTML赋予样色

.slideTxtBox{ width:450px; border:1px solid #ddd; text-align:left;  }
.slideTxtBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 10px 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

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

5、superslide常用参数

autoPage:程序自动分页,需结合titCell使用,若为true,则titCell为导航元素的包裹层对象。ps:scroll>1时,记得设置autoPage:true,否则分页错误。

effect:动画效果,包括:fade渐显、top上滚动、left左滚动、topLoop上循环滚动、leftLoop左循环滚动、topMarquee上无缝循环滚动、leftMarquee左无缝循环滚动、fold淡入淡出、slideDown下拉效果

autoPlay:自动运行。

interTime:自动运行间隔,默认2500毫秒;当effect为无缝滚动(topMarquee/leftMarquee)时,相当于运行速度。 

delayTime:切换效果持续时间(一次切换效果执行所用的时间长度),默认500毫秒;

后记

superslide可以产生很多很多不同的效果,整个js文件仅12Kb,满足我们绝大多数需求的同时不再需要到处去找寻插件,也不用担心引入的js太多而影响网站性能,更不用担心多个插件之间的兼容性问题,推荐使用。

另,更多的superslide效果会在后续陆续添加,你也可以访问superslide进行查阅。

© 致远 2020-02-08,原创内容,转载请注明出错:SuperSlide简介及基础使用方法

留下您的评论

>