为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 webapi_3 今天真真真全是大经典案例

webapi_3 今天真真真全是大经典案例

标签：
Html5 JavaScript

这个项目一多起来了，还是分个序号比价好一点，你好我好大家好，然后关于这个标点符号的问题，我打字真的很不喜欢打标点符号，不是不好按，按个逗号其实也是顺便的事情，可能就是养成习惯了，就喜欢按个空格来分开，也不晓得你们看有标点和没得标点看起来有区别没得，如果有区别的话我就慢慢养成习惯打上标点吧！！！欧尔整点感叹号这些还是可以，我们今天书接上回由于是大项目所以用了另一种呈现的方法。

我们后这个章节后面的内容的项目基本都要以一个自己编写的缓冲动画的函数为基础，所以我先把这个函数贴上来

缓冲动画函数终极版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: absolute;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button>500</button>
    <button>800</button>
    <script>
        var box = document.querySelector('div')
        var btns = document.querySelectorAll('button')
        function animate(obj, target, callback) {
            clearInterval(obj.timer)
            obj.timer = setInterval(function() {
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer)
                    // callback必须写到结束定时器这里
                    if (callback) {
                        callback()
                    }
                }
                var step = (target - obj.offsetLeft) / 10
                step = step < 0 ? Math.floor(step) : Math.ceil(step)
                obj.style.left = obj.offsetLeft + step + 'px'
            }, 15)
        }
        btns[0].onclick = function() {
            animate(box, 500)
        }
        btns[1].onclick = function() {
            animate(box, 800, function() {
                box.style.backgroundColor = 'red'
            })
        }
    </script>
</body>
</html>

来了 一个十分十分经典的案例，轮播图，纯手打还是要点逻辑的

