17.js动画/轮播图 - 《JavaScript 基础 & jQuery 使用》

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-动画原理</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-top: 200px;
        }
        span {
            display: block;
            position: absolute;
            left: 0;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
        .red {
            background-color: red;
        }
    </style>
</head>
<body>
    <button class="btn500">点击开始夏雨荷到500</button>
    <button class="btn800">点击开始夏雨荷到800</button>
    <div></div>
    <span>夏雨荷</span>
    <script>
        // 简单动画函数封装  obj目标对象 target 目标位置
        function animate(obj, target, callback) {
            //给不同的元素添加 不同的定时器
            //当我们不断的点击按钮  这个元素的速度会越来越快，因为开启了太多定时器
            //解决方案，让元素 只有一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(() => {
                // 步长值
                // 把步长值 改为整数 不要出现小数值的情况
                // var step = Math.ceil((target - obj.offsetLeft) / 10); //不兼容负值情况
                // 这样写 兼容正负值情况 因为如果不兼容正值或者负值，等到step==0的时候，obj.offsetLeft == target情况永远不会出现，
                // 那么循环定时器就会一直存在，并且一直执行else里面的代码
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                //到点停止动画
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer);
                    if (callback) {
                        //调用回调函数
                        callback();
                    }
                } else {
                    //让盒子的位置移动
                    // 把每次加1 这个步长值 改为一个慢慢变小的值 步长公式：（目标值-现在的位置）/ 10
                    obj.style.left = obj.offsetLeft + step + 'px';
                }
            }, 15);
        }
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn500 = document.querySelector('.btn500');
        var btn800 = document.querySelector('.btn800');
        //调用函数
        // animate(div, 300);
        btn500.addEventListener('click', function () {
            animate(span, 500);
        })
        btn800.addEventListener('click', function () {
            animate(span, 800, function () {
                span.className = 'red';
            });
        })
        //匀速动画 就是盒子当前的位置+固定值的 10
        //缓动动画就是 盒子当前的位置+变化的值（目标值-现在的位置）/ 10）
    </script>
</body>
</html>

轮播图html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页轮播图</title>
    <!-- 引入facicon.ico网页图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 引入css 初始化的css 文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共样式的css 文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入 首页的css文件 -->
    <link rel="stylesheet" href="css/circlePic.css">
    <!-- 添加js文件 -->
    <script src="./js/animate.js"></script>
    <script src="./js/circle.js"></script>
</head>
<body>
    <div class="focus fl">
        <!-- 左侧按钮 -->
        <a href="javascript:;" class="arrow-l">
            &lt;
        </a>
        <!-- 右侧按钮 -->
        <a href="javascript:;" class="arrow-r">  </a>
        <!-- 核心的滚动区域 -->
        <ul>
            <li>
                <a href="#"><img src="upload/focus.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="upload/focus1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="upload/focus2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="upload/focus3.jpg" alt=""></a>
            </li>
        </ul>
        <!-- 小圆圈 -->
        <ol class="circle">
        </ol>
    </div>
</body>
</html>

轮播图css文件：

.focus {
    position: relative;
    width: 721px;
    height: 455px;
    background-color: purple;
    margin: 10px;
    overflow: hidden;
}
.focus ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 600%;
}
.focus ul li {
    float: left;
}
.arrow-l,
.arrow-r {
    display: none;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 24px;
    height: 40px;
    background: rgba(0, 0, 0, .3);
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-family: 'icomoon';
    font-size: 18px;
    z-index: 2;
}
.arrow-r {
    right: 0;
}
.circle {
    position: absolute;
    bottom: 10px;
    left: 50px;
}
.circle li {
    float: left;
    width: 8px;
    height: 8px;
    /*background-color: #fff;*/
    border: 2px solid rgba(32, 155, 97, 0.5);
    margin: 0 5px;
    border-radius: 50%;
    /*鼠标经过显示小手*/
    cursor: pointer;
}
.current {
    background-color: red;
}

轮播图js文件：

window.addEventListener('load', function () {
    // 1. 获取元素
    var arrow_l = document.querySelector('.arrow-l'); //左右按钮
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus'); //整个大框
    // 返回大盒子的宽度  大盒子的宽度和图片的宽度一致
    var focusWidth = focus.offsetWidth;
    // 2. 鼠标经过显示 隐藏按钮
    focus.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
        timer = null;
    })
    focus.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(function () {
            //手动调用点击事件
            arrow_r.click();
        }, 2000);
    })
    // 3. 动态生成小圆圈 有几张图片 我就生成几个小圆圈
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    // console.log(ul.children.length);
    for (let i = 0; i < ul.children.length; i++) {
        // 创建一个小li
        var li = document.createElement('li');
        // 把小li 插入到ol里面
        ol.appendChild(li);
        // 记录当前小圆圈的索引号 通过自定义属性来做
        li.setAttribute('data-index', i);
        // 生成小圆圈的时候 就绑定点击事件
        li.addEventListener('click', function () {
            // 排他思想
            for (let i = 0; i < ol.children.length; ++i) {
                ol.children[i].className = '';
            }
            this.className = 'current';
            // 5. 点击小圆圈，移动图片，当然移动的是ul
            // ul 的移动距离  小圆圈的索引号 乘以图片的宽度 注意是负值
            // 点击了某个xiaoli 就拿到当前小li的属性
            // var index = this.dataset.index;
            var index = this.getAttribute('data-index');
            //当我们点击了某个小li  就要把这个小li的索引号给num
            num = index;
            //当我们点击了某个小li  就要把这个小li的索引号给circle
            circle = index;
            // console.log(index);
            // console.log(focusWidth);
            animate(ul, -index * focusWidth);
        })
    }
    // 把ol里面的第一个小li 设置类名 current
    ol.children[0].className = 'current';
    // 6. 克隆第一张图片 li 放到ul的最后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 7. 点击右侧按钮，图片滚动一张
    var num = 0;
    // circle 控制小圆圈的播放
    var circle = 0;
    // 节流阀
    var flag = true;
    arrow_r.addEventListener('click', function () {
        if (flag) {
            flag = false; //关闭节流阀
            //如果走到了最后的一张图片  此时ul需要快速复原 num设置为0
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * focusWidth, function () {
                flag = true; //打开节流阀
            });
            // 8.点击右侧按钮，就让小圆圈跟随一起变化，再生棉一个变量控制小圆圈的播放
            circle++;
            //如果circle==4 表示走到了最后克隆这张图片 需要让circle=0
            if (circle == ol.children.length) {
                circle = 0;
            }
            circleChange();
        }
    })
    // 9. 左侧按钮
    arrow_l.addEventListener('click', function () {
        if (flag) {
            flag = false; //关闭节流阀
            //如果走到了第一张图片  此时ul需要快速复原 num设置为0
            if (num == 0) {
                num = ul.children.length - 1
                ul.style.left = -num * focusWidth + 'px';
            }
            num--;
            animate(ul, -num * focusWidth, function () {
                flag = true; //打开节流阀
            });
            // 8.点击右侧按钮，就让小圆圈跟随一起变化，再生棉一个变量控制小圆圈的播放
            circle--;
            //如果circle<0 表示走到了第一张 需要让circle=最后一个下标
            // if (circle < 0) {
            //     circle = ol.children.length - 1;
            // }
            circle = circle < 0 ? ol.children.length - 1 : circle;
            circleChange();
        }
    })
    function circleChange() {
        //排他思想
        for (let i = 0; i < ol.children.length; ++i) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    }
    // 10.自动播放轮播图
    var timer = setInterval(function () {
        //手动调用点击事件
        arrow_r.click();
    }, 2000);
})