香港黄金配角吴孟达去世，80后程序员以轮播图来悼念达叔，达叔一路走好！

﹏ヽ暗。殇╰゛Y 2021-07-24 22:07 580阅读 0赞

# 悼念达叔 #

达叔和周星驰两人的无厘头搞笑喜剧一次次让我们捧腹大笑，剧中的情节让我们难以忘怀，每每回忆起来都是伴随着欢声笑语！

从《逃学威龙》到《破坏之王》，从《九品芝麻官》到《武状元苏乞儿》，从《月光宝盒》到《仙履奇缘》。每一次的出现都让我们陷入新的狂欢，既有无厘头的搞笑，也有让我们潸然泪下的感动，是影视界的盛宴。

尤其是我们80后的这代人，从小都是看着达叔和周星驰的电影长大的。

达叔走了，我们的感怀更深，在这个飞速发展的社会里，我们又失去了生命中很重要的一部分，是属于我们年代的欢乐！

仅以一个轮播来表达对达叔的悼念！

![20210228114704222.gif][]

## 实现思路 ##

### 首先有个div 里面包含一个canvas和两个图片，canvas是用来轮播的，两个图片分别是向左、向右图标 ###

<!DOCTYPE html>
    <html>
    	<head lang="en">
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    #box{
    	width:640px;
    	height:360px;
    	position:absolute;
    	margin:0 auto;
    	left:0;
    	top:50px;
    	right:0;
    	bottom:0;
    	border-radius:10px;
    }
    #left{
    	position:absolute;
    	top:45%;
    	left:10px;
    	cursor:pointer;
    }
    #left:hover{
        -webkit-box-shadow: #ccc 10px 10px 10px;
        -moz-box-shadow: #ccc 10px 10px 10px;
        box-shadow: #ccc 10px 10px 10px; 
    }
    #right{
    	position:absolute;
    	top:45%;
    	right:10px;
    	cursor:pointer;
    }
    #right:hover{
        -webkit-box-shadow: #ccc 10px 10px 10px;
        -moz-box-shadow: #ccc 10px 10px 10px;
        box-shadow: #ccc 10px 10px 10px; 
    }
    </style>
    	</head>
    	<body>
    		<div id='box'>
    			<img src='images/left.png' id='left'>
    			<img src='images/right.png' id='right'>
    		</div>
    	
    	<script type="text/javascript" src=./slideShow.js></script>	
    	<script type="text/javascript">
    	var box = document.getElementById('box');
    	var left = document.getElementById('left');
    	var right = document.getElementById('right');
    	slide.init(box,left,right);
    </script>
    	</body>
    </html>

var slide= new SlideShow();
    //初始化
    	SlideShow.prototype.init=function(el,left,right){
    		if(!el) return ;
    		this.el=el;
    		
    		var canvas = document.createElement('canvas');//创建画布
    		canvas.style.cssText="border:1px solid grey;border-radius:10px;";//设置样式
    		var W = canvas.width = 640; //设置宽度
    		var H = canvas.height = 360;//设置高度
    		
    		el.appendChild(canvas);//添加到指定的dom对象中
    }

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

### 图片构造函数 ###

//图片对象ImageDraw构造函数
    	function ImageDraw(o,obj){
    		this.id='',
    		this.image=0,//图片对象（必填）
    		this.sx=0,//图片切片开始x位置（显示整个图片的时候不需要填）
    		this.sy=0,//图片切片开始y位置（显示整个图片的时候不需要填）
    		this.sWidth=0, //图片切片开始宽度（显示整个图片的时候不需要填）
    		this.sHeight=0,//图片切片开始高度（显示整个图片的时候不需要填）
    		this.dx=0, //图片目标x位置（必填）
    		this.dy=0, //图片目标y位置（必填）
    		this.dWidth=0,//图片目标显示宽度（宽度不缩放时不必填）
    		this.dHeight=0//图片目标高度高度（高度不缩放时不必填）
    		
    		this.init(o,obj);
    	}
    	ImageDraw.prototype.init=function(o,obj){
    		this.lol=obj;
    		for(var key in o){
    			this[key]=o[key];
    		}
    		return this;
    	}
    	ImageDraw.prototype.render=function(context){
    		draw(context,this);
    		function draw(context,obj) {
    			var ctx=context;
    			ctx.save();
    			
    			if(!obj.image || getType(obj.dx)=='undefined' || getType(obj.dy)=='undefined'){
    				throw new Error("绘制图片缺失参数");	
    				return;
    			} 
    			ctx.translate(obj.dx,obj.dy);
    			if(!getType(obj.sx)=='undefined' && getType(obj.sy)=='undefined' && obj.sWidth && obj.sHeight && obj.dWidth && obj.dHeight){
    				//裁剪图片，显示时候有缩放
    				ctx.drawImage(obj.image, obj.sx, obj.sy, obj.sWidth, obj.sHeight, 0, 0, obj.dWidth, obj.dHeight);
    			}else if(obj.dWidth && obj.dHeight){
    				ctx.drawImage(obj.image, 0, 0, obj.dWidth, obj.dHeight);//原始图片，显示时候有缩放
    			}else{
    				ctx.drawImage(obj.image,0, 0);//原始图片，显示时候无缩放
    			}
    			ctx.restore();
    		}
    	}

