• SlidesJS基本使用方法和官方文档解释


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

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

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

    DEMO地址:http://slidesjs.com/

    官网地址:http://slidesjs.com/

    下载地址:http://slidesjs.com/downloads/slides.zip


    基本的HTML结构

    1. <div id="slides">  
    2.   <div class="slides_container">  
    3.     <div>  
    4.       <h1>Slide 1</h1>  
    5.       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
    6.     </div>  
    7.     <div>  
    8.       <h1>Slide 2</h1>  
    9.       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
    10.     </div>  
    11.     <div>  
    12.       <h1>Slide 3</h1>  
    13.       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
    14.     </div>  
    15.     <div>  
    16.       <h1>Slide 4</h1>  
    17.       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
    18.     </div>  
    19.   </div>  
    20. </div>  

    基本CSS代码

    1. <style type="text/css" media="screen">  
    2.   .slides_container {  
    3.     width:470px;  
    4.     height:170px;  
    5.   }  
    6.   .slides_container div {  
    7.     width:470px;  
    8.     height:170px;  
    9.     display:block;  
    10.   }  
    11. </style>    

    基本的初始化JavaScript代码

    [javascript] view plaincopy
    1. <script>  
    2.   $(function(){  
    3.     $("#slides").slides();  
    4.   });  
    5. </script>  


    官方文档解释 (版本1.1.9)

    preload(boolean)

    当参数设置为 true 的时候,表示在加载相册中照片的过程中显示 加载图片,设置为false的时候则表示不显示  加载图片
    [javascript] view plaincopy
    1. $(function(){  
    2.   $("#slides").slides({  
    3.     preload: true  
    4.   });  
    5. });  
    默认值为: false


    preloadImage(string)

    这个属性一般跟上一个 preload(boolean) 一起使用,string内的值表示需要显示的 加载图片 的 路径地址
    [javascript] view plaincopy
    1. $(function(){  
    2.   $("#slides").slides({  
    3.     preload: true,  
    4.     preloadImage: '/img/loading.gif'  
    5.   });  
    6. });  
    默认值为:"/img/loading.gif"


    container(string)

    设置放置图片层的顶级div  样式名称
    [javascript] view plaincopy
    1. $(function(){  
    2.   $("#slides").slides({  
    3.     container: 'slides_container'  
    4.   });  
    5. });  
    默认值为:"slides_container"


    generateNextPrev(boolean)

    设置 是否自动生成 上一个  下一个 按钮
    [javascript] view plaincopy
    1. $(function(){  
    2.   $("#slides").slides({  
    3.     generateNextPrev: true  
    4.   });  
    5. });  
    默认值为:false


    next(string)

    自动生成的下一个按钮 样式名称
    [javascript] view plaincopy
    1. $(function(){  
    2.   $("#slides").slides({  
    3.     next: 'next'  
    4.   });  
    5. });  
    默认值为:"next"


    prev(string)

    自动生成的上一个按钮 样式名称
    [javascript] view plaincopy
    1. $(function(){  
    2.   $("#slides").slides({  
    3.     prev: 'prev'  
    4.   });  
    5. });  
    默认值为: "prev"


    pagination(boolean)

    如果你不使用分页的方式显示图片你可以设置为false ,但是没有必要,推荐不做设置
    [javascript] view plaincopy
    1. $(function(){  
    2.   $("#slides").slides({  
    3.     pagination: true  
    4.   });  
    5. });  


    generatePagination(boolean)

    设置 是否自动生成分页导航层
    [javascript] view plaincopy
    1. $(function(){  
    2.   $("#slides").slides({  
    3.     generatePagination: true  
    4.   });  
    5. });  
    默认值为:true


    paginationClass(string)

    设置分页导航层样式名称
    [javascript] view plaincopy
    1. $(function(){  
    2.   $("#slides").slides({  
    3.     paginationClass: 'pagination'  
    4.   });  
    5. });  
    默认值为:"pagination"



    currentClass(string)

    设置分页导航层中 当前分页项目样式名称
    [javascript] view plaincopy
    1. $(function(){  
    2.   $("#slides").slides({  
    3.     currentClass: 'current'  
    4.   });  
    5. });  

    默认值为:"current"

  • 相关阅读:
    PSP总结报告
    final版——爱阅APP功能说明书
    软件工程第十一次作业-例行报告
    感谢
    互评Beta版本——王者荣耀交流协会的PSP DAILY作品
    软件工程第十次作业-例行报告
    Beta版——爱阅APP功能说明书
    软件工程第九次作业-例行报告
    软件工程第八次作业-例行报告
    shell-条件分支循环
  • 原文地址:https://www.cnblogs.com/piuba/p/3296253.html
Copyright © 2020-2023  润新知