推荐一款焦点图jQuery插件 SlidesJs
给大家推荐一款比较好用的 Jquery Slide 插件 slidesjs，本人一直在使用的哦。
这个插件支持两种slide效果，一个是滑动，还有一个是渐隐渐出，而且它还支持自适应屏幕 自动播放，播放暂停， callback等，功能还是比较齐全，大家可以在此基础上扩展很多效果。
目前该插件已经更新至 3.0，支持jQuery 1.8.2 以上。 猛戳此处进入官网
下面介绍一下它的使用方法。
基本的HTML
|
1
2
3
4
5
6
7
8
9
|
<div id="slides">
<img src="test1.jpg" />
<img src="test1.jpg" />
<img src="test1.jpg" />
<img src="test1.jpg" />
<img src="test1.jpg" />
</div>
<!-- callback 显示当前 -->
<div id="slidesjs-log">Slide <span class="slidesjs-slide-number">1</span> of 4</div>
|
一、设置宽度和高度幻灯片。
|
1
2
3
4
5
6
|
$(function(){
$("#slides").slidesjs({
width: 940,
height: 528
});
});
|
二、设置在幻灯片中的第一张幻灯片。
|
1
2
3
4
5
|
$(function(){
$("#slides").slidesjs({
start: 3
});
});
|
三、前后按钮设置。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$(function(){
$("#slides").slidesjs({
navigation: {
active: true,
// [boolean] 生成下一个和以前的按钮。
// 可以设置为false，并使用自己的按钮。
// 用户定义的按钮，必须具备以下条件：
// 上一个按钮：class="slidesjs-previous slidesjs-navigation"
// 下一个按钮：class="slidesjs-next slidesjs-navigation"
effect: "slide"
//可以是 "slide" 或者 "fade".
}
});
});
|
四、分页设置。
|
1
2
3
4
5
6
7
8
9
10
11
|
$(function(){
$("#slides").slidesjs({
pagination: {
active: true,
// [boolean] 创建分页项
// 不能使用自己的分页
effect: "slide"
// [string] 可以是 "slide" 或者 "fade".
}
});
});
|
五、播放和停止按钮设置。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
$(function(){
$("#slides").slidesjs({
play: {
active: true,
// [boolean] 生成的播放和停止按钮.
//不能使用自己的按键。
effect: "slide",
// [string] 可以是 "slide" 或者 "fade".
interval: 5000,
// [number] 每张幻灯片上花费的时间以毫秒为单位。
auto: false,
// [boolean] 加载开始播放幻灯片。
swap: true,
// [boolean] 显示/隐藏停止和播放按钮
pauseOnHover: false,
// [boolean] 鼠标经过暂停正在播放的幻灯片。
restartDelay: 2500
// [number] 重新启动延迟无效幻灯片。
}
});
});
|
六、效果设置。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$(function(){
$("#slides").slidesjs({
effect: {
slide: {
// 滑动效果设置.
speed: 200
// [number] 速度以毫秒为单位的幻灯片动画。
},
fade: {
speed: 300,
// [number] 速度以毫秒为单位的幻灯片动画。
crossfade: true
// [boolean] 交叉过度效果.
}
}
});
});
|
七、回调函数的使用。
|
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
|
$(function(){
$("#slides").slidesjs({
callback: {
loaded: function(number) {
//第一次加载幻灯片时
// Use your browser console to view log
console.log('SlidesJS: Loaded with slide #' + number);
// Show start slide in log
$('#slidesjs-log .slidesjs-slide-number').text(number);
},
start: function(number) {
//幻灯片开始切换时
// Use your browser console to view log
console.log('SlidesJS: Start Animation on slide #' + number);
},
complete: function(number) {
//幻灯片切换完成时
// Use your browser console to view log
console.log('SlidesJS: Animation Complete. Current slide is #' + number);
// Change slide number on animation complete
$('#slidesjs-log .slidesjs-slide-number').text(number);
}
}
});
});
|
转载于:https://www.cnblogs.com/hemei/p/3710810.html
推荐一款焦点图jQuery插件 SlidesJs相关推荐
- 推荐一款图片轮换jQuery插件
效果图: 此款插件看图即明白是什么玩意. DEMO or Download
- 9款别出心裁的jQuery插件
jQuery插件开发正在以惊人的速度快速增长,因其强大且易用的jQuery框架,使得我们的工作变得更加轻松!除了jQuery,还有 Flash,HTML5/CSS3以及一些强大的Web浏览器的支持,可 ...
- 2012年最新的12款超棒jQuery插件
期:2012-11-3 来源:GBin1.com 今天我们将分享12款精心挑选最新jQuery插件,包含了演讲,排序及其社交内容等等,很多插件在gbin1以前的jQuery文章中我们都介绍过,希望大 ...
- Web开发者必备的12款超赞jQuery插件
jQuery插件能够增强网站的可用性,有效地改善用户体验,还可以大大减少创建一个新站点的开发时间.现在的jQuery插件很多,尽可以根据您的项目要求来选择,不过也有一些插件很好用,几乎各种项目都能够用 ...
- 炫酷插件_PS如何做炫酷动图？推荐5款黑科技PS插件（3D动态|分散粒子｜烟雾特效..）帮你轻松实现...
动态的图片越来越受到人们的欢迎,但普通小白上手却不太简单,今天给大家分享几款黑科技PS插件,神秘浓雾气特效GIF动作插件,分散粒子插件动作,图片变故障特效psd图层样式,图片变3D动态--tikuwa ...
- 推荐15款优秀的chrome插件，每一款都是神器
背景 Chrome浏览器是目前是全球最受欢迎的浏览器之一.其采用了多进程的架构,浏览器的运行速度和稳定性都非常好.拥有一套全面的安全系统,包括反恶意软件.安全浏览.沙箱和自动更新等功能,保障用户的浏览 ...
- 为开发者准备的15 款Tooltip工具提示jQuery插件
http://www.admin10000.com/document/2332.html tooltip或者infotip或者hint,是一种常见的图形用户界面元素.它用于连同一个光标,通常是一个鼠标 ...
- 推荐5款实用的jQuery时间轴插件
1.使用CSS3和jQuery制作的水平时间轴 这是一个可以在PC和移动端表现非常棒的水平时间轴,它由上部水平滑块和下部时间点对应的内容区块,点击时间轴上的时间点,下部内容会滑动到对应的内容区块.使用 ...
- 6款强大的jQuery插件 创建和加强网站布局
Javascript 打开了web设计的大门,给了Html和CSS更宽广的舞台.HTML5和CSS3,又比从前进步了一大截.神奇的根源来自JavaScript,它可以向你的网站布局中加入交互元素.以j ...
- 微信读书vscode插件_推荐 10 款有趣的 VSCode 插件
如果你知道 VSCode,一说起它,你可能第一个想到的就是把它当做一个代码编辑器,而它的界面应该可能大概率是这样的: 如果你恰好又是个程序员,那你可能经常会用到它,不管是 Python.JS 还是 C ...
最新文章
- php 构造 析构,php 构造方法和析构方法
- java MDC_log4j MDC实现日志追踪
- 本科生学习fpga,dsp,嵌入式操作系统哪个好
- Javascript权威指南学习笔记一：数据类型
- 微型计算机不属于串行接口,在微型计算机中，不属于串行接口的是
- 典型微型计算机控制系统的实例,微型计算机控制系统概述.ppt
- iOS 添加导航栏两侧按钮
- Linux C高级编程——文件操作之系统调用
- 为什么使用 Dubbo ? 微服务概述？传统应用的问题？
- jq往字符串中插入_jq: dom-插入
- app 怎么实现后端对前端的通知功能_app测试流程
- h5禁用浏览器下载视频_h5中利用canvas绘制video 忽略浏览器自带视频播放控件
- 【AI视野·今日NLP 自然语言处理论文速览 第三十二期】Wed, 20 Apr 2022
- win7 升级到 win10 补丁
- c++ Beep函数的雪之梦
- oc贴材质透明logo有问题，logo贴图有底色，oc贴图怎么不平铺
- 检测输入数据中奇数和偶数的个数
- 内构函数java_图灵学院笔记-java虚拟机底层原理
- 网络是怎样连接的学习笔记——从网线到网络设备
- 重读《拿破仑传》有感