jQuery -- touch事件之轮播图效果

废话不多说,下面放代码,注释很详细,不怕看不懂

效果图预览:

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .content{
                position: relative;
                width: 100%;
                overflow: hidden;
            }
            .net{
                -webkit-transition-timing-function: ease-out;
                -moz-transition-timing-function: ease-out;
                -ms-transition-timing-function: ease-out;
                -o-transition-timing-function: ease-out;
                transition-timing-function: ease-out;
                -webkit-transform: translate3d(0,0,0);
                -moz-transform: translate3d(0,0,0);
                -o-transform: translate(0,0);
                -ms-transform: translate3d(0,0,0);
                transform: translate3d(0,0,0);
                -webkit-transition-property: -webkit-transform;
                -moz-transition-property: -moz-transform;
                -o-transition-property: -o-transform;
                -ms-transition-property: -ms-transform;
                transition-property: transform;  
                transition: all .5s;
                -moz-transition: all .5s;   /* Firefox 4 */
                -webkit-transition: all .5s;    /* Safari 和 Chrome */
                -o-transition: all .5s; /* Opera */
                position: relative;
                right: 0;
                display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
                display: -moz-box; /* Firefox 17- */
                display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
                display: -moz-flex; /* Firefox 18+ */
                display: -ms-flexbox; /* IE 10 */
                display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */            
            }
            .net div{
                width: 100%;
                height: 11.76rem;
                -webkit-flex-shrink: 0;
                -ms-flex: 0 0 auto;
                flex-shrink: 0;
                text-align: center;
                line-height: 4.7rem;
                font-size: 0.94rem;  
                background-size: cover;
                background-position: 50% 50%;           
            }
            .net div:nth-child(1){
                background-image: url(img/follow-home-banner.jpg);
            }
            .net div:nth-child(2){
                background-image: url(img/index-banner.jpg);
            }
            .net div:nth-child(3){
                background-image: url(img/index-list-1.jpg);
            }
            .net div:nth-child(4){
                background-image: url(img/index-list-2.jpg);
            }
            .content .location{
                position: absolute;             
                bottom: 0.58rem;
                left: 50%;
                transform: translate(-50%, 30%);
                -ms-transform: translate(-50%, 30%);
                -o-transform: translate(-50%, 30%);
                -moz-transform: translate(-50%, 30%);
                -webkit-transform: translate(-50%, 30%);                
            }
            .content .location li{
                display: inline-block;
                height: 0.58rem;
                width: 0.58rem;
                margin: 0 3px;
                background-color: darkgrey;
                border-radius: 50%;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                -o-border-radius: 50%;
                -ms-border-radius: 50%;
            }
            .content .location li.on{
                background-color: orangered;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <!--轮播图-->
            <div class="net">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <!--焦点-->
            <ul class="location"></ul>
        </div>
        <script type="text/javascript">
            //获取相关数据
            var w = parseInt($('.net div').width());
            var w_length =  $('.net div').length;
            var c_w = parseInt(($('.net div').length*w)-w);
            var left = parseInt($('.net').position().left);
            var i = 0;
            var bannerTime = 3000;

            //根据轮播图数量动态添加焦点
            for (var j = 0; j < w_length; j++) {
                if (j < w_length) {
                    $('.location').append('<li></li>');
                    $('.location li').eq(0).addClass('on');
                }
            }

            function banner () {
                //如果播放到最后一张图则跳到第一张图,否则继续下一张
                if (left == c_w) {
                    left -= c_w;
                    $('.net').css('right', left + 'px');
                }else{
                    left += w;
                    $('.net').css('right', left + 'px');
                }               
                if (i > w_length -2) {
                    i -= w_length -1;
                    $('.location li').eq(i).addClass('on').siblings().removeClass('on');
                }else{
                    i++;
                    $('.location li').eq(i).addClass('on').siblings().removeClass('on');
                }
            }

            //每隔3秒换一次图
            var bannerData = setInterval(banner,bannerTime);

            //刷新页面更新数据
            function defult () {                
                history.go(0); 
            }

            //窗口大小发生变化刷新页面重新获取数据
            $(window).on('resize', function() {
                defult();       
            });

            $('.net').on('touchstart', function (e) {
                // 判断默认行为是否可以被禁用
                if (e.cancelable) {
                    // 判断默认行为是否已经被禁用
                    if (!e.defaultPrevented) {
                        e.preventDefault();
                    }
                }   
                //触摸开始时获取其X轴和Y轴的坐标
                startX = e.originalEvent.changedTouches[0].pageX,
                startY = e.originalEvent.changedTouches[0].pageY;
                clearInterval(bannerData);
            });

            $('.net').on('touchend', function (e) {            
                // 判断默认行为是否可以被禁用
                if (e.cancelable) {
                    // 判断默认行为是否已经被禁用
                    if (!e.defaultPrevented) {
                        e.preventDefault();
                    }
                }           
                //触摸结束获取其X轴和Y轴的坐标
                moveEndX = e.originalEvent.changedTouches[0].pageX,
                moveEndY = e.originalEvent.changedTouches[0].pageY,
                //利用触摸开始的坐标和触摸结束的坐标相减 得出的值判断其滑动方向
                X = moveEndX - startX,
                Y = moveEndY - startY;
                //左滑
                if ( X > 0 ) {
                    //若第一张往左滑 则回到最后一张
                    if (left == 0) {
                        left = c_w;
                        $('.net').css('right', left + 'px');
                    }else{
                        left -= w;
                        $('.net').css('right', left + 'px');   
                    }   

                    if (i < 0) {
                        i = w_length - 2;
                        $('.location li').eq(i).addClass('on').siblings().removeClass('on');
                    }else{
                        i--;
                        $('.location li').eq(i).addClass('on').siblings().removeClass('on');
                    }
                }
                //右滑
                else if ( X < 0 ) {
                    //若滑到最后一张图片 则回到第一张图片
                    if (left == c_w) {
                        left -= c_w;
                        $('.net').css('right', left + 'px');
                    }else{
                        left += w;
                        $('.net').css('right', left + 'px');
                    }

                    if (i > w_length -2) {
                        i -= w_length -1;
                        $('.location li').eq(i).addClass('on').siblings().removeClass('on');
                    }else{
                        i++;
                        $('.location li').eq(i).addClass('on').siblings().removeClass('on');
                    }                   
                }
                //下滑
                else if ( Y > 0) {
                    console.log('top 2 bottom');
                }
                //上滑
                else if ( Y < 0 ) {
                    console.log('bottom 2 top');
                }
                //单击
                else{
                    console.log('just touch');
                }           
                //触摸结束后图片继续播放
                bannerData = setInterval(banner,bannerTime);
            }); 
        </script>
    </body>
</html>

相关知识传送门:

touch事件基础: http://blog.csdn.net/sinat_19327991/article/details/73823874
`

©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值