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

知道91 | Web前端 | 2015-01-06 | 阅读:8646

今天给大家介绍一款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官网逛一逛。