我后面给她直接单领出来单独放在了一个html里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ol,
        ul {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .banner {
            position: relative;
            width: 721px;
            height: 455px;
            margin: 100px auto;
            overflow: hidden;
        }
        .banner >a {
            display: none;
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: rgba(0, 25, 0, .5);
            font-size: 20px;
            color: white;
            text-align: center;
            line-height: 40px;
            z-index: 1;
            cursor: pointer;
        }
        .banner a:nth-child(2) {
            top: 50%;
            right: 0;
            transform: translateY(-50%);
        }
        .banner a:nth-child(1) {
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
        .banner ol {
            position: absolute;
            bottom: 30px;
            left: 40px;
            color: white;
        }
        ol li {
            float: left;
            width: 8px;
            height: 8px;
            margin-left: 5px;
            border: 2px solid white;
            border-radius: 50%;
            cursor: pointer;
        }
        .current {
            background-color: #fff;
        }
        ul {
            position: absolute;
            left: 0;
            top: 0;
            width: 500%;
        }
        ul li {
            float: left;
        }
    </style>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./js/animate.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./js/test.js"></script>
</head>
<body>
    <div class="banner">
        <a href="javascript:;" class="arrow_r">&lt;</a>
        <a href="javascript:;" class="arrow_l">&gt;</a>
        <ul>
            <li><a href="javascript:;"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./upload/focus.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./upload/focus1.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./upload/focus2.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./upload/focus3.jpg" alt=""></a></li>
        </ul>
        <ol>
            
        </ol>
    </div>
</body>
</html>
然后最最重要的是他的js部分，非常值得回味，每一步我都写出了我的想法以及逻辑

window.addEventListener('load', function() {
    // 1.先完成移入轮播图显示隐藏点击按钮
    var banner = document.querySelector('.banner');
    var arrR = banner.querySelector('.arrow_l');
    var arrL = banner.querySelector('.arrow_r');

    banner.addEventListener('mouseenter', function() {
        arrL.style.display = 'block';
        arrR.style.display = 'block';
        // 7.1鼠标移入应该暂停轮播图 即停止定时器
        clearInterval(timer);
    });
    banner.addEventListener('mouseleave', function() {
        arrL.style.display = 'none';
        arrR.style.display = 'none';
        // 7.2移出继续计时器
        timer = setInterval(function() {
            arrR.click();
        },2000)
    });
    // 2.动态生成小圆圈 利用ul里面li的个数
    var ul = banner.querySelector('ul');
    var ol = banner.querySelector('ol');
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('data-index', i);
        // 2.2小圆排他思想 点击一个 其他为cuuret类 其他清空
        // 2.3点击小圆滚动图片需要自定义data-index left值为date-index * width
        li.addEventListener('click', function() {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';
            var index = this.getAttribute('data-index');
            // 5.一个bug 点击右键或者点击小圆后 再点击小圆或者右键 会乱跳 是因为此时 num与circle没有任何关联 点击一个后 再点击另一个事件 就会按他的num或者circle走
            // 此时需要将两个值都给到index给她赋值 就会有关联了
            num = index;
            circle = index;
            animate(ul, -index * banner.offsetWidth);
        })
        ol.appendChild(li);

    }
    // 2.1创建好后给第一个小圆添加默认current类
    ol.firstElementChild.className = 'current';
    // 3.2因为我们直接动html代码 会导致小原点也增加一个 所以要在小圆点获取ul li个数后面 动态克隆一个到ul最后面
    ul.appendChild(ul.firstElementChild.cloneNode(true));
    // 3.点击右边按钮一次就滚动一次 开始点击按钮事件
    // 首先要明确ul的移动距离等于 当前点击的第几次 * width
    var num = 0; 
    var circle = 0;
    // 8.点击时还是有bug 点击过快会切换的很快 通过节流阀来完成一个函数再来回调解决
    var flag = true;
    arrR.addEventListener('click', function() {
        // 8.1如果flag为true才执行 一进去先给flag为false 如果没完成这个函数永远是flase 用户点击就没的作用
        if (flag) { 
            flag = false;
            // 3.1当走到最后一张时当前 ul显示几个li就复制几个li到最后面（html代码）然后判断num是否等于4 如果是将num赋值为0 同时迅速将ul left为0
        if (num == ul.children.length - 1) {
            num = 0;
            ul.style.left = 0;
        };
        // 点一次就要加一次
        num++;
        // 8.2通过回调函数 完成了这个切换才能为true
        animate(ul, -num * banner.offsetWidth,function() {
            flag = true;
        });
        // 4.点击右侧按钮小圆跟着动 需要一个变量circle 点一次增加一次 获取ol li 下标就为circle
        circle++;
        // 4.1判断circle是否为最后一张 第四张 如果是就赋值为0、
        if (circle == ol.children.length) {
            circle = 0;
        }
        for (var i = 0; i < ol.children.length;i++) {
            ol.children[i].className = '';
        };
        ol.children[circle].className = 'current';
        }
    });
    // 6.左侧按钮点击
    arrL.addEventListener('click', function() {
        if (flag) {
            flag = false;
            // 6.2此时应该判断num是否为第一张也就是0 如果是num就为最后一张4 且left为4*width
        if (num == 0) {
            num = ul.children.length -1;
            ul.style.left = num * banner.offsetWidth;
        };
        // 6.1先修改为--
        num--;
        animate(ul, -num * banner.offsetWidth, function() {
            flag = true;
        });
        // 6.3circle也要为--
        circle--;
        // 6.4此时应该判断circle是否小于0 如果是就重新赋值为3
        if (circle < 0) {
            circle = ol.children.length - 1;
        }
        for (var i = 0; i < ol.children.length;i++) {
            ol.children[i].className = '';
        };
        ol.children[circle].className = 'current';
        }
    });
    // 7.自动播放功能利用定时器 还有手动调用事件
    var timer = setInterval(function() {
        arrR.click();
    },2000)
})

趁热打铁，我们马上再来一个移动端的轮播图，跟pc端还是有点差距的，它是通过transform来实现的

html部分很简单

<div class="focus">
        <ul>
            <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="upload/focus3.jpg" alt=""></li>
            <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="upload/focus1.jpg" alt=""></li>
            <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="upload/focus2.jpg" alt=""></li>
            <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="upload/focus3.jpg" alt=""></li>
            <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="upload/focus1.jpg" alt=""></li>
        </ul>
        <!-- 小圆点 -->
        <ol>
            <li class="current"></li>
            <li></li>
            <li></li>
        </ol>
    </div>
js部分逻辑性我觉得没做熟练之前是比pc难的，做熟练过后其实还是可以的，三下五除二就搞完了

window.addEventListener('load', function() {
    // 1.自动轮播功能
    // 定义一个变量num 第一张为0 移动端的切换由translate实现
    var focus = document.querySelector('.focus');
    var ul = focus.querySelector('ul');
    var num = 0;
    var imgWidth = focus.offsetWidth;
    var timer =  setInterval(function() {
        num++;
        var translateX = -num * imgWidth;
        ul.style.transition = 'transform .3s';
        ul.style.transform = 'translateX('+translateX+'px)';
    }, 2000)
    // 2.无缝切换 移动端无缝切换 有一个新的事件 transitionend 通过这个事件判断num 来做到无缝切换
    ul.addEventListener('transitionend',function() {
        if (num >= 3) {
            num = 0;
            var translateX = -num * imgWidth;
            ul.style.transition = 'none';
            ul.style.transform = 'translateX('+translateX+'px)';
            // 5.2往右边滑num--小于0了 要起到无缝切换效果还要在此进行一个判断
        } else if (num < 0 ) { 
            num = 2;
            var translateX = -num * imgWidth;
            ul.style.transition = 'none';
            ul.style.transform = 'translateX('+translateX+'px)';
        }
        // 3.小圆点跟着图走 用到新属性 classlist 可以添加类名删除类名 
        // 配合queryselector使用 可以快速把当前带有该class名的去除
        focus.lastElementChild.querySelector('.current').classList.remove('current');
        focus.lastElementChild.children[num].classList.add('current');
    });
    // 4.手指拖动轮播图 手指按下的时候获得按下的坐标值 移动的时候不断地用移动的坐标值减去按下的坐标值 盒子的位置 = 盒子的原始位置+移动的位置
    var x = 0;
    focus.addEventListener('touchstart', function(e) {
        x = e.targetTouches[0].pageX;
        clearInterval(timer);
    });
    var moveX = 0;
    // 8.如果只是手指触摸没有移动 就不用进行touchend的判断
    var flag = false;
    focus.addEventListener('touchmove', function(e) {
        moveX = e.targetTouches[0].pageX - x;
        var box = -num * imgWidth + moveX;
        ul.style.transition  = 'none';
        ul.style.transform = 'translateX('+box+'px)';
        flag = true;
        // 7.清楚滑动的默认行为 
        e.preventDefault();
    });
    
    // 5.要完成图片切换上下一张的效果 需要在事件手指离开屏幕中进行 判断移动距离的绝对值是否大于五十 如果是 就说明是要进行切换 并在里面再次判断真正移动距离是否为正数
    // 为正数就切换到上一张 为负数就切换到下一章
    focus.addEventListener('touchend', function(e) {
        if (flag) {
            if (Math.abs(moveX) > 50) {
                if (moveX > 0 ) {
                    num--;
                } else {
                    num++;
                }
            }
            var translateX = -num * imgWidth;
            // 5.1注意此处的transition 必须要有效果 不然不进入transitionend进行判断 导致没有无缝切换效果以及小圆点跟着走的效果
            ul.style.transition = 'transform .3s';
            ul.style.transform = 'translateX('+translateX+'px)';
            flag = false;
        }
        // 6.点击过后继续不再点击继续开启定时器轮播 要先清空一下 使得只有一个定时器在运行
        clearInterval(timer);
        timer =  setInterval(function() {
        num++;
        var translateX = -num * imgWidth;
        ul.style.transition = 'transform .3s';
        ul.style.transform = 'translateX('+translateX+'px)';
    }, 2000);
    });
    
})

然后剩下的，就是一些插件使用了，这里插件不做太详细的说明因为明天开始进入jq的复习，有的是插件让你用，然后还有一个本地存储的案例虽然不难，但后面应用应该很广泛，sessionStorage生命周期在浏览器关闭之前，只能在本页面数据共享，localStorage生命周期永久存在，可多个页面数据共享，这是一个记住用户名的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 如果勾选记住用户名， 下次用户打开浏览器，就在文本框里面自动显示上次登录的用户名 -->
    <input type="text" name="" id="">
    <input type="checkbox">记住用户名
    <script>
        var ipts = document.querySelectorAll('input')
        ipts[1].onclick = function() {
            if (this.checked) {
                localStorage.setItem('uname', ipts[0].value)
            } else {
                localStorage.removeItem('uname')
            }
        }
        if(localStorage.getItem('uname')) {
            ipts[0].value = localStorage.getItem('uname')
            ipts[1].checked = true
        }
    </script>
</body>
</html>

前端爱好者，望大佬给个内推机会！！！

点击查看更多内容
发表于 2022.09.27 09:45， 共 672 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

heymar

Web前端工程师
手记
篇
粉丝
0
获赞与收藏
1

关注作者，订阅最新文章

相关文章推荐

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消