SlidesJS 响应式 jQuery 幻灯片插件
SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件。支持循环、自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作出优雅的幻灯片效果。
插件优势
响应动态创建幻灯片,适应任何屏幕。 | CSS3转换现代设备,运行于动画。 |
触摸刷卡支持跟踪触摸运动的支持的设备。 | 易于安装要快速和易于使用的例子。 |
在线例子
- Standard slideshow
- Playing and stopping slideshow
- Multiple slideshows
- Using callbacks
- Basic sliding slideshow (unstyled)
- Basic fading slideshow (unstyled)
这些例子也包括在下载的文档中。
使用方法
引入插件文件
<script src="js/jquery.min.js"></script>
<script src="js/jquery.slides.min.js"></script>
基本的HTML代码
<div id="slides">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
</div>
基本的CSS代码
.slides_container {
width:470px;
height:170px;
}
.slides_container div {
width:470px;
height:170px;
display:block;
}
调用插件
$(function() {
$('#slides').slidesjs({
width: 940,
height: 350,
navigation: false
});
});
初始化的时候可以有很多个自定义参数,见下面介绍的可选参数部分,注意幻灯片的高度和宽度是必须的。
可选参数
width (number) & height (number)
Set width and height of the slideshow. Hide example
$(function(){
$("#slides").slidesjs({
width: 700,
height: 393
});
});
This must be defined.
start (number)
Set the first slide in the slideshow. Hide example
$(function(){
$("#slides").slidesjs({
start: 3
});
});
Default value is 1.
navigation (object)
Next and previous button settings. Hide example
$(function(){
$("#slides").slidesjs({
navigation: {
active: true,
// [boolean] Generates next and previous buttons.
// You can set to false and use your own buttons.
// User defined buttons must have the following:
// previous button: class="slidesjs-previous slidesjs-navigation"
// next button: class="slidesjs-next slidesjs-navigation"
effect: "slide"
// [string] Can be either "slide" or "fade".
}
});
});
pagination (object)
Pagination settings Hide example
$(function(){
$("#slides").slidesjs({
pagination: {
active: true,
// [boolean] Create pagination items.
// You cannot use your own pagination. Sorry.
effect: "slide"
// [string] Can be either "slide" or "fade".
}
});
});
play (object)
Play and stop button setting. Hide example
$(function(){
$("#slides").slidesjs({
play: {
active: true,
// [boolean] Generate the play and stop buttons.
// You cannot use your own buttons. Sorry.
effect: "slide",
// [string] Can be either "slide" or "fade".
interval: 5000,
// [number] Time spent on each slide in milliseconds.
auto: false,
// [boolean] Start playing the slideshow on load.
swap: true,
// [boolean] show/hide stop and play buttons
pauseOnHover: false,
// [boolean] pause a playing slideshow on hover
restartDelay: 2500
// [number] restart delay on inactive slideshow
}
});
});
effect (object)
Effects setting. Hide example
$(function(){
$("#slides").slidesjs({
effect: {
slide: {
// Slide effect settings.
speed: 200
// [number] Speed in milliseconds of the slide animation.
},
fade: {
speed: 300,
// [number] Speed in milliseconds of the fade animation.
crossfade: true
// [boolean] Cross-fade the transition.
}
}
});
});
callback (function)
SlidesJS callbacks. Hide example
$(function(){
$("#slides").slidesjs({
callback: {
loaded: function(number) {
// Do something awesome!
// Passes start slide number
},
start: function(number) {
// Do something awesome!
// Passes slide number at start of animation
},
complete: function(number) {
// Do something awesome!
// Passes slide number at end of animation
}
}
});
});
相关链接
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(6)
上面的参数里面可以设置滚动效果。
上面不是有HTML的结构么,照着那个写就是了
能把左右导航和那个远点放到图片上么,现在的样式有点尴尬啊?
用这个插件,我想把取出来的图片显示到这个插件里面,怎么写代码啊?已经困扰我两天了。哪位前辈知道告诉我一下,谢谢!
如果我要从数据库取出图片加载到里面怎么样操作呢?
怎么淡入淡出,不喜欢左右滑动的效果,有没有参数可以设置的?