注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

一个强大的jQuery响应式幻灯片插件Slideme

媒体 fishcity 2266浏览

一个强大的jQuery响应式幻灯片插件Slideme

Slideme是一强大的响应式、完全可定制的幻灯片插件,Slideme内容了许多不同种类的过渡效果,只需简单的设置就可以调用。来,试下这强大的slideme功能吧。

引入核心文件 

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.slideme-1.19.69.js"></script>
<link rel="stylesheet" href="css/slideme.css" type="text/css" media="all"/>
$(document).ready(function() {
$('#foo').slideme();
});

写上html

<!-- Any DOM: ul/ol > li, div, section, etc... -->
<div id="foo">
    <ul class="slideme"> <!-- Class "slideme" is mandatatory! -->
        <li><img src="img/one.jpg" alt="One"/></li>
        <li><img src="img/two.jpg" alt="Two"/></li>
        <li><img src="img/three.jpg" alt="Three"/></li>
        <li><img src="img/four.jpg" alt="Four"/></li>   
    </ul>
</div>

写上CSS

/* How to set width and height in non-responsive istances */
#foo .slideme {
	width: 550px;	height: 430px;
}

方法

current返回当前的inde值

$('#foo').slideme('current');
\*Return: Current slide's index*\

destroy 摧毁目标实例

$('#foo').slideme('destroy');
\*Return: Destroy target instance;*\

jampTo 整型,无动画效果跳到某个滑块

$('#foo').slideme('jumpTo', 3);\*
Values: integer;
Description: Go to 'n' slide without animation;
*\

play 幻灯片自动播放

$('#foo').slideme('play');\*
Description: Restart instance's autoslide;
*\

playTo 整型,有动画效果跳到某滑块

$('#foo').slideme('playTo', 3);
\*
Values: integer;
Description: Go to "n" slide with animation;
*\

playToId 动画跳到某个ID

$('#foo').slideme('playToId', '#account');
\*
Default: undefined;无默认值
Values: Any selector;任何选择器(元素)
Description: Goto the selector with animation;
*\

stop 停目幻灯片的自动播放

$('#foo').slideme('stop');
\*
Description: Stop instance's autoslide;
*\

update 重新计算幻灯片数量

$('#foo').slideme('update');
\*
Description: Recount slides;
*\

version 返回slideme的版本号

$('#foo').slideme('version');
\*
Return: Version of slideme;
*\

参数

arrow

$('#foo').slideme({
	arrows: false
});
\*
Default: false;
Values: true/false;
Description: Create Next and previous button;建立上一页和下一页按钮
*\

autoslide

$('#foo').slideme({
	autoslide: false
});
\*
Default: false;
Values: true/false;
Description: Auto slideshow mode;自动幻灯片模式
*\

autoslideHoverStop

$('#foo').slideme({
	autoslideHoverStop: false
});
\*
Default: false;
Values: true/false;
Description: Pause auto slideshow mode on mouseover;鼠标悬浮时暂停,离开播放
*\

CSS3

$('#foo').slideme({
	css3: true
});
\*
Default: false;
Values: true/false;
Description: Css3 animation support;支持CSS3动画
*\

interval

$('#foo').slideme({
	interval: 1000
});
\*
Default: 500;
Values: Interval in millisecond;
Description: The interval between each slide;每个幻灯片之间的时间间隔
*\

itemsForSlide

$('#foo').slideme({
	itemsForSlide: 3
});
\*
Default: undefined;
Values: any integer;
Description: wrap each 'n' item;包含定义的n个item
*\

lables

$('#foo').slideme({
	labels: {
		next: 'next',
		prev: 'prev'
	}
});
\*
Default: 'next/prev';
Values: Any string;
Description: Label for next/prev control;标签显示上一页和下一页
*\

loop

$('#foo').slideme({
	loop: false
});
\*
Default: false;
Values: true/false;
Description: Infinite slideshow;无限循环播放
*\

onCreatedCallback

$('#foo').slideme({
	onCreatedCallback: myCallback
});
\*
Default: undefined;
Values: Any function;
Description: Call a function after an istance has been created;istance(元素)创建调用一个函数
Return: {  Object : { "instance": selector, "index": integer } };返回一个object
*\
onEndCallback
$('#foo').slideme({
	onEndCallback: myCallback
});
\*
Default: undefined;
Values: Any function;
Description: Call a function after an istance animation;目标元素动画完成后调用一个函数
Return: {  Object : { "instance": selector, "index": integer } };返回object对象
*\

onStartCallback

$('#foo').slideme({
	onStartCallback: myCallback
});
\*
Default: undefined;
Values: Any function;
Description: Call a function before an istance animation;;目标元素动画前成后调用一个函数
Return: {  Object : { "instance": selector, "index": integer } };返回object对象
*\

pagination

$('#foo').slideme({
	pagination: 'numbers'
});
\*
Default: undefined;
Values: 'both/numbers/thumbs';
Description: Pagination settings;分页样式设置:数字或是缩略图
*\

resizable

$('#foo').slideme({
	resizable: {
		width: 320,
		height: 280
	}
});
\*
Default: undefined;
Values: Any integer;
Description: Create responsive slideshows;创建响应的幻灯片
*\

speed

$('#foo').slideme({
	speed: 1000
});
\*
Default: 500;
Values: Any integer;
Description: Animation speed in millisecond;动画的速度,毫秒为单位
*\

thumbs

$('#foo').slideme({
	thumbs: {
		width: 50,
		height: 40
	}
});
\*
Default: 50/40;
Values: Any integer;
Description: Set the thumbnails size;设置缩略图的大小
*\

transition

$('#foo').slideme({
	transition: 'page'
});
\*
Default: slide;
Values: 'fade/slide/page';
Description: Set the animation kind;设置动画的转场效果
*\

转载请注明:jQ酷 » 一个强大的jQuery响应式幻灯片插件Slideme

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。