图片路径

//组装图片路径
    	SlideShow.prototype.loadUrl=function(){
    		for(var i=1;i<=this.count;i++){
    			this.urlObj[i]="images/"+i+".jpeg";
    		}
    	}

### 装载图片 ###

//加载图片
    	SlideShow.prototype.loadImg=function(fn){
    		var that=this;
    		var keys = Object.keys(this.urlObj);
    		var url,key;
    		var n=0;
    		for(var i=0;i<keys.length;i++)
    		{
    			key=keys[i];
    			url =  this.urlObj[keys[i]];
    			var img=new Image();
    			img.src=url;
    			(function(k,obj){
    				obj.onload=function(){
    				that.imgObj[k]=obj;
    				n++;
    				
    				if(n===keys.length){
    					fn();
    				}
    			}
    			})(key,img)
    		}
    	}

### 组装图片对象 ###

//组装图片对象信息
    	SlideShow.prototype.drawImg=function(){
    		var that=this;
    		var ctx=this.ctx;
    		var imgObj = this.imgObj;
    		var keys = Object.keys(imgObj);
    		var x=y=0;
    		var img ,image;
    		keys.forEach(function(key){
    			image=imgObj[key];
    			switch (key){//这可以不用switch,这样写是为了预留其他图片的时候做其他判断用的
    					
    				default :
    					img = new ImageDraw({image:image, dx:x, dy:y ,dWidth:this.w,dHeight:this.h},that);
    					break; 	
    			}
    			
    			that.imageArr.push(img);
    		})
    		
    		this.renderArr[0]=undefined;//先第一个位置占用，用来放图片
    		this.tranImg();//切换图片
    	}

//切换图片
    	SlideShow.prototype.tranImg=function(){
    		this.renderArr[0]=this.imageArr[this.imageIndex];//根据imageIndex来切换
    	}

### 调用render绘制图片 ###

//渲染图形
    	SlideShow.prototype.render=function(){
    		var context=this.ctx;
    		this.clearCanvas();	
    		_.each(this.renderArr,function(item){
    			item && item.render(context);
    		});
    	}

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1][]

### 加入指示点 ###

小圆的构造函数

//构造函数
    	function Ball(o){
    		this.x=0,//圆心X坐标
    		this.y=0,//圆心Y坐标
    		this.r=0,//半径
    		this.startAngle=0,//开始角度
    		this.endAngle=0,//结束角度
    		this.anticlockwise=false;//顺时针，逆时针方向指定
    		this.stroke=false;//是否描边
    		this.fill=false;//是否填充
    		this.scaleX=1;//缩放X比例
    		this.scaleY=1;//缩放Y比例
    		this.id=0;//设置一个id
    		
    		this.init(o);
    	}
    	//初始化
    	Ball.prototype.init=function(o){
    		for(var key in o){
    			this[key]=o[key];
    		}
    	}
    	
    	//是否在当前图形内
    	Ball.prototype.isPoint=function(offset){
    		var offsetX =offset.x ,
    			offsetY	=offset.y ;
    			
    		//用勾股定理计算鼠标与圆心的距离
    		var rDis = Math.sqrt((offsetX-this.x)**2+(offsetY-this.y)**2);
    		if(rDis<=this.r){
    			return true;
    		}
    		return false;
    	}
    	
    	//绘制
    	Ball.prototype.render=function(context){
    		var ctx=context;
    		ctx.save();
    		ctx.beginPath();
    		ctx.translate(this.x,this.y);
    		ctx.scale(this.scaleX,this.scaleY);//设定缩放
    		ctx.arc(0,0,this.r,this.startAngle,this.endAngle);//画圆
    		if(this.lineWidth){//线宽
    			ctx.lineWidth=this.lineWidth;
    		}
    		if(this.fill){//是否填充
    			this.fillStyle?(ctx.fillStyle=this.fillStyle):null;
    			ctx.fill();
    		}
    		if(this.stroke){//是否描边
    			this.strokeStyle?(ctx.strokeStyle=this.strokeStyle):null;
    			ctx.stroke();
    		}	
    		ctx.restore();
    		
    		return this;
    	}

