为了让横幅中的图片以滑动的形式展示出来，需要用到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 图片滑动效果