框架代码
<!doctype html>
<head>
<style>
/* Prevents slides from flashing */防止闪烁
#slides {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
940,
height: 528
});
});
</script>
</head>
<body>
<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>
</body>
基本设置
一、设置宽高（必须定义）
$(function(){
$("#slides").slidesjs({
700,
height: 393
});
});
此处设置的宽高应该设置成幻灯图片的宽高，保证父元素正好包裹图片。 如果全屏幻灯，请将#slides｛100%; height:auto;｝
二、设置从哪一张开始显示
$(function(){
$("#slides").slidesjs({
start: 3
});
});
默认 start:1
三、左右按钮
$(function(){
$("#slides").slidesjs({
navigation: {
active: true,
// [boolean] Generates next and previous buttons. 生成下一张和上一张按钮。
// You can set to false and use your own buttons. 可以设置false，使用自己写的按钮来替代系统的按钮。
// User defined buttons must have the following:
// previous button: class="slidesjs-previous slidesjs-navigation" 自己写的按钮，上一张按钮的class=“”
// next button: class="slidesjs-next slidesjs-navigation" 下一张按钮的class=""
effect: "slide"
// [string] Can be either "slide" or "fade". 效果滑动，也可以设置成fade幻灯
}
});
});
此处可以简写成 navigation: true,
四：分页设置
五：播放和停止按钮设置
$(function(){
$("#slides").slidesjs({
play: {
active: true,
// [boolean] Generate the play and stop buttons. 生成播放停止按钮，需要定义css，否则看不到按钮的
// 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. 默认不自动进行播放！十分重要，设置成true。
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 恢复动画间隔
}
});
});
六：效果设置
$(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. 交叉幻灯效果
}
}
});
});
七：回调函数
省略部分不常用，详细见slide.js官方主页 http://slidesjs.com/
最后来一个大综合
<script>
$(function(){
$("#slides").slidesjs({
940,
height: 450,
navigation: { //显示上一张下一张
active: true
},
play: { 设置自动时的动画效果、自动播放、间隔、鼠标悬停、移出恢复时间
active: false,
effect: "slide",
interval: 2000,
auto:true,
swap: false,
pauseOnHover: true,
restartDelay: 2500,
},
effect: { //特别注意：动画效果要与上面play中的属性保持一致，否则点击切换图片后，无法恢复动画
slide:{
speed:2000, //动画切换速度
}}
});
});
</script>