橘子味的心
layui 手机端轮播图实现触屏滑动轮播
layui 手机端轮播图实现触屏滑动轮播
发布于:

html代码:

<div class="layui-carousel" id="test1">
    <div carousel-item>
        <div class="layui-row">
            <img src="image/lunbo5.png">
        </div>
        <div class="layui-row">
            <img src="image/lunbo1.png">  
        </div>
    </div>
</div>

js代码:因需要,只需要左右滑动,上下释放给浏览器默认操作。

layui.use(['carousel','element','layer','jquery'], function(){
    var carousel = layui.carousel,
	    $ = layui.jquery,
	    layer = layui.layer,
    	element = layui.element; //导航的hover效果、二级菜单等功能,需要依赖element模块
    //渲染轮播图及处理轮播图高度
        var W = $('#test1').width();//获取容器的宽度
        var screenImage = $('#test1 img');//获取轮播图DOM
        var theImage = new Image(); theImage.src = screenImage.attr("src");
        var b = theImage.width/theImage.height;//获取轮播图的原始宽高比例
        var ins = carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,height: parseFloat((W/b).toString())+60+"px"
            ,arrow: is_Pc() ? 'hover':'none' //箭头
            ,anim: 'fade' //切换动画方式
            ,indicator:'none'
        });
        //移动端手指滑动轮播图
        $("#test1").on("touchstart", function (e) {
            var startX = e.originalEvent.targetTouches[0].pageX;//开始坐标X
            var startY = e.originalEvent.targetTouches[0].pageY;//结束坐标Y
            $(this).on('touchmove', function (e) {
                var silde = doSlide(startX,startY,e);
                silde == 'left' || silde == 'right' ?     arguments[0].preventDefault() : '';
            });
            $(this).on('touchend', function (e) {
                var silde = doSlide(startX,startY,e);
                if(silde == 'left'){
                    ins.slide("add");
                $(this).off('touchmove touchend');
                }else if(silde == 'right'){
                    ins.slide("sub");
                    $(this).off('touchmove touchend');
                }
            });
        })
        //判断滑动的方向
        function doSlide(startX,startY,e){
            var endX = e.originalEvent.changedTouches[0].pageX;//结束坐标X
            var endY = e.originalEvent.changedTouches[0].pageY;//结束坐标X
            var X = endX - startX,Y = endY - startY;
            if( Math.abs(X) > Math.abs(Y) && X > 0 ){
            return 'right';
        }else if ( Math.abs(X) > Math.abs(Y) && X < 0 ){
            return 'left';
        }else if ( Math.abs(Y) > Math.abs(X) && Y > 0){
            return 'bottom';
        }else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ){
            return 'top';
        }else{
            return 'just';
        }
        }
});


阅读 0

分类

    热门排行