layui.carousel轮播组件实现移动端手势左右滑动效果

2019-02-26 01:51:51

标签： 转载 Layui carousel 轮播组件 手势

```html
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
</head>
<body>
    <div id="test1" class="layui-carousel">
        <div carousel-item>
            <img src="./psb.jpg">
            <img src="./psb.jpg">
        </div>
    </div>
</body>
<script type="text/javascript" src="./layui/layui.js"></script>
<style type="text/css">
    #test1 img{
        width:100%;
        height:100%;
    }
</style>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
var ins;
layui.use(['carousel', 'form'], function () {
            var carousel = layui.carousel;
            ins = carousel.render({
                elem: '#test1'
                , width: '500px'
                , height: '200px'
                , interval: 4000
                // , arrow: 'none' //始终不显示箭头
            });
        });
$("#test1").on("touchstart", function (e) {
            var startX = e.originalEvent.targetTouches[0].pageX;//开始坐标X
            $(this).on('touchmove', function (e) {
                arguments[0].preventDefault();//阻止手机浏览器默认事件
            });
            $(this).on('touchend', function (e) {
                var endX = e.originalEvent.changedTouches[0].pageX;//结束坐标X
                e.stopPropagation();//停止DOM事件逐层往上传播
                if (endX - startX > 30) {
                    ins.slide("sub");
                }
                else if (startX - endX > 30) {
                    ins.slide("add");
                }
                $(this).off('touchmove touchend');
            });
        });
</script>
</html>
```

上一篇：SyntaxHighlighter的代码高亮插件参数设置详细解说下一篇：适配落地，让开发小哥哥看懂最重要

分享到：QQ空间新浪微博腾讯微博人人网微信

登录