image.png
    image.png
    image.png

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <title>02-动画原理</title>
    7. <style>
    8. div {
    9. position: absolute;
    10. left: 0;
    11. width: 100px;
    12. height: 100px;
    13. background-color: pink;
    14. margin-top: 200px;
    15. }
    16. span {
    17. display: block;
    18. position: absolute;
    19. left: 0;
    20. width: 150px;
    21. height: 150px;
    22. background-color: purple;
    23. }
    24. .red {
    25. background-color: red;
    26. }
    27. </style>
    28. </head>
    29. <body>
    30. <button class="btn500">点击开始夏雨荷到500</button>
    31. <button class="btn800">点击开始夏雨荷到800</button>
    32. <div></div>
    33. <span>夏雨荷</span>
    34. <script>
    35. // 简单动画函数封装 obj目标对象 target 目标位置
    36. function animate(obj, target, callback) {
    37. //给不同的元素添加 不同的定时器
    38. //当我们不断的点击按钮 这个元素的速度会越来越快,因为开启了太多定时器
    39. //解决方案,让元素 只有一个定时器执行
    40. clearInterval(obj.timer);
    41. obj.timer = setInterval(() => {
    42. // 步长值
    43. // 把步长值 改为整数 不要出现小数值的情况
    44. // var step = Math.ceil((target - obj.offsetLeft) / 10); //不兼容负值情况
    45. // 这样写 兼容正负值情况 因为如果不兼容正值或者负值,等到step==0的时候,obj.offsetLeft == target情况永远不会出现,
    46. // 那么循环定时器就会一直存在,并且一直执行else里面的代码
    47. var step = (target - obj.offsetLeft) / 10;
    48. step = step > 0 ? Math.ceil(step) : Math.floor(step);
    49. //到点停止动画
    50. if (obj.offsetLeft == target) {
    51. clearInterval(obj.timer);
    52. if (callback) {
    53. //调用回调函数
    54. callback();
    55. }
    56. } else {
    57. //让盒子的位置移动
    58. // 把每次加1 这个步长值 改为一个慢慢变小的值 步长公式:(目标值-现在的位置)/ 10
    59. obj.style.left = obj.offsetLeft + step + 'px';
    60. }
    61. }, 15);
    62. }
    63. var div = document.querySelector('div');
    64. var span = document.querySelector('span');
    65. var btn500 = document.querySelector('.btn500');
    66. var btn800 = document.querySelector('.btn800');
    67. //调用函数
    68. // animate(div, 300);
    69. btn500.addEventListener('click', function () {
    70. animate(span, 500);
    71. })
    72. btn800.addEventListener('click', function () {
    73. animate(span, 800, function () {
    74. span.className = 'red';
    75. });
    76. })
    77. //匀速动画 就是盒子当前的位置+固定值的 10
    78. //缓动动画就是 盒子当前的位置+变化的值(目标值-现在的位置)/ 10)
    79. </script>
    80. </body>
    81. </html>

    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png
    轮播图html文件:

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <title>网页轮播图</title>
    7. <!-- 引入facicon.ico网页图标 -->
    8. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    9. <!-- 引入css 初始化的css 文件 -->
    10. <link rel="stylesheet" href="css/base.css">
    11. <!-- 引入公共样式的css 文件 -->
    12. <link rel="stylesheet" href="css/common.css">
    13. <!-- 引入 首页的css文件 -->
    14. <link rel="stylesheet" href="css/circlePic.css">
    15. <!-- 添加js文件 -->
    16. <script src="./js/animate.js"></script>
    17. <script src="./js/circle.js"></script>
    18. </head>
    19. <body>
    20. <div class="focus fl">
    21. <!-- 左侧按钮 -->
    22. <a href="javascript:;" class="arrow-l">
    23. &lt;
    24. </a>
    25. <!-- 右侧按钮 -->
    26. <a href="javascript:;" class="arrow-r"></a>
    27. <!-- 核心的滚动区域 -->
    28. <ul>
    29. <li>
    30. <a href="#"><img src="upload/focus.jpg" alt=""></a>
    31. </li>
    32. <li>
    33. <a href="#"><img src="upload/focus1.jpg" alt=""></a>
    34. </li>
    35. <li>
    36. <a href="#"><img src="upload/focus2.jpg" alt=""></a>
    37. </li>
    38. <li>
    39. <a href="#"><img src="upload/focus3.jpg" alt=""></a>
    40. </li>
    41. </ul>
    42. <!-- 小圆圈 -->
    43. <ol class="circle">
    44. </ol>
    45. </div>
    46. </body>
    47. </html>

    轮播图css文件:

    1. .focus {
    2. position: relative;
    3. width: 721px;
    4. height: 455px;
    5. background-color: purple;
    6. margin: 10px;
    7. overflow: hidden;
    8. }
    9. .focus ul {
    10. position: absolute;
    11. top: 0;
    12. left: 0;
    13. width: 600%;
    14. }
    15. .focus ul li {
    16. float: left;
    17. }
    18. .arrow-l,
    19. .arrow-r {
    20. display: none;
    21. position: absolute;
    22. top: 50%;
    23. margin-top: -20px;
    24. width: 24px;
    25. height: 40px;
    26. background: rgba(0, 0, 0, .3);
    27. text-align: center;
    28. line-height: 40px;
    29. color: #fff;
    30. font-family: 'icomoon';
    31. font-size: 18px;
    32. z-index: 2;
    33. }
    34. .arrow-r {
    35. right: 0;
    36. }
    37. .circle {
    38. position: absolute;
    39. bottom: 10px;
    40. left: 50px;
    41. }
    42. .circle li {
    43. float: left;
    44. width: 8px;
    45. height: 8px;
    46. /*background-color: #fff;*/
    47. border: 2px solid rgba(32, 155, 97, 0.5);
    48. margin: 0 5px;
    49. border-radius: 50%;
    50. /*鼠标经过显示小手*/
    51. cursor: pointer;
    52. }
    53. .current {
    54. background-color: red;
    55. }

    轮播图js文件:

    1. window.addEventListener('load', function () {
    2. // 1. 获取元素
    3. var arrow_l = document.querySelector('.arrow-l'); //左右按钮
    4. var arrow_r = document.querySelector('.arrow-r');
    5. var focus = document.querySelector('.focus'); //整个大框
    6. // 返回大盒子的宽度 大盒子的宽度和图片的宽度一致
    7. var focusWidth = focus.offsetWidth;
    8. // 2. 鼠标经过显示 隐藏按钮
    9. focus.addEventListener('mouseenter', function () {
    10. arrow_l.style.display = 'block';
    11. arrow_r.style.display = 'block';
    12. clearInterval(timer);
    13. timer = null;
    14. })
    15. focus.addEventListener('mouseleave', function () {
    16. arrow_l.style.display = 'none';
    17. arrow_r.style.display = 'none';
    18. timer = setInterval(function () {
    19. //手动调用点击事件
    20. arrow_r.click();
    21. }, 2000);
    22. })
    23. // 3. 动态生成小圆圈 有几张图片 我就生成几个小圆圈
    24. var ul = focus.querySelector('ul');
    25. var ol = focus.querySelector('.circle');
    26. // console.log(ul.children.length);
    27. for (let i = 0; i < ul.children.length; i++) {
    28. // 创建一个小li
    29. var li = document.createElement('li');
    30. // 把小li 插入到ol里面
    31. ol.appendChild(li);
    32. // 记录当前小圆圈的索引号 通过自定义属性来做
    33. li.setAttribute('data-index', i);
    34. // 生成小圆圈的时候 就绑定点击事件
    35. li.addEventListener('click', function () {
    36. // 排他思想
    37. for (let i = 0; i < ol.children.length; ++i) {
    38. ol.children[i].className = '';
    39. }
    40. this.className = 'current';
    41. // 5. 点击小圆圈,移动图片,当然移动的是ul
    42. // ul 的移动距离 小圆圈的索引号 乘以图片的宽度 注意是负值
    43. // 点击了某个xiaoli 就拿到当前小li的属性
    44. // var index = this.dataset.index;
    45. var index = this.getAttribute('data-index');
    46. //当我们点击了某个小li 就要把这个小li的索引号给num
    47. num = index;
    48. //当我们点击了某个小li 就要把这个小li的索引号给circle
    49. circle = index;
    50. // console.log(index);
    51. // console.log(focusWidth);
    52. animate(ul, -index * focusWidth);
    53. })
    54. }
    55. // 把ol里面的第一个小li 设置类名 current
    56. ol.children[0].className = 'current';
    57. // 6. 克隆第一张图片 li 放到ul的最后面
    58. var first = ul.children[0].cloneNode(true);
    59. ul.appendChild(first);
    60. // 7. 点击右侧按钮,图片滚动一张
    61. var num = 0;
    62. // circle 控制小圆圈的播放
    63. var circle = 0;
    64. // 节流阀
    65. var flag = true;
    66. arrow_r.addEventListener('click', function () {
    67. if (flag) {
    68. flag = false; //关闭节流阀
    69. //如果走到了最后的一张图片 此时ul需要快速复原 num设置为0
    70. if (num == ul.children.length - 1) {
    71. ul.style.left = 0;
    72. num = 0;
    73. }
    74. num++;
    75. animate(ul, -num * focusWidth, function () {
    76. flag = true; //打开节流阀
    77. });
    78. // 8.点击右侧按钮,就让小圆圈跟随一起变化,再生棉一个变量控制小圆圈的播放
    79. circle++;
    80. //如果circle==4 表示走到了最后克隆这张图片 需要让circle=0
    81. if (circle == ol.children.length) {
    82. circle = 0;
    83. }
    84. circleChange();
    85. }
    86. })
    87. // 9. 左侧按钮
    88. arrow_l.addEventListener('click', function () {
    89. if (flag) {
    90. flag = false; //关闭节流阀
    91. //如果走到了第一张图片 此时ul需要快速复原 num设置为0
    92. if (num == 0) {
    93. num = ul.children.length - 1
    94. ul.style.left = -num * focusWidth + 'px';
    95. }
    96. num--;
    97. animate(ul, -num * focusWidth, function () {
    98. flag = true; //打开节流阀
    99. });
    100. // 8.点击右侧按钮,就让小圆圈跟随一起变化,再生棉一个变量控制小圆圈的播放
    101. circle--;
    102. //如果circle<0 表示走到了第一张 需要让circle=最后一个下标
    103. // if (circle < 0) {
    104. // circle = ol.children.length - 1;
    105. // }
    106. circle = circle < 0 ? ol.children.length - 1 : circle;
    107. circleChange();
    108. }
    109. })
    110. function circleChange() {
    111. //排他思想
    112. for (let i = 0; i < ol.children.length; ++i) {
    113. ol.children[i].className = '';
    114. }
    115. ol.children[circle].className = 'current';
    116. }
    117. // 10.自动播放轮播图
    118. var timer = setInterval(function () {
    119. //手动调用点击事件
    120. arrow_r.click();
    121. }, 2000);
    122. })

    image.png
    image.png
    image.png

    image.png
    image.png
    image.png
    image.png