javascript_面向对象_轮播图（淡入淡出）没有使用prototype

最新推荐文章于 2020-09-17 09:22:16 发布

田江

最新推荐文章于 2020-09-17 09:22:16 发布

阅读量446

点赞数

分类专栏： JavaScript从入门到精通文章标签：面向对象 javascript web前端开发 web应用 web开发

本文链接：https://blog.csdn.net/jiang7701037/article/details/78963256

版权

JavaScript从入门到精通专栏收录该内容

147 篇文章 79 订阅

订阅专栏

解释：

1、该轮播图的切换效果是淡入淡出

2、该轮播图还没有使用prototype属性，只是把对象所有的方法（函数）放到了构造函数里，后期讲到prototype时，再补上

效果图：

思路示意图：

代码：

1)、HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin:0; 
				padding:0;
				list-style: none;
			}
			
			#box1{
				position:relative;
				width:400px;
				height:300px;
			}
			
			
			#box2{
				position:relative;
				width:600px;
				height:300px;
			}
		
		</style>
	</head>
	<body style="height:1000px;">
		<div id="box1">
			
		</div>
		<br/>
		<br/>
		<br/>
		
		<div id="box2">
	
		</div>
	</body>
</html>

<script type="text/javascript" src="sliderShow.js"></script>
<script type="text/javascript">

function $(id){
	return document.getElementById(id);
}

window.onload = function(){
	
	let s = new SlideShow($("box1"),400,300,["img/timg1.jpg","img/timg2.jpg","img/timg3.jpg","img/timg4.jpg"],3000,20,20,"green","blue");
	s.initUI();
	s.initEvent();
	s.autoChange();
	
	let s2 = new SlideShow($("box2"),600,300,["img/timg5.jpg","img/timg6.jpg","img/timg7.jpg","img/timg8.jpg","img/timg9.jpg"],3000,30,30,"pink","red");
	s2.initUI();
	s2.initEvent();
	s2.autoChange();

}

</script>

2）、js代码（sliderShow.js）

//1、定义类
function SlideShow(boxDom,width,height,imgs,timespace,btnWidth,btnHeight,btnColor,btnHighColor){
	//1）、属性
	this.boxDom = boxDom;
	this.width = width;
	this.height = height;
	//要播放的图片数组
	this.imgs = imgs;
	this.ord = 0;//代表当前图片的序号，从0开始。
	this.myTimer = null;
	
	this.timespace = timespace;
	
	//轮播图中的按钮
	this.btnWidth = btnWidth;
	this.btnHeight = btnHeight;
	this.btnColor = btnColor;//原始颜色
	this.btnHighColor = btnHighColor;//高亮颜色
	
	//2）、方法（函数）
	this.initUI = function(){
		//一、创建所有的HTML元素，并设置css样式		
		//1、创建img标记
		for(let i=0;i<this.imgs.length;i++){
			//1)、创建img对象
			let imgDom = document.createElement("img");
			imgDom.src = this.imgs[i];
			//2)、设置样式
			imgDom.style.cssText = "position:absolute;width:"+this.width+"px;height:"+this.height+"px;";
			//3)、添加到容器里
			this.boxDom.appendChild(imgDom);
		}
		
		//2、创建ul
		let ulDom = document.createElement("ul");
		ulDom.style.cssText = "position:absolute;right:20px;bottom:10px;height:40px;";
		//3、创建li
		for(let i=0;i<this.imgs.length;i++){
			let liDom = document.createElement("li");
			liDom.style.cssText = "float:left;margin-left:10px;border-radius:50%;";
			liDom.style.width=this.btnWidth+"px";
			liDom.style.height=this.btnHeight+"px";
			liDom.style.backgroundColor=this.btnColor;
			ulDom.appendChild(liDom);
		}
		//4、把ul添加到容器里
		this.boxDom.appendChild(ulDom);
		
		//二、初始化界面
		//1、把每张图片的透明度进行初始化
		let imgDoms = this.boxDom.children;
		imgDoms[0].style.opacity = 1;
		for(let i=1;i<imgDoms.length-1;i++){
			imgDoms[i].style.opacity = 0;
		}
		
		//第一按钮变成高亮
		let lis = this.boxDom.lastElementChild.children;
		lis[0].style.backgroundColor=this.btnHighColor;
	};
	
	//初始事件
	this.initEvent = function(){
		let obj = this;//把当前this保存到obj里。
		
		//鼠标进入盒子的区域，停止变换
		this.boxDom.onmouseover =function(){
			window.clearInterval(obj.myTimer);
		};	
		
		this.boxDom.onmouseout = function(){
			obj.autoChange();
		}		
		let lis = this.boxDom.lastElementChild.children;
		for(let i=0;i<lis.length;i++){
			//赋值语句。
			lis[i].onclick = function(){//此函数的执行必须点击li。
				obj.goImg(i);//
			}
		}
	}
	
	//1、自动变换图片
	this.autoChange=function(){		
		this.myTimer=setInterval(()=>{
				//处理两个数据：一个是要淡出的图片序号，一个是要淡入的图片序号。
				let outord = this.ord;//ord++之前的ord就是要出去的ord			
				//1、改变序号
				this.ord++;//4
				//2、处理边界
				if(this.ord>this.imgs.length-1){
					this.ord=0;
				}			
				//3、改变外观；
				this.changeUI(outord,this.ord);
			},this.timespace);
	};

	
	//功能：给定出的序号和进的序号，完成两张图片的淡入淡出效果
	this.changeUI=function(outord,inord){
		let currOpacity = 1;
		let incOpacity = -0.1;
		
		let imgs = this.boxDom.children; //document.getElementsByTagName("img");
		
		let myTimer = setInterval(function(){
			//1、改变数据
			currOpacity=currOpacity+incOpacity;//0.1
			//2、数据合法性的判断（边界）
			if(currOpacity<=0){  //
				window.clearInterval(myTimer);
			}
			//3、改变外观
			imgs[outord].style.opacity = currOpacity;	
			imgs[inord].style.opacity = 1-currOpacity;			
		},200);
				
		//2)、改变豆豆的背景颜色。
		let lis = this.boxDom.lastElementChild.children;
		//把所有的按钮变成橙色（初始颜色）
		for(let i=0;i<lis.length;i++){
			lis[i].style.backgroundColor = this.btnColor;
		}
		//把当前的变成红色
		lis[inord].style.backgroundColor=this.btnHighColor;
	};
	
	

	//3、跳转到指定的图片上
	this.goImg=function(transOrd){//0
		outord = this.ord;//ord改变之前的ord就是要出去的ord
		//1、改变序号（把当前图片序号ord的值改为跳转的图片序号；）
		this.ord = transOrd;
		//2、改变外观
		this.changeUI(outord,this.ord);
	};
	
}

田江

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript_面向对象_轮播图（淡入淡出）没有使用prototype

解释： 1、该轮播图的切换效果是淡入淡出 2、该轮播图还没有使用prototype属性，只是把对象所有的方法（函数）放到了构造函数里，后期讲到prototype时，再补上效果图：思路示意图：代码：1)、HTML代码 *{ margin:0; padding:0;
复制链接

扫一扫