zoukankan      html  css  js  c++  java
  • 推荐轮播插件--touchSlidertouchSlider

    touchSlider

    github地址:https://github.com/qiqiboy/touchslider
    演示地址:http://touchslider.com


    默认参数说明
    _default: {
        'id': 'slider', //string|elementNode 幻灯容器的id或者该节点对象
        'begin': 0, //Number 默认从第几个幻灯开始播放,从0开始
        'auto': true, //bool 是否自动播放
        'speed':600, //Number 动画效果持续时间,单位是毫秒
        'timeout':5000, //Number 幻灯播放间隔时间,单位毫秒
        'direction':'left', //string left|right|up|down 播放方向,四个值可选
        'align':'center', //string left|center|right 对齐方向(fixWidth=true情况下无效),靠左对齐(ipad版appStore上截图展现方式)、居中对齐(iphone版appStore上截图展现方式)、靠右对齐
        'fixWidth':true, //bool 默认会将每个幻灯宽度强制固定为容器的宽度,即每次只能看到一张幻灯;false的情况参见下方第一个例子
        'mouseWheel':false, //bool 是否支持鼠标滚轮
        'mouseDrag':true, //bool 是否支持鼠标拖拽切换
        'before':new Function(), //Function 幻灯切换前, before(newIndex, oldSlide)
        'after':new Function() //Function 幻灯切换后, after(newIndex, newSlide)
    }
    
    var slider=new TouchSlider();
    slider.pause();//暂停播放
    slider.play();//开始播放
    slider.prev();//上一张
    slider.next();//下一张
    slider.stop();//停止播放(暂停并回到第一张)
    slider.append(newLi);//末尾添加一个幻灯项,参考下边第二个幻灯示例
    slider.prepend(newLi);//开头添加一个幻灯项
    slider.remove(index);//删除第index个幻灯,slider.remove(1)
    slider.insertBefore(newLi,index);//在第index幻灯前插入一个幻灯项
    

    一些例子: 

    full-width 类型:容器宽度自适应,幻灯宽度不固定,居中对齐(iphone版appStore上截图展现方式) 
    调用方式:new TouchSlider('slider',{speed:600, timeout:3000, direction:'left', mouseDrag:false, fixWidth:false})

    • 1
    • 2
    • 3
    • 4
    • 5
       

    full-width 类型:容器宽度自适应,幻灯宽度不固定,靠左对齐(ipad版appStore上截图展现方式) 
    调用方式:new TouchSlider('slider',{speed:600, timeout:3000, direction:'left',align:'left'fixWidth:false})

    • 1
    • 2
    • 3
    • 4
    • 5
         

    250px-width 类型:容器宽度250px,固定宽度幻灯,方向向上滚动 
    调用方式:new TouchSlider('slider2',{'auto':false, begin:1, speed:600, timeout:3000, direction:'up'})

    • 1
       

    Full-width 类型:容器宽度自适应,幻灯宽度固定
    调用方式:new TouchSlider('slider',{speed:600, timeout:3000, mouseWheel:true})

    • 1
       

    image slider new TouchSlider('slider4',{'auto':true, speed:600, timeout:6000})

    页码实现方式一(未加状态标识): 4


        


  • 相关阅读:
    oracle客户端plsql设置字符集
    命令导入导出oracle库
    java初级开发一系列的工具安装配置
    docker学习笔记-5.数据共享
    docker学习笔记-4.harbor
    flask学习笔记2
    socket编程学习
    docker学习笔记-3.docker镜像制作
    docker学习笔记-2.docker镜像制作
    docker学习笔记-1.docker基础
  • 原文地址:https://www.cnblogs.com/mcdnf/p/5158274.html
Copyright © 2011-2022 走看看