TouchSliderBox 1.0 –容器宽度可变的幻灯

之前写过一个《TouchSlider 1.0 – 兼容触摸屏手机与PC的幻灯片》，那么这个TouchSliderBox和之前的TouchSlider有什么区别呢？

TouchSlider是支持幻灯宽度自适应的，也就是支持Responsive Layout（响应式布局）设计的页面上的slider。而TouchSliderBox其实也是支持响应式布局页面的，只不过每个幻灯的宽度是固定的，变化的是包围幻灯片的容器的宽度。其实差别就是TouchSlider你只能一次看到一张幻灯，而TouchSliderBox则随着幻灯容器宽度的不同，你可能同时可以看到多个幻灯片。

用一副图片来解释：

如上图，黄色线框即为幻灯容器。

为什么开发这个

这个主要是用来展示图片的，虽然TouchSlider也可以用来展示图片，但是由于每次只能显示一张图片，浪费了页面空间（在响应式布局中，从320到1920宽度都支持的话）。

还有一个原因就是模仿苹果的AppStore的页面下部的应用截图：

使用TouchSliderBox可以做到所有浏览器上保持样式统一，并且支持前后切换、鼠标滚动切换以及自适应页面宽度。

如何使用

使用方法，先载入前一篇文章中提到的那个TouchScroll脚本，然后再载入TouchSliderBox的脚本文件，然后可以通过调用TouchSliderBox这个函数来使用：

   1: <script type="text/javascript" src="http://qiqiboy.sinaapp.com/touchscroll/touchScroll.js"></script>

   2: <script type="text/javascript" src="http://qiqiboy.sinaapp.com/sliderbox/touchSliderBox.dev.js"></script>

   3:  

   4: <script type="text/javascript">

   5: //第一个参数是幻灯所在容器的id，第二个参数为返回的幻灯实例的所附加的全局变量，可省略

   6: TouchSliderBox('imgbox','t1');

   7: </script>

为什么要载入TouchScroll呢？因为TouchSliderBox是基于TouchScroll开发的，也可以说是扩展了TouchScroll的一个插件，所以你需要预先载入TouchScroll。当然，你也可以只载入TouchSliderBox，然后会自动在页面中引入TouchScroll：

   1: <script type="text/javascript" src="http://qiqiboy.sinaapp.com/sliderbox/touchSliderBox.dev.js"></script>

   2:  

   3: <script type="text/javascript">

   4: //第一个参数是幻灯所在容器的id，第二个参数为返回的幻灯实例的所附加的全局变量，可省略

   5: TouchSliderBox('imgbox','t1');

   6: /*不引入TouchScroll，这样子也是可以工作的*/

   7: </script>

   8:  

具体的效果以及使用可以参见我提供的 DEMO （可以用你的安卓或者苹果手机访问http://u.boy.im/sliderbox/ 体验。PC用户可以使用鼠标拖拽模拟触摸操作）。可以通过改变浏览器宽度或者横竖屏切换来查看幻灯的自适应效果。

JS的源码可以点此查看。