JavaScript基于原型链封装可复用轮播图组件

核心代码与样式结构

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 * {
  padding: 0px;
  margin: 0px;
  list-style: none;
 }

 .leftBtn {
  position: absolute;
  width: 30px;
  height: 30px;
  color: black;
  background-color: cyan;
  top: 50%;
  margin-top: -15px;
  line-height: 30px;
  text-align: center;
  opacity: 0.6;
  cursor: pointer;
  left: 10px;
 }

 .rightBtn {
  position: absolute;
  width: 30px;
  height: 30px;
  color: black;
  background-color: cyan;
  top: 50%;
  margin-top: -15px;
  line-height: 30px;
  text-align: center;
  opacity: 0.6;
  cursor: pointer;
  right: 10px;
 }

 .slider {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  cursor: pointer;
 }

 .slider span {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: darkgray;
  border-radius: 50%;
  margin-left: 10px;
 }

 .slider .active {
  background-color: #f40;
 }
 </style>
</head>

<body>
 <div class="div"></div>
 <div id="div"></div>
 <script>

 var div = document.getElementsByClassName('div')[0]
 var oDiv = document.getElementById('div')
 // var arr = ['./tp copy/decade.jpg', './tp copy/decad.jpg', './tp copy/tp.jpg']
 HTMLDivElement.prototype.createTurnPage = function (arr) {
  var arr = (typeof arr != "object") ? [arr] : arr; //确保参数总是数组
  var ul = document.createElement('ul');
  ul.className = 'ul'
  this.style.width = '400px';
  this.style.height = 200 + 'px';
  this.style.position = 'relative';
  this.style.overflow = 'hidden'
  this.style.margin = '200px auto 0px';
  this.appendChild(ul);
  ul.style.width = (1 + arr.length) * parseInt(this.style.width) + 'px'
  ul.style.height = this.style.height
  ul.style.position = 'absolute'
  for (let i = 0; i < arr.length + 1; i++) {
  var li = document.createElement('li');
  var img = document.createElement('img');
  ul.appendChild(li);
  li.appendChild(img);
  li.style.width = this.style.width
  li.style.height = this.style.height
  li.style.float = 'left'
  img.style.width = '100%'
  img.style.height = '100%'
  img.src = arr[i];
  }
  var LastImg = document.createElement('img');
  var liList = document.getElementsByClassName('ul')[0].getElementsByTagName('li');
  LastImg.src = arr[0];
  LastImg.style.width = '100%'
  LastImg.style.height = '100%'
  liList[liList.length - 1].removeChild(img)
  liList[liList.length - 1].appendChild(LastImg);

  var leftBtn = document.createElement('div');
  var rightBtn = document.createElement('div');
  var slider = document.createElement('div');
  for (let i = 0; i < arr.length; i++) {
  var span = document.createElement('span')
  slider.appendChild(span)
  }
  var arrSpan = slider.getElementsByTagName('span')
  this.appendChild(leftBtn)
  this.appendChild(rightBtn)
  this.appendChild(slider)
  slider.className = 'slider'
  leftBtn.className = 'leftBtn';
  leftBtn.innerHTML = '&lt;'
  rightBtn.className = 'rightBtn';
  rightBtn.innerHTML = '&gt;'

  var timer = null;
  var lock = true
  var index = 0;
  var moveWidth = document.getElementsByTagName('li')[0].offsetWidth;
  var num = document.getElementsByTagName('li').length - 1;


  leftBtn.onclick = function () {
  autoMove('right->left')
  }
  rightBtn.onclick = function () {
  autoMove('left->right')
  }
  for (var i = 0; i < arrSpan.length; i++) {
  (function (myindex) {
   arrSpan[myindex].onclick = function () {
   lock = false;
   clearTimeout(timer)
   index = myindex
   startMove(ul, { left: -index * moveWidth }, function () {
    lock = true;
    timer = setTimeout(autoMove, 2000)
    spanMove(index)
   })

   }
  }(i))
  }
  function autoMove(direction) {
  if (lock) {
   lock = false
   clearTimeout(timer);
   if (!direction || direction == 'left->right') {
   index++;
   startMove(ul, { left: ul.offsetLeft - moveWidth }, function () {
    if (ul.offsetLeft == - num * moveWidth) {
    ul.style.left = 0 + 'px'
    index = 0
    }
    spanMove(index);
    timer = setTimeout(autoMove, 2000)
    lock = true
   })
   } else if (direction == 'right->left') {
   if (ul.offsetLeft == 0) {
    ul.style.left = - num * moveWidth + 'px'
    index = num
   }
   index--;
   startMove(ul, { left: ul.offsetLeft + moveWidth }, function () {
    timer = setTimeout(autoMove, 2000)
    lock = true
    spanMove(index)
   })

   }
  }

  }
  function spanMove(index) {
  for (var i = 0; i < arrSpan.length; i++) {
   arrSpan[i].className = ''
  }
  arrSpan[index].className = 'active'
  }
  timer = setTimeout(autoMove, 1500)
 }

 // div.createTurnPage(arr)
 oDiv.createTurnPage(['./tp copy/decade.jpg', './tp copy/logo.jpg', './tp copy/decad.jpg', './tp copy/tp.jpg'])


 function getStyle(dom, attr) {
  if (window.getComputedStyle) {
  return window.getComputedStyle(dom, null)[attr];
  } else {
  dom.currentScript[attr];
  }
 }



 function startMove(dom, attrObj, callback) {
  clearInterval(dom.timer);
  var speed = null,
  cur = null;

  dom.timer = setInterval(function () {
  var stop = true;
  for (var attr in attrObj) {
   if (attr == "opacity") {
   cur = parseFloat(getStyle(dom, attr)) * 100;
   } else {
   cur = parseInt(getStyle(dom, attr));
   }
   speed = (attrObj[attr] - cur) / 7;
   speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
   if (attr == "opacity") {
   dom.style.opacity = (speed + cur) / 100;
   } else {
   dom.style[attr] = speed + cur + "px";
   }
   if (cur != attrObj[attr]) {
   stop = false;
   }
  }
  if (stop) {
   clearInterval(dom.timer);
   typeof callback == "function" && callback();
  }
  }, 20);
 }

 </script>
</body>

</html>