jQuery插件SuperSlide—焦点图 / 幻灯片

今天给大家介绍一款jQuery幻灯片插件，这个插件是由中国人开发的，因此他更加的适合中国人欣赏的网页设计风格，这款插件的名字叫做“SuperSlide”，这款插件老实说是我比较喜欢的一款插件，不管是使用方法的文档，还是效果，他包含了几乎所有的网页设计常用的特效板块，而且默认的样式就已经很美观，可以说你用它可以很快的组合一个网页，而且使用的方法也是非常简单的。

按照他官网的说法：

SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决！从此无需网上苦苦寻觅特效，无需加载n个插件，无需害怕代码冲突，你需要的只是一个SuperSlide！还可以多个SuperSlide组合创造更多效果哦

下面我们就来看看怎样使用这款jQuery插件来实现“焦点图 / 幻灯片”特效。

下载SuperSlide插件包

通过下面的链接下载SuperSlide插件包

点击下载

包含如下文件：

• jquery.SuperSlide.2.1.1.js （11KB，SuperSlide压缩文件）

• jquery.SuperSlide.2.1.1.source.js （20KB，SuperSlide源文件）

• demo（所有基础效果源代码）

引用jQuery.js 和 jquery.SuperSlide.js

因为SuperSlide是基于jQuery的插件，所以前提必须先引用jQuery，再引用SuperSlide

编写HTML

<div class="slideTxtBox">
    <div class="hd">
        <ul><li>教育</li><li>培训</li><li>出国</li></ul>
    </div>
    <div class="bd">
		<ul>
		    <li>
		        <a href="https://www.zhidao91.com" target="_blank"><img src="http://www.superslide2.com/demo/images/pic1.jpg"/></a>
		    </li>
		</ul>
		<ul>
		    <li>
		        <a href="https://www.zhidao91.com" target="_blank"><img src="http://www.superslide2.com/demo/images/pic2.jpg"/></a>
		    </li>
		</ul>
		<ul>
		    <li>
		        <a href="https://www.zhidao91.com" target="_blank"><img src="http://www.superslide2.com/demo/images/pic3.jpg"/></a>
		    </li>
		</ul>
    </div>
</div>

是不是如此简单，关键在于他还有很多可控的参数，如果需要更高级的用法，可以去superslide官网逛一逛。