请使用firefox,chrome等最新浏览器浏览本站。

移动端自适应横屏滚动插件——resizeSwiper

html5 阿豹 371次浏览 0个评论 扫描二维码

查看demo
下载resizeSwiper.js

resizeSwiper使用css3 transform控制滑动,使用transition控制滑动时间,通过transitionend事件监听transform结束的事件。
初版的resizeSwiper功能比较简单,仅支持横向滚动,转屏时会自动刷新容器节点尺寸。
浏览器支持:IE9+, firefox, opera, chrome, android brower, ios brower
效果在移动浏览器最佳。

参数说明:
 *   @param mainObj: js object,//主元素(需要滚动的元素)
 *   @param leftObj: js object,//点击后向左滚动的元素
 *   @param rightObj: js object,//点击后向左滚动的元素
 *   @param width: number|| "auto",//父元素宽度,可以填auto,或具体的数值,默认auto。auto表示宽度100%.
 *   @param height: number|| "auto",//元素高度,可以填auto,或具体的数值,默认auto
 *   @param controller: true || false,//是否开启锚点
 *   @param controllerObj: js object,//锚点容器

调用:

 
       <div id="swiperContainer">
            <!--<i id="swiperLeft">←</i><i id="swiperRight">→</i>-->
            <ul id="swiperUl">
                <li>
                    <img src="images/1.jpg" />
                </li>
                <li>
                    <img src="images/2.jpg" />
                </li>
                <li>
                    <img src="images/3.jpg" />
                </li>
                <li>
                    <img src="images/4.jpg" />
                </li>
            </ul>
            <div id="m-swipercontrol"></div>
        </div>
        <script type="text/javascript">
            var mySwiper = new SwiperModule({
                mainObj: document.getElementById("swiperUl"),
                leftObj: document.getElementById("swiperLeft"),
                rightObj: document.getElementById("swiperRight"),
                width: "auto",
                height: "auto",
                controller: true,
                controllerObj: document.getElementById("m-swipercontrol")
            });
        </script>

喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到