search

Home >Web Front-end >JS Tutorial >实例代码详解jquery.slides.js_jquery

实例代码详解jquery.slides.js_jquery

WBOY
WBOYOriginal
2016-05-16 15:32:081241browse

Slides – 是一个简单的，容易定制和风格化，的jQuery幻灯片插件。

Slides提供褪色或幻灯片过渡效果，图像淡入淡出，图像预压，自动生成分页，循环，自动播放的自定义等很多选项。

用Slides插件，你可以随机播放幻灯片，设定那一套您想要开始幻灯片。它附带充分的说明和示例。

废话不多说了，直接给大家贴代码了

 $(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: ,
   // [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: 
   // [number] restart delay on inactive slideshow
  }
 });
 });

前台：

<!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: ,
   height: 
  });
  });
 </script>
 </head>
 <body>
 <div id="slides">
  <img  src="http://placehold.it/x" alt="实例代码详解jquery.slides.js_jquery" >
  <img  src="http://placehold.it/x" alt="实例代码详解jquery.slides.js_jquery" >
  <img  src="http://placehold.it/x" alt="实例代码详解jquery.slides.js_jquery" >
  <img  src="http://placehold.it/x" alt="实例代码详解jquery.slides.js_jquery" >
  <img  src="http://placehold.it/x" alt="实例代码详解jquery.slides.js_jquery" >
 </div>
 </body>

以上内容是关于jquery.slides.js的全部代码，希望大家喜欢。

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt_javascript技巧Next article：uploadify多文件上传参数设置技巧_jquery

Related articles

See more