框架代码
<!doctype html><head> <style> /* Prevents slides from flashing */防止闪烁 #slides { display:none; } </style> <script src='/images/loading.gif' data-original="http://code.jquery.com/jquery-latest.min.js"></script> <script src='/images/loading.gif' data-original="jquery.slides.min.js"></script> <script> $(function(){ $("#slides").slidesjs({ width: 940, height: 528 }); }); </script></head><body> <div id="slides"> <img src='/images/loading.gif' data-original="http://placehold.it/940x528"> <img src='/images/loading.gif' data-original="http://placehold.it/940x528"> <img src='/images/loading.gif' data-original="http://placehold.it/940x528"> <img src='/images/loading.gif' data-original="http://placehold.it/940x528"> <img src='/images/loading.gif' data-original="http://placehold.it/940x528"> </div></body>
基本设置
一、设置宽高(必须定义)
$(function(){ $("#slides").slidesjs({ width: 700, height: 393 });});
此处设置的宽高并没有实际作用,依旧为设备宽度,宽度需要在css中对#slisdes进行设置。
二、设置从那一张开始显示
$(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=“” // next button: 下一张按钮的 effect: "slide" // [string] Can be either "slide" or "fade". 效果滑动,也可以设置成fade幻灯 } });});
四:分页设置
五:播放和停止按钮设置
六:效果设置
$(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/
原标题:slide.js使用文档
关键词:JS