js 移动端轮播图效果(优化后)

最新推荐文章于 2023-04-19 19:06:21 发布

黄大仙No.1

最新推荐文章于 2023-04-19 19:06:21 发布

阅读量273

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_44378358/article/details/107956937

版权

javascript 专栏收录该内容

104 篇文章 9 订阅

订阅专栏

一、取消点击事件300ms延迟

通过fastclick插件取消
取消延迟办法详解

二、增加返回顶部按钮，在屏幕移动到一定程度时才会显示

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    禁止用户缩放屏幕,可以取消点击延迟
    <meta name="viewport" content="user-scalable=no">-->
    <link rel="stylesheet" href="../base.css">
    <link rel="stylesheet" href="移动端轮播图.css">
    <script src="js/index.js"></script>
<!--    引入fastclick插件,取消300ms延迟-->
    <script src="js/fastclick.js"></script>
</head>
<body>
<!--顶部搜索模块-->
<div class="search-index">
    <div class="search">搜索:目的地/九段/经典/航班号</div>
    <a href="" class="user">我 的</a>
</div>
<!--焦点图模块-->
<div class="focus">
    <ul>
<!--        //最后一张副本-->
        <li><img src="../屏幕截图(99).png"></li>
<!--        //第一张-->
        <li><img src="../屏幕截图(97).png"></li>
        <li><img src="../屏幕截图(98).png"></li>
        <li><img src="../屏幕截图(99).png"></li>
<!--        //第一张副本-->
        <li><img src="../屏幕截图(97).png"></li>
    </ul>
    <ol>
        <li class="current"></li>
        <li></li>
        <li></li>
    </ol>
</div>
<!--主要内容模块-->
<nav class="main">
</nav>
<!--返回顶部模块-->
<div class="goBack"></div>
</body>
</html>

index.js

window.addEventListener('load', function () {
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];
    var ol = focus.children[1];
    var w = focus.offsetWidth;
    //利用定时器自动轮播图片
    var index = 0;
    var timer = setInterval(function () {
        index++;
        var translatex = -index * w;
        //为ul添加过度效果
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translatex + 'px)';
    }, 2000)
    //等待过度完成再去判断,监听过度完成的事件 transitionend
    ul.addEventListener('transitionend', function () {
        //无缝滚动
        if (index >= 3 || index <= -1) {
            index = index == 3 ? 0 : 2;
            //去掉过度效果 让ul快速跳到目标位置
            ul.style.transition = 'none';
            // 利用最新的索引号乘以宽度
            translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }
        // 小圆圈跟随变化效果
        // 把ol里面带有current类名的选出来去掉类名 remove
        // 让当前索引号的小li加上current add
        // 等过度结束之后变化,所以这个写到transitionend事件里面
        ol.querySelector('li.current').classList.remove('current');
        ol.children[index].classList.add('current');
    })
    //手指滑动轮播图
    var flag = false; //手指移动了再去判断
    //触摸获取初始坐标
    var startX = 0;
    var moveX = 0;  //移动距离
    ul.addEventListener('touchstart', function (e) {
        startX = e.targetTouches[0].pageX;
        // 手指触摸的时候就停止定时器
        clearInterval(timer);
    })
    //移动手指,计算滑动距离,并移动盒子
    ul.addEventListener('touchmove', function (e) {
        flag = true;
        e.preventDefault(); //阻止滚动屏幕的默认行为
        //计算移动距离
        moveX = e.targetTouches[0].pageX - startX;
        //移动盒子:盒子原来的位置+手指移动的距离
        var translatex = -index * w + moveX;
        // 手指拖动时不需要动画效果,所以要取消过渡效果
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translatex + 'px)';
    })
    // 根据松开时滑动距离判定是否划到其他图片
    ul.addEventListener('touchend', function (e) {
        // 如果移动距离大于100像素,就播放上一张或下一张
        if (flag && Math.abs(moveX) > 100) {
            // 右滑 moveX>0 播放上一张
            // 左滑 moveX<0 播放下一张
            if (moveX > 0) {
                index--;
            } else {
                index++;
            }
            var translatex = -index * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        } else {
            //如果小于100像素,会谈
            var translatex = -index * w;
            ul.style.transition = 'all 0.1s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }
        // 手指离开,重新开启计时器
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            var translatex = -index * w;
            //为ul添加过度效果
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }, 2000);
    })
    //返回顶部模块制作
    var goBack = document.querySelector('.goBack');
    var nav = document.querySelector('nav');
    window.addEventListener('scroll', function () {
        if (window.pageYOffset >= nav.offsetTop) {
            goBack.style.display = 'block';
        } else {
            goBack.style.display = 'none';
        }
    })


    // 引入插件取消300ms延迟的方法
    if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function() {
            FastClick.attach(document.body);
        }, false);
    }
    goBack.addEventListener('click',function () {
        window.scroll(0, 0);
    })

    /*// 借助函数取消300ms延迟的方法
    //封装函数,处理延迟300ms问题
    function tap(obj, callback) {
        var isMove = false;
        var startTime = 0;
        obj.addEventListener('touchstart', function () {
            startTime += Date.now();
        })
        obj.addEventListener('touchmove', function () {
            isMove = true;
        })
        obj.addEventListener('touchend', function () {
            if (!isMove && (Date.now() - startTime) < 150) {
                callback && callback();
            }
            isMove = false;
            startTime = 0;
        })
    }
    tap(goBack, function () {
        window.scroll(0, 0);
    })*/
})

index.css

.goBack {
    display: none;
    position: fixed;
    top: 80%;
    height: 100px;
    width: 100px;
    right: 5%;
    border-radius: 50%;
    z-index: 9999;
    background-color: #c81623;
}

.search-index {
    height: 100px;
    padding: 5px 5px;
    position: relative;
    line-height: 100px;
    background-color: #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
}

.search {
    position: absolute;
    top: 30%;
    height: 50%;
    width: 50%;
    left: 15%;
    line-height: 150%;
    font-size: 30px;
    text-align: center;
    border-radius: 5px;
    background-color: #ffffff;
}

.search-index .user {
    position: absolute;
    font-size: 30px;
    right: 5%;
}

.focus {
    position: relative;
    overflow: hidden;
    float: left;
    /*//不写宽度默认与屏幕一样宽*/
}

.focus ul {
    /*padding-top: 5px;*/
    list-style: none;
    width: 500%;
    margin-left: -100%;
}

.focus ul li {
    list-style: none;
    float: left;
    width: 20%;
}

.focus ul li img {
    width: 100%;
}

.focus ol {
    position: absolute;
    top: 85%;
    bottom: 5px;
    left: 5%;
    padding: 0 50px;
    margin: 0;
}

.focus ol li {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: 0 10px;
    list-style: none;
    border-radius: 50%;
    transition: all .3s; /*// 过渡效果*/
    background-color: #666666;
}

.focus ol li .current {
    width: 15px;
}

.focus ol .current {
    width: 70px;
    border-radius: 25px 25px;
    background-color: #dddddd;
}

.main {
    top: 833px;
    position: absolute;
    width: 100%;
    height: 3000px;
    background-color: #666666;
}

黄大仙No.1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 移动端轮播图效果(优化后)

一、取消点击事件300ms延迟通过fastclick插件取消取消延迟办法详解二、增加返回顶部按钮，在屏幕移动到一定程度时才会显示index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><!-- 禁止用户缩放屏幕,可以取消点击延迟 <meta name="
复制链接

扫一扫

专栏目录