使用构造函数封装轮播图

最新推荐文章于 2022-05-03 22:08:18 发布

最新推荐文章于 2022-05-03 22:08:18 发布

阅读量514

点赞数

本文链接：https://blog.csdn.net/Vue1024/article/details/123063199

版权

html css js jq 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

笔记

12 篇文章 1 订阅

订阅专栏

使用构造函数封装轮播图

<!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" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div class="swiper_box">
			<ul class="swiper">
				<li><img src="images/1.jpg" alt=""></li>
				<li><img src="images/2.jpg" alt=""></li>
				<li><img src="images/3.jpg" alt=""></li>
				<li><img src="images/3.jpg" alt=""></li>				
			</ul>
			<span class=" left"><</span>
			<span class=" right">></span>
		</div>

	</body>
	<script src="new.js"></script>
	<script>
		new  SlideShow({
			Auto:true,
			speed:1000,
			topFlag:true
		})
		
	</script>

</html>

        * {
            margin: 0;
            padding: 0;
        }
        
        @font-face {
            font-family: "iconfont";
            src: url('./font/iconfont.ttf') format('truetype')
        }
        
 
        
        li {
            list-style: none;
        }
        
        img {
            width: 500px;
            height: 260px;
        }
        
        .swiper{
        	left:0px;
        	position: absolute;
        	display: flex;
        	transition:1s;
        }
        .swiper_box{
        	width: 500px;
        	height: 260px;
        	position: relative;
        	margin: 100px auto;
        	overflow: hidden;
        	
        }
        span {
            position: absolute;
            top: calc(50% - 20px);
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.301);
            color: #fafafa;
            cursor: pointer;
        }
        
        .left {
            font-size: 26px;
        }
        
        .right {
            right: 0;
        }
        ol {
            position: absolute;
            bottom: 20px;
            margin-left: 100px;
            display: flex;
        }
        
        ol li {
            width: 10px;
            height: 10px;
			margin: 0 5px;
            background-color: rgba(0, 0, 0, 0.479);
            border-radius: 100%;
        }

function SlideShow(option) {
  this.ul = document.querySelector(".swiper");
  this.lis = document.querySelectorAll(".swiper li");
  this.left = document.querySelector(".left");
  this.right = document.querySelector(".right");
  this.swiper_box = document.querySelector(".swiper_box");
  this.offWidths = this.lis[0].offsetWidth;
  this.option = option;
  this.clone();
  this.init();
  //节流
  this.lock = true;
}
//初始化
SlideShow.prototype.init = function () {
  (n = 0), (that = this);
  //圆的显示
  if (this.option.topFlag) {
    this.dot();
  }
  //自动播放
  if (this.option.Auto) {
    this.autoplay();
  }
  //暂停
  this.pause();
  //向右切换
  this.clickLe();
  //向左切换
  this.clickRi();
};

//在图片后面克隆一张图片
SlideShow.prototype.clone = function () {
  this.clonefirstImg = this.ul.firstElementChild.cloneNode(true);
  this.ul.appendChild(this.clonefirstImg);
};
//自动播放
SlideShow.prototype.autoplay = function () {
  timer = null;
  timer = setInterval(() => {
    n++;
    this.ul.style.left = -that.offWidths * n + "px";
    this.ul.style.transition = that.option.speed + "ms";

    if (n === that.lis.length) {
      n = 0;
      setTimeout(() => {
        this.ul.style = 0;
        this.ul.style.transition = "none";
      }, (this.option.speed / 1000) * 900);
    }
    that.move();
  }, this.option.speed);
};
//样式重置
SlideShow.prototype.move = function () {
  var newLis = document.querySelectorAll("ol li");

  if (newLis.length != 0) {
    newLis.forEach((value) => (value.style.backgroundColor = ""));
    newLis[n].style.backgroundColor = "#fff";
  }
};
//暂停
SlideShow.prototype.pause = function () {
  this.swiper_box.onmouseenter = function () {
    clearInterval(timer);
  };
  this.swiper_box.onmouseleave = function () {
    that.autoplay();
  };
};

//是否生成导航圆点
SlideShow.prototype.dot = function () {
  var ol = document.createElement("ol");
  ol.className = "olList";
  this.swiper_box.appendChild(ol);
  for (var i = 0; i < this.lis.length; i++) {
    var li = document.createElement("li");
    li.index = i;
    ol.appendChild(li);
  }
  var newLis = document.querySelectorAll("ol li");
  newLis[0].style.backgroundColor = "#fff";
  ol.addEventListener("click", (e) => {
    if (e.target.nodeName.toLowerCase() === "li") {
      n = e.target.index;
      that.ul.style.left = -that.offWidths * n + "px ";
	  that.ul.style.transition = "none";
      that.move();
    }
  });
};

//切换
SlideShow.prototype.clickLe = function () {
  this.left.onclick = function () {
    clearInterval(timer);
	if(!that.lock) return;
    n--;
    if (n === -1) {
      that.ul.style.left = -that.offWidths * that.lis.length + "px ";
      that.ul.style.transition = "none";
      n = that.lis.length - 1;
      setTimeout(() => {
        that.ul.style.left = -that.offWidths * n + "px ";
        that.ul.style.transition = that.option.speed + "ms";
      }, 0);
    } else {
      that.ul.style.left = -that.offWidths * n + "px ";
    }
    that.move();
	that.lock = false;
	setTimeout(() => {
		that.lock = true;
	},that.option.speed)
  };
};
SlideShow.prototype.clickRi = function () {
  this.right.onclick = function () {
    clearInterval(timer);
	if(!that.lock) return;
    n++;
    that.ul.style.left = -that.offWidths * n + "px";
    that.ul.style.transition = that.option.speed + "ms";
    if (n === that.lis.length) {
      n = 0;
      setTimeout(() => {
        that.ul.style = 0;
        that.ul.style.transition = "none";
      }, that.option.speed);
    }
    that.move();
	that.lock = false;
	setTimeout(() => {
		that.lock = true;
	},that.option.speed)
  };
};