原创

layui 手机端轮播图实现触屏滑动轮播

最近接了个外包,是移动端的,轮播图需要实现触屏滑动轮播,但是找layui的文档,发现并没有api来实现触屏滑动轮播,没办法只能操手自己写一个了。
找了很多文档,借助lquery的触屏滑动事件,最终实现代码如下:
html:

<div class="layui-carousel" id="test1" style="height: 100%!important;">
                    <div carousel-item>
                        <div class="layui-row" style="text-align: center">
                            <img onclick="jumpToCaroucel1()"src="image/lunbo5.png" style="padding: 10px;" width="100%" height="100%">
                        </div>
                        <div class="layui-row"style="text-align: center">
                            <img onclick="jumpToCaroucel()" src="image/lunbo1.png" style="padding: 10px;" width="100%" height="100%">  
                        </div>

                        <div class="layui-row" style="text-align: center">
                            <img onclick="jumpToCaroucel()"src="image/lunbo2.png" style="padding: 10px;" width="100%" height="100%">
                        </div>


                        <div class="layui-row" style="text-align: center">
                            <img onclick="jumpToCaroucel()"src="image/lunbo3.png" style="padding: 10px;" width="100%" height="100%">
                        </div>

                    </div>
                </div>

js:

var ins;
layui.use(['carousel','element','layer'], function(){
        var carousel = layui.carousel;
        layer = layui.layer;
        var element = layui.element; //导航的hover效果、二级菜单等功能,需要依赖element模块
        //建造实例
        ins=carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'none' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });

    });


$("#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');
        });
    })

这样就实现了手机端触屏滑动轮播了,希望可以帮助到大家。

正文到此结束
本文目录