• jquery SmallSlider 图片轮播插件


    SmallSlider 图片轮播插件 好用的图片插件

    示例代码:
    HTML部分
    HTML代码:

    <div id="flashbox" class="smallslider">
    <ul>
    <li><a href="#"><img src="rs/images/001.jpg" title="" alt="图片标题1" /></a></li>
    <li><a href="#"><img src="rs/images/002.jpg" title="" alt="图片标题2" /></a></li>
    <li><a href="#"><img src="rs/images/003.jpg" title="" alt="图片标题3" /></a></li>
    <li><a href="#"><img src="rs/images/004.jpg" title="" alt="图片标题4" /></a></li>
    <li><a href="#"><img src="rs/images/005.jpg" title="" alt="图片标题5" /></a></li>
    </ul>
    </div>


    JS部分
    JS代码:

    <script type="text/javascript">
    $(document).ready(function(){
    $('#flashbox').smallslider({
    onImageStop:false,
    switchEffect:'ease',
    switchEase: 'easeOutBounce',
    switchPath: 'up',
    switchMode: 'hover',
    textSwitch:2,
    textPosition: 'top',
    textAlign:'center'
    });
    });
    </script>

    怎么样?够简单吧?完全不需要写额外的HTML代码。
    调用方法:
    1。保证你的页面链接进3个文件:
    <script type="text/javascript" src="rs/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="rs/js/jquery.smallslider.js"></script>
    <link rel="stylesheet" type="text/css" href="rs/css/smallslider.css" media="screen" />
    2。HTML 结构如下:
    1),最外层必须为一个div元素,这个div需要指定一个class为:smallslider。
    2),div内的HTML结构为一个ul标签,ul标签内为li标签,li内为a标签,a内为img标签,即:div--->ul--->li--->a--->img 。
    3),img标签的alt属性为显示的标题文字内容,所以必须要有。
    3,初始化轮播图:

    <script type="text/javascript">
    $(document).ready(function(){
    $(function(){
    $('#flashbox').smallslider();
    });
    });
    </script>

    有一点要注意,就是必须固定你的调用元素的高度和宽度。一般情况下,切换的图片高度和宽度都是固定的,如果你图片大小不一,切换的时候会很难看。
    如果你有好的建议,请给我发邮件:zwbgreat@163.com (请把#换成@)



    参数列表:
    参数默认值说明
    time3000 切换时间间隔,单位毫秒,1秒=1000毫秒
    autoStarttrue 是否自动开始播放
    onImageStopfalse 鼠标放在图片上时,是否停止播放
    switchMode'hover' 图片切换的方式,click为单击切换,hover为鼠标移动到按钮上时切换
    switchEffect'fadeOut' 切换特效,fadeOut,ease,none,
    switchPath'left' 切换的方向,可选值为:up , left ,即向上,向左
    switchEase'easeOutQuart' 当SwitchEffect为'ease'时可用。可选值列表如下:["easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint", "easeInSine", "easeOutSine", "easeInOutSine", "easeInExpo", "easeOutExpo", "easeInOutExpo", "easeInCirc", "easeOutCirc", "easeInOutCirc", "easeInElastic", "easeOutElastic", "easeInOutElastic", "easeInBack", "easeOutBack", "easeInOutBack", "easeInBounce", "easeOutBounce", "easeInOutBounce"],各种切换方式之间差别不是很大,有兴趣可以逐一测试
    switchTime600 切换时间,单位毫秒,1秒=1000毫秒
    actionGap200 鼠标触发延时,单位毫秒
    buttonPosition'rightBottom' 按钮位置表示,共有四个值:leftTop,leftBottom,rightTop,rightBottom
    buttonOffsetX10 水平方向上的按钮偏移位置,指向中心部移动多少,这里是数值,不加px
    buttonOffsetY4 竖直方向上的按钮偏移位置,指向中心部移动多少,这里是数值,不加px
    buttonSpace4 按钮之间的间隔 单位为像素,但不要加px
    showTexttrue 是否显示标题,如果不显示,则只显示按钮
    showButtonstrue 是否显示按钮,默认显示
    textLinktrue 是否给显示的标题加上链接,如果为false,只显示标题,标题不可单击
    textSwitch0 标题是否运动显示,如果为0则不动,1 标题动,2 标题和背景一起动。
    textPosition'' 标题栏的位置,默认为空,即和按钮的位置一致,取值 top , bottom
    textAlign'center' 标题栏取 top 或 bottom 时,有效,left, center, right
  • 相关阅读:
    SpringCloud(3)服务消费者(Feign)
    SpringCloud(2)服务消费者(rest+ribbon)
    SpringCloud(1)服务注册与发现Eureka
    SpringBoot中注入ApplicationContext对象的三种方式
    SpringBoot整合Swagger2搭建API在线文档
    SpringBoot整合Shiro使用Ehcache等缓存无效问题
    使用Zint和Zxing实现二维码的编码与解码(Using open-source tools to generate and decode Q-R code)
    简单易懂的现代魔法——Play Framework攻略3
    简单易懂的现代魔法——Play Framework攻略2
    简单易懂的现代魔法——Play Framework攻略1
  • 原文地址:https://www.cnblogs.com/zwbgreat/p/2735809.html
Copyright © 2020-2023  润新知