### 根据图片数量来创建指示点个数 ###

//创建指示点
    	SlideShow.prototype.createPoints=function(){
    		var x=0,y=0;
    		var p,color='grey';
    		for(var i=0;i<this.count;i++){
    			p = new Ball({
    			 	x:i*20+this.w/2-this.count/2*18,
    				y:this.h-20,
    				r:5,
    				startAngle:0,
    				endAngle:2*Math.PI,
    				fill:true,
    				fillStyle:color,
    				id:i
    			 })
    			 this.renderArr.push(p);
    			 this.pointArr.push(p);
    		}
    	}

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 2][]

### 增加定时任务，图片2秒自动翻一次 ###

//设置定时任务
    	SlideShow.prototype.interval=function(){
    		if(this.timmer) return ;
    		this.timmer=setInterval(this.slide.bind(this),2000)
    	}
    	//自动向右切换图片
    	SlideShow.prototype.slide=function(){
    		//更好图片下标
    		this.imageIndex++;
    		this.imageIndex=this.imageIndex%this.count;
    		this.tranImg();
    		this.animate();
    	}
    	//执行动画
    	SlideShow.prototype.animate=function(){
    		this.clearCanvas();
    		this.render();
    	}

### 给指示点增加点击切换事件 ###

//鼠标点击事件（针对点击指示点切换图片）
    	SlideShow.prototype.mouseClick=function(e){
    		console.log('mouseClick')
    		var offset = _.getOffset(e);//获取鼠标位置
    		var points =this.pointArr;
    		for(var i=0;i<points.length;i++){
    			if(points[i].isPoint(offset)){//返回true，表示有指示点被点击了
    				this.imageIndex=points[i].id;//根据id设置图片下标
    				this.tranImg();//图片切换
    				this.animate();
    				break;
    			}
    		}
    	}

### 给向左向右图片增加点击事件 ###

//左移动点击事件
    	SlideShow.prototype.leftClick=function(){
    		console.log('leftClick')
    		//更好图片下标
    		this.imageIndex--;
    		if(this.imageIndex<0){
    			this.imageIndex=this.count-1
    		}
    		this.tranImg();
    		this.animate();
    	}
    
    	//右移动点击事件
    	SlideShow.prototype.rightClick=function(){
    		console.log('rightClick')
    		//更好图片下标
    		this.imageIndex++;
    		this.imageIndex=this.imageIndex%this.count;
    		this.tranImg();
    		this.animate();
    	}

### 画布、向左、向右图片分别增加鼠标移入、移出事件，当鼠标移入的时候定时任务停止，当鼠标移出的时候定时任务重新开启 ###

//鼠标移入事件
    	SlideShow.prototype.mouseOver=function(){
    		console.log('mouseOver');
    		this.left.style.display='block';
    		this.right.style.display='block';
    		clearInterval(this.timmer);
    		this.timmer=null;
    	}
    	//鼠标移出事件
    	SlideShow.prototype.mouseOut=function(){
    		console.log('mouseOut');
    		this.left.style.display='none';
    		this.right.style.display='none';
    		this.interval();
    	}

//给canvas画布添加点击、鼠标移入、移出事件
    		canvas.addEventListener('click',this.mouseClick.bind(this));
    		canvas.addEventListener('mouseover',this.mouseOver.bind(this));
    		canvas.addEventListener('mouseout',this.mouseOut.bind(this));
    		
    		//给左移添加点击、鼠标移入、移出事件
    		left.addEventListener('click',this.leftClick.bind(this));
    		left.addEventListener('mouseover',this.mouseOver.bind(this));
    		left.addEventListener('mouseout',this.mouseOut.bind(this));
    		
    		//给右移添加点击、鼠标移入、移出事件
    		right.addEventListener('click',this.rightClick.bind(this));
    		right.addEventListener('mouseover',this.mouseOver.bind(this));
    		right.addEventListener('mouseout',this.mouseOut.bind(this));

### 到这里基本就完成了，谢谢！ ###

### [代码下载，无需积分][Link 1] ###

# 最后让我来说一句：达叔再见、一路走好！ #

[20210228114704222.gif]: /images/20210724/7d53c454f8bc4c0db3a03bbc1c0b8165.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/a9f648ca3bc045b5822367b968ea1d5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1]: /images/20210724/508b623911704056afe1b459e6490154.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 2]: /images/20210724/c86e025c0b9342c6be1e8f00429fdaff.png
[Link 1]: https://download.csdn.net/download/dkm123456/15498970