你的位置:首页 > Java教程

[Java教程]slide.js使用文档


框架代码

<!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({    width: 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({  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/