Js中利用面向对象实现轮播图

最新推荐文章于 2022-02-08 14:33:29 发布

豆仔的小幸运

最新推荐文章于 2022-02-08 14:33:29 发布

阅读量433

点赞数 1

文章标签： js 面向对象

本文链接：https://blog.csdn.net/FLJ1027/article/details/103483712

版权

利用面向对象实现轮播图，按钮切图，及延时器自动切图。图片请自行准备啦，

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		.cont{width:1000px;height:260px;margin: 20px auto;position: relative;overflow: hidden;}
		.imgbox{}
		.imgbox a{position: absolute;left:0;top:0;width:1000px;height:260px;overflow: hidden;}
		.imgbox img{width:1000px;height:260px;}
		.imgbox a:nth-child(1){z-index: 1;}
		
		.btns{}
		.btns input{width:40px;height:40px;border: none;background: rgba(200,200,200,0.4);position: absolute;top:110px;z-index: 999999;}
		.left{left:0;}
		.right{right:0;}
	</style>
</head>
<body>
	<div class="cont">
	    <div class="imgbox">
	        <a href=""><img src="img/1.jpg" alt=""></a>
	        <a href=""><img src="img/2.jpg" alt=""></a>
	        <a href=""><img src="img/3.jpg" alt=""></a>
	        <a href=""><img src="img/4.jpg" alt=""></a>
	    </div>
	    <div class="btns">
	        <input type="button" class="left" value="<<<">
	        <input type="button" class="right" value=">>>">
	    </div>
	</div>
</body>
<script src="move.js"></script>
<script>
	// 构造函数
	function Banner(){
		this.img = document.querySelectorAll(".imgbox a");
		this.left = document.querySelector(".left");
		this.right = document.querySelector(".right");
		// 当前显示图片的索引
		this.index = 0;
		// 要消失的图片索引
		this.prev;
		// 显示图片的zindex
		this.i = 1;
		// 执行绑定事件
		this.addEvent();
		// 设定延时器名
		this.timer;
		// 启动延时器
		this.setTimer();
	}
	
	// 绑定事件
	Banner.prototype.addEvent = function(){
		var that = this;
		this.left.onclick = function(){
			that.changeIndexL();
		}
		this.right.onclick = function(){
			that.changeIndexR();
		}
		
	}
	
	//设定延时器，
	Banner.prototype.setTimer = function(){
		let that = this;
		this.timer = setTimeout(function(){
			// 延时器中调用 向右的索引，并执行切换图片
			that.changeIndexR();
		},5000);
	}
	
	// 计算索引
	// 左 0.3.2.1.0.3...
	Banner.prototype.changeIndexL = function(){
		//清除延时器，保证点击按钮和延时器调用不冲突，点击事件优先级更高
		clearTimeout(this.timer);
		if(this.index == 0){
			this.index = this.img.length-1;
			this.prev = 0;
		}else{
			this.index--;
			this.prev = this.index + 1;
		}
		// 为了确定左右按钮不同的方向，给显示图片的方法，传 1
		this.changeImg(1);
		//点击结束后启用延时器达到切换图片的效果
		this.setTimer();
	}
	
	// 右 0.1.2.3.0.1...
	Banner.prototype.changeIndexR = function(){
		//清除延时器，保证点击按钮和延时器调用不冲突，点击事件优先级更高
		clearTimeout(this.timer);
		if(this.index == this.img.length-1){
			this.index = 0;
			this.prev = this.img.length-1;
		}else{
			this.index++;
			this.prev = this.index - 1;
		}
		// 为了确定左右按钮不同的方向，给显示图片的方法，传 -1
		this.changeImg(-1);
		//点击结束后启用延时器达到切换图片的效果
		this.setTimer();
	}
	
	// 切换图片
	Banner.prototype.changeImg = function(d){
		
		// console.log(this.index,this.prev);
		// 设置当前显示图片的层级
		this.img[this.index].style.zIndex = this.i++;
		
		// 设置当前显示图片距左边多少
		this.img[this.index].style.left = -1000 * d + "px";
		
		// 调用多属性运动封装的函数，传入当前的图片和target目标值
		move(this.img[this.index],{left:0});
		
		// 设置要隐藏的图片当前距左边多少
		this.img[this.prev].style.left = 0;
		
		// 调用多属性运动封装的函数，传入要隐藏的图片和target目标值
		move(this.img[this.prev],{left:1000*d})
		
	}
	
	// new执行
	new Banner();
	
	
</script>

引入js文件，该文件是一个封装多属性运动函数。

		//data传入一个对象，key对应ele的样式属性，value对应ele的属性值,callback回调函数
		function move(ele, data, callback) {
			clearInterval(ele.t);
			//将for in 放入计时器中，节省性能，每次计时器开启，再进行for in的操作。
			ele.t = setInterval(function() {
				//1、设置目标到达状态
				var mySwitch = true;
				//for..in遍历对象，i为样式attr，data[i]为对象的value; 对应目标值target
				for (var i in data) {
					//获取元素的当前样式
					var iNow = parseInt(getStyle(ele, i));
					//设置步长(每次改变的值),每次为现在值和目标值的十分之一，speed永远不会为0
					var speed = (data[i] - iNow) / 10;
					//判断步长，小于0向下取整，大于0向上取整
					// if (speed < 0) {
					// 	speed = Math.floor(speed);
					// } else {
					// 	speed = Math.ceil(speed);
					// }
					// 下方简写
					speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
					//开启之后，关闭之前，作一个判断
					//2、当有一个属性没到达目标时，改变状态，不清除计时器
					if (iNow != data[i]) {
						mySwitch = false;
					}
					ele.style[i] = iNow + speed + "px";
				}
				//3、(for循环结束)所有目标达到状态时清除计时器
				if (mySwitch) {
					//清除计时器，动画结束
					clearInterval(ele.t);
					//如果传入了callback，就执行。如果没有这个就不执行
					callback && callback();
				}
			}, 30)
		}


		//获取样式兼容写法
		function getStyle(ele, attr) {
			if (getComputedStyle) {
				return getComputedStyle(ele, false)[attr]; //false表示非伪元素
			} else {
				return ele.currentStyle[attr];
			}
		}

豆仔的小幸运

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js中利用面向对象实现轮播图

利用面向对象实现轮播图，按钮切图，及延时器自动切图。图片请自行准备啦，<head> <meta charset="utf-8"> <title></title> <style> .cont{width:1000px;height:260px;margin: 20px auto;position: relative;overfl...
复制链接

扫一扫