SlidesJS是一款基于jQuery的响应幻灯片插件,支持移动端触屏滑动和CSS3转换等功能。本文演示了7中不同的幻灯片效果,让你更加了解SlidesJS插件的强大功能。
slide.js有以下特点:
<ul class='ul_demo'> <li>支持播放和停止</li> <li>支持同个页面多个幻灯片轮播</li> <li>支持回调</li> </ul>
演示一:<a href='http://www.sucaihuo.com/jquery/4/453/demo/examples/standard' target='_blank'>标准的幻灯片</a>
HTML
<div id="slides">
<img src="img/example-slide-1.jpg" alt="素材火http://www.sucaihuo.com/js">
<img src="img/example-slide-2.jpg" alt="素材火http://www.sucaihuo.com/js">
<a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left icon-large"></i></a>
<a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right icon-large"></i></a>
</div>
$('#slides').slidesjs({
width: 940,
height: 528,
navigation: false
});
演示二:<a href='http://www.sucaihuo.com/jquery/4/453/demo/examples/playing' target='_blank'>播放和停止</a>
$('#slides').slidesjs({
width: 940,
height: 528,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
演示三:<a href='http://www.sucaihuo.com/jquery/4/453/demo/examples/multiple' target='_blank'>同个页面多个幻灯片</a>
$('#slides').slidesjs({
width: 940,
height: 528,
navigation: false
});
$('#slides2').slidesjs({
width: 940,
height: 528,
navigation: false,
start: 3,
play: {
auto: true
}
});
演示四:<a href='http://www.sucaihuo.com/jquery/4/453/demo/examples/callbacks' target='_blank'>回调函数</a>
$('#slides').slidesjs({
width: 940,
height: 528,
callback: {
loaded: function(number) {
console.log('SlidesJS: Loaded with slide #' + number);
$('#slidesjs-log .slidesjs-slide-number').text(number);
},
start: function(number) {
console.log('SlidesJS: Start Animation on slide #' + number);
},
complete: function(number) {
console.log('SlidesJS: Animation Complete. Current slide is #' + number);
$('#slidesjs-log .slidesjs-slide-number').text(number);
}
}
});
演示五:<a href='http://www.sucaihuo.com/jquery/4/453/demo/examples/basic-slide' target='_blank'>滑动效果</a>
$('#slides').slidesjs({
width: 940,
height: 528
});
演示六:<a href='http://www.sucaihuo.com/jquery/4/453/demo/examples/basic-fade' target='_blank'>淡入淡出</a>
$('#slides').slidesjs({
width: 940,
height: 528,
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 400
}
}
});
slide.js中文API
参数 | 描述 | 默认值 |
width (number) & height (number) | 设置幻灯片的宽度和高度。 | - |
start (number) | 设置幻灯片的第一张幻灯片。 | 1 |
navigation | 下一个和上一个的按钮设置 | - |
pagination | 分页设置 | - |
play | 播放和停止按钮设置。 | - |
callback | 回调函数 | - |
effect | 效果设置 | - |
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791