News Contents
信息中心

TouchSlider开发笔记

发表日期:2018/9/18      浏览次数:

  TouchSlider是一个轻量级的javascript组件,设计的目的是提供一个可以方便实现全平台(PC及移动端触摸界面)的幻灯slider效果。近期开发触屏版网站的滑动选择菜单功能,对比了网上的一些jQuery Touchslider插件,发现还是qiqiboy那个版本的TouchSlider插件功能比较齐全。

MIT license的TouchSlider 0.95存在依赖 jQuery,需要额外加载 Javascript 脚本资源; 插件默认会将第二页的内容隐藏,如果想要平铺展示则需要修改 Javascript 脚本等缺点。

而qiqiboy版本的目前使用范围已经不仅仅限于幻灯片制作,更可以很方便的实现网站局部左右切换,通过提供的操作接口(.append(), .remove()),可以很方便的随时添加页面或者删除页面,实现在平台上的页面滑动。

以下仅以此版本的TouchSlider插件作为使用经验笔记。

 

默认参数说明

_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 是否支持鼠标滚轮
    'before':new Function(), //Function 幻灯切换前, before(newIndex, oldSlide)
    'after':new Function() //Function 幻灯切换后, after(newIndex, newSlide)
}

 

 

一些常用接口方法

 

var slider=new TouchSlider(config);//config为配置参数,见上边说明
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幻灯前插入一个幻灯
slider.slide(index, speed)://滑动到第index个幻灯项,速度为speed参数
slider.resize();//重新设定slider的宽度高度等参数

 

 

demo地址

 

请点击http://u.boy.im/touchslider/

 

 

 

经验技巧

 

1. 插件存在一个小BUG。

 

由于源码内部绑定了窗口发生resize事件(浏览器窗口调整)时,插件也会跟resize重设参数以适应屏幕。但是出现需要幻灯容器隐藏和重新显示的时候,如果在隐藏期间窗口发生了resize事件,那么容器里面的幻灯项float样式就会全崩溃,因为隐藏期间幻灯项及容器的高度等参数都是错误的,slider执行的内部resize方法会导致样式错误,因此重新显示时,幻灯容器样式就崩了。

解决方式:在不重构插件源码的前提下,最简单的方法是在容器重新show之后,执行一下slider的resize方法,让幻灯容器参数重新恢复正常。

 

2. 禁用浏览器的左右滑动翻页功能

某些手机浏览器会占用左右滑动作为浏览器切换窗口功能,如UC浏览器,导致TouchSlider无法正常使用。

解决方法:可以在JS中禁用浏览器的左右滑动占用

    var control = navigator.control || {};
    if (control.gesture) {
        control.gesture(false);
    }

 

3. 网站局部菜单左右切换的右部滑动限制

用TouchSlider作为滑动菜单栏时,由于滑动并没有限制,可能出现菜单全滑到左边隐藏掉了,仅剩下最后一个菜单,右边完全空白的情况

 

解决方法:

a .到了最后一个菜单出现后禁止再向右滑动(需改源码)

b. 滑动结束后往回滚动至最适合位置。

以b方式为例,在slider的初始化配置中加上参数'after': doSlideAfter,使其每次滑动完都执行doSlideAfter:

    var itemWidth = document.getElementById("slider").firstChild.offsetWidth;
    var clientWidth = document.body.clientWidth;

    var lastLoacl = slider.length - parseInt(clientWidth / itemWidth);

    //每次窗口大小改变,滚动栏的最适合位置调整
    $(window).resize(function () {
        clientWidth = document.body.clientWidth;
        lastLoacl = sliderClass.length - parseInt(clientWidth / itemWidth);
    });

//滑动完成后检查是否超出右边最适合位置,超出则回滚到最合适位置
function doSlideAfter(newIndex, newSlide) {
    if (lastLoacl <= 0) {
        sliderClass.slide(0);
    } else if (newIndex > lastLoacl && lastLoacl > 0) {
        sliderClass.slide(lastLoacl);
    }
}

达到回滚到最合适位置的效果,保持UI的美观和便利

 

插件下载地址:

http://download.csdn.net/detail/cyzero/8424907

 

 

盛大建站承接个人、公司、企业的网站建设、网页设计、网店制作、独立商城制作、外贸网站制作,也承接同行介绍的业务,欢迎联系!
本站承接主要业务如下:
1、提供免备案虚拟主机(网站空间),有独立国内服务器、高速美国服务器、香港服务器、韩国服务器、日本服务器,>> http://www.fuanxx.com
2、网站建设:个人网店制作、企业建站、公司网站、新闻、下载等;论坛、博客网站搭建,承接外贸英文站制作
3、承接阿里巴巴、京东、淘宝、天猫等的商品数据采集
4、网站防钓鱼,可以过360、QQ、搜狗、金山、微信拦截
5、要就发IP网站限制访问系统,防止同行抄袭并保障海外客户访问不受影响,>> http://www.198ip.com
十年如一日,我们专注于提供高品质 定制网站建设服务!
您的信任,我们的责任,期待与您的合作!