• 适用于任何Html内容的jQuery Slider插件


    任何Slider都是一个易于使用且支持触摸的jQuery插件,允许您为任何html内容创建可自定义的滑块,如图像,文本,视频等。

    特征:

    • 重量轻,易于使用
    • 支持键盘导航
    • 使用淡入淡出或幻灯片过渡以及自定义缓动
    • 支持自动播放
    • 有很多选项可以自定义您自己的滑块

    基本用法:

    1.标记html结构

    <div class="slider-wrapper"><font></font>
    <div class="slider" id="slider"> <font></font>
    <span> Content 1 </span><font></font>
    <section> Content2 </section><font></font>
    <div> Content 3</div><font></font>
    </div><font></font>
    </div>

    2.在页面上包含jQuery库和jQuery AnySlider

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <font></font>
    <script src="jquery.anyslider.js"></script>
    

    3.包含缓动插件以缓解效果  

    <script src="jquery.easing.1.3.js"></script>
    

    4.包含jQuery AnySlider CSS来设置滑块的样式

    <link rel="stylesheet" href="jquery-anyslider.css">
    

    5.使用默认选项调用插件

    $(document).ready(function () {<font></font>
    $('#slider').AnySlider();<font></font>
    });
    

    6.所有默认选项。

    • afterChange: function () {}:每次幻灯片更改后调用的函数。
    • afterSetup: function () {}:设置滑块后调用的函数。
    • animation: 'slide':滑动或褪色
    • beforeChange: function () {}:每次幻灯片更改前调用的函数。
    • easing: 'swing':缓解选项。样式名称在jquery.easing.1.3.js里
    • interval: 5000:每张幻灯片上暂停的毫秒数。将此选项设置为0将禁用自动播放。
    • keyboard: true:允许使用向左和向右箭头键进行键盘导航。
    • nextLabel: 'Next slide':标签为下一个按钮。
    • pauseOnHover: true:在悬停时暂停自动播放
    • prevLabel: 'Previous slide':prev键的标签。
    • reverse: false:启用自动播放时是否从右向左滑动而不是从左向右滑动。
    • showBullets: true:是否显示导航子弹。将此设置为false将阻止子弹被绘制。
    • showControls: true:显示/隐藏控件。将此设置为false将阻止控件的绘制。
    • speed: 400:动画时间(以毫秒为单位)。将此选项设置为0将禁用动画。
    • startSlide: 1:起始幻灯片的编号。 
    • touch: true:是否启用在幻灯片之间滑动的功能。

      

      

  • 相关阅读:
    JSP脚本指令
    JSP编译指令——page、include
    c++基础(三):多态
    c++基础(一):数据类型和结构
    c++基础(二):成员he派生类
    python小算法(二)
    python的内存管理
    初识java之Mina(一)
    python的小爬虫的基本写法
    python小算法(一)
  • 原文地址:https://www.cnblogs.com/dayin1/p/11496608.html
Copyright © 2020-2023  润新知