首页 » 微信公众平台开发:从零基础到ThinkPHP5高性能框架实践 » 微信公众平台开发:从零基础到ThinkPHP5高性能框架实践全文在线阅读

《微信公众平台开发:从零基础到ThinkPHP5高性能框架实践》24.6.2 图片滑动特效实现

关灯直达底部

为了让横幅中的图片以滑动的形式展示出来,需要用到Swipe JS组件。

Swipe JS是一个轻量级的移动滑动组件,支持1:1的触摸移动,可以让移动Web应用展现更多的内容,能满足很多移动Web对滑动的需求。其官方网站为http://swipejs.com/。

为了让图片能够滑动,需要将横幅容器传递到Swipe函数中,同时设置相应的参数以控制滑动效果。Swipe提供如下参数设置。

·startSlide:滑动的索引值,即从*值开始滑动,默认值为0。

·speed:滑动的速度,默认值为300ms。

·auto:自动滑动,单位为ms

·continuous:是否循环滑动,默认值为true。

·disableScroll:是否允许触摸时滚动屏幕,默认值为false。

·stopPropagation:停止事件传播,默认值为false。

·callback:回调函数。

·transitionEnd:滑动过渡时调用的函数。

对于横幅中的图片列表,其滑动控制代码如下。


<script>    $(function{        new Swipe(document.getElementById('banner_box'), {            speed:500,            auto:3000,            callback: function{                var lis = $(this.element).next("ol").children;                lis.removeClass("on").eq(this.index).addClass("on");            }        });    });</script>  

在上述代码中,将ID为banner_box的元素所包含的图片作为滑动对象,并且定义滑动速度为500ms,滑动间隔时间为3000ms,即每3s换一张图片,每次换图时间为0.5s,这样就相当于一个幻灯的效果了。

横幅中的图片滑动效果如图24-24所示,其中右图是第一张滑动切换到第二张时的效果。

图24-24 图片滑动效果