计时器轮播图

最新推荐文章于 2023-05-18 20:23:20 发布

吃不饱的我

最新推荐文章于 2023-05-18 20:23:20 发布

阅读量155

点赞数

分类专栏：笔记文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/yh_31/article/details/127333342

版权

笔记专栏收录该内容

70 篇文章 0 订阅

订阅专栏

黑马程序员的视频教程做的轮播图。
点击两边的箭头切换图片，点击数字切换图片，定时器2s自动切换图片，

<!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>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="all" id='box'>
        <div class="screen">
            <ul>
                <li><img src="./images/11.jpg" width="500"/></li>
                <li><img src="./images/22.jpg" width="500"/></li>
                <li><img src="./images/33.jpg" width="500"/></li>
                <li><img src="./images/44.jpg" width="500"/></li>
                <li><img src="./images/55.jpg" width="500"/></li>
            </ul>
            <ol>
            </ol>
        </div>
        <div id="arr">
            <span id="left">&lt;</span>
            <span id="right">&gt;</span>
        </div>
    </div>

        <script src="./js/common.js"></script>
        <script src="./js/animate.js"></script>
        <script src="./js/index.js"></script>
</body>
</html>

js页面
common.js页面

// 写一个函数，处理innerText和textContent的兼容性问题

// 获取元素之间的内容
function getInnerText(element) {
  // 判断element是否支持innerText
  if (typeof element.innerText === 'string') {
    return element.innerText;
  } else {
    return element.textContent;
  }
}
// 设置元素之间的内容
function setInnerText(element, content) {
  // 判断element是否支持innerText
  if (typeof element.innerText === 'string') {
    element.innerText = content;
  } else {
    element.textContent = content;
  }
}

// 获取min-max之间的随机整数
function getRandom(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive 
}

// 根据id获取元素
function my$(id) {
  return document.getElementById(id);
} 


// 处理firstElementChild的兼容性问题
function getFirstElementChild(parent) {
  // 如果当前浏览器 支持firstElementChild
  if (parent.firstElementChild) {
    return parent.firstElementChild;
  }

  var node, nodes = parent.childNodes, i = 0;
  while (node = nodes[i++]) {
      if (node.nodeType === 1) {
          return node;
      }
  }
  return null;
}


// 注册事件 ，处理兼容性问题
function addEventListener(element, eventName, callback) {
  if (element.addEventListener) {
    element.addEventListener(eventName, callback, false);
  } else if (element.attachEvent) {
    element.attachEvent('on' + eventName, callback);
  } else {
    element['on' + eventName] = callback;
  }
}

// 移除事件， 处理兼容性问题
function removeEventListener(element, eventName, callback) {
  if (element.removeEventListener) {
    element.removeEventListener(eventName, callback, false);
  } else if (element.detachEvent) {
    element.detachEvent('on' + eventName, callback);
  } else {
    element['on' + eventName] = null;
  }
}

// 获取页面滚动出去的距离。处理兼容性
function getScroll() {
  return {
    scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
    scrollLeft: document.documentElement.scrollLeft || document.body.scrollLeft
  }
}

 // 获取鼠标在页面上的坐标  解决ie8的问题
 function getPage(e) {
  return {
    pageX: e.clientX + getScroll().scrollLeft,
    pageY: e.clientY + getScroll().scrollTop
  }
}

animate.js

function animate(element, target, callback) {
  // 判断之前是否开启了定时器
  if (element.timerId) {
    clearInterval(element.timerId);
  }
  // 让每一个执行动画的元素，记录自己的定时器
  element.timerId = setInterval(function () {
    // 当前坐标 
    var current = element.offsetLeft;
    // 步进
    var step = 20;

    // 当当前位置 > 目标位置 step 应该是负数
    if (current > target) {
      step = - Math.abs(step);
    }

    // 编码要避免硬编码
    // if (current >= 500)
    // 如果当前位置和目标位置的差小于step，就认为到达目标位置
    if (Math.abs(current - target) <= Math.abs(step)) {
      element.style.left = target + 'px';
      clearInterval(element.timerId);
      // 回调函数
      if (callback) {
        callback();
      }
      return;
    }
    current += step;
    element.style.left = current + 'px';
  }, 15);
}

index.js页面

// 定时器的时间间隔
var interval = 2000;
// 0 获取元素
var box = document.getElementById('box');
var screen = box.children[0];
var ul = screen.children[0];
var ol = screen.children[1];

// 获取箭头的容器  arrow
var arr = box.children[1];  
var arrLeft = arr.children[0];
var arrRight = arr.children[1];


// 获取图片的宽度
var imgWidth = screen.offsetWidth;

// 1 动态生成序号

// 获取图片的个数
var count = ul.children.length;
var i = 0;
for (; i < count; i++) {
  // 创建序号
  var li = document.createElement('li');
  ol.appendChild(li);
  setInnerText(li, i + 1);
  // 3 点击序号切换图片

  // li记录它自己的索引
  li.index = i;

  // 3.1 给序号li注册点击事件
  li.onclick = liClick;
  
  // 3.4 让第一个序号默认选中
  if (i === 0) {
    li.className = 'current';
  }
}
function liClick() {
  // 3.2 让图片以动画的方式移动
  animate(ul, -this.index * imgWidth);

  // 3.3 让所有的序号li取消高亮显示，让当前li高亮显示
  for (i = 0; i < count; i++) {
    li = ol.children[i];
    li.className = '';
  }
  this.className = 'current';

  // 4 点击序号li，重新记录全局的index
  index = this.index;
}


// 2 鼠标经过显示箭头 离开隐藏箭头
box.onmouseover = function () {
  arr.style.display = 'block';

  // 停止定时器
  clearInterval(timerId);
}
box.onmouseout = function () {
  arr.style.display = 'none';
  // 鼠标离开，开启定时器
  timerId = setInterval(function () {
    arrRight.click();
  }, interval);
}



// 4 点击箭头实现上一张和下一张的功能
var index = 0;  // 默认是第一张图片的索引
// 4.1下一张
arrRight.onclick = function () {
  // 当是克隆的第一张图片(真正的最后一张图片)的时候，偷偷的把ul设置到真正的第一张图片的位置
  if (index === count) {
    index = 0;
    ul.style.left = '0px';
  }

  index++;
  if (index < count) {
    // animate(ul, -index * imgWidth);
    // 让对应的序号li高亮显示
    ol.children[index].click();
  } else {
    // 以动画的方式切换到克隆的第一张图片
    animate(ul, -index * imgWidth);
    // 取消所有的序号li的高亮显示
    for (i = 0; i < count; i++) {
      li = ol.children[i];
      li.className = '';
    }
    ol.children[0].className = 'current';
  }
}

// 4.2上一张
arrLeft.onclick = function () {
  // 判断index === 0 如果是第一张，偷偷的切换到克隆的第一张（真正的最后一张）
  if (index === 0) {
    index = count;
    ul.style.left = -index * imgWidth + 'px';
  }

  index--;
  // if (index >= 0) {
    ol.children[index].click();
  // }
}

// 4.3 无缝滚动
// 复制第一个li，并且添加到ul的最后
// cloneNode 的参数 true  会复制子元素
// cloneNode 的参数 false 不会复制子元素
var cloneLi = ul.children[0].cloneNode(true);
ul.appendChild(cloneLi);

// 5 自动切换图片
var timerId = setInterval(function () {
  arrRight.click();
}, interval);