当前位置:首页 > 教程 > Web前端 > jQuery插件SuperSlide—焦点图 / 幻灯片

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

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

1
2
3
4
<head>
    <script type="text/javascript" src="../jquery1.42.min.js"></script>
    <script type="text/javascript" src="../jquery.SuperSlide.2.1.1.js"></script>
</head>

编写HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style type="text/css">
/* 本例子css */
.slideBox{ width:650px;  overflow:hidden; position:relative; border:1px solid #ddd;  }
.slideBox .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
.slideBox .hd ul{ overflow:hidden; zoom:1; float:left;  }
.slideBox .hd ul li{ float:left; margin-right:2px;  width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; }
.slideBox .hd ul li.on{ background:#f00; color:#fff; }
.slideBox .bd{ position:relative; height:100%; z-index:0;   }
.slideBox .bd li{ zoom:1; vertical-align:middle; }
.slideBox .bd img{ width:650px; display:block;  }
<script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script>
<!--修改你的SuperSlide库地址-->
<script src="jquery.SuperSlide.2.1.1.source.js"></script>
<div style="position:relative;width:650px;margin:0 auto;">
<div id="slideBox" class="slideBox">
	<div class="hd">
		<ul><li class="on">1</li><li class="">2</li><li class="">3</li></ul>
	</div>
	<div class="bd">
		<ul>
			<li style="display: list-item; opacity: 0.917056;"><a href="http://www.zhidao91.com" target="_blank"><img src="http://www.superslide2.com/demo/images/pic1.jpg"></a></li>
			<li style="display: none;"><a href="http://www.zhidao91.com" target="_blank"><img src="http://www.superslide2.com/demo/images/pic2.jpg"></a></li>
			<li style="display: none;"><a href="http://www.zhidao91.com" target="_blank"><img src="http://www.superslide2.com/demo/images/pic3.jpg"></a></li>
		</ul>
	</div>
</div>
</div>
<script type="text/javascript">
 jQuery(".slideBox").slide({mainCell:".bd ul",autoPlay:true});
</script>

通过上面的代码,我们可以得到如下的效果图,注意要更改你的SuperSlide库地址


  • 1
  • 2
  • 3


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

  • << 个人小型博客推广的10大技巧
  • jQuery1.9.1即其以上版本针对checkbox的... >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/jquery-superslide-slide/

    相关文章 近期热评 最新文章

    • 怎样在WordPress中安装Google Analytics
      就算你积累了多年网站建设的经验,你都不可能一开始就建一个外观,速度,功能以及转化都很完美的网站。你能做的并且也是各个站长正在做的,无非是通过不断的监测来改进...
    • 怎样在WordPress中安装Google Analytics
      就算你积累了多年网站建设的经验,你都不可能一开始就建一个外观,速度,功能以及转化都很完美的网站。你能做的并且也是各个站长正在做的,无非是通过不断的监测来改进...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程