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

最新推荐文章于 2024-04-04 15:36:26 发布

名称正在更新……

最新推荐文章于 2024-04-04 15:36:26 发布

阅读量1.2k

点赞数 1

分类专栏： JQUERY

本文链接：https://blog.csdn.net/qq_39418742/article/details/99671441

版权

JQUERY 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!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>