详解原生JS根据图片多少自动生成相册_实现焦点或按钮切换图片

此相册实现淡入淡出的效果。

这里是源代码，代码有很多注释，有兴趣的可以看看：

https://github.com/LoisLuo/CarouselFigure.git

相册功能：

1.焦点切换图片

2.按钮切换图片

在写代码之前要明白实现上诉功能的具体思路是什么。

1.实现淡入淡出，就要求图片都是在一个位置，只不过所在的z-index不同而已。

2.我们通过改变classname来控制图片的显示。

3.用焦点切换图片，就要在焦点生成的时候给他加上属性，存储数据，在点击焦点的时候传入对应的索引值切换图片。

4.我们写一个函数goIndex，在每次触发点击事件的时候，传入要显示的图片的索引值。

我们通过传入图片的地址来自动生成相册，这让我们的相册有了更多的扩展性。

以下是主要js代码详解：

//触发点击事件时调用goIndex
	this.goIndex=function(index){
		
		this.photos[this.prevIndex].className="photo_item";
		
		this.prevIndex=this.activeIndex;
		this.activeIndex=index;
		//通过控制classname来控制图片显示
		this.photos[this.prevIndex].className="photo_item prev";
		this.photos[this.activeIndex].className="photo_item active";//当前显示的图片
		
		this.points[this.prevIndex].className="point";
		this.points[this.activeIndex].className="point active";//当前显示图片对应的焦点
	};
	//点击左按钮
	this.btnLeft=function(){
		//当点击左按钮时，判断当前显示的序列，
		//如果当前序列>0,就表示还没有到最左边，goIndex传入当前序列-1
		//否则goIndex就传入最后一张图片的序列（即图片数组长度-1）
		if(this.activeIndex>0){
			this.goIndex(this.activeIndex-1);
		}else{
			this.goIndex(this.photos.length-1);
		}
	};
	//点击右按钮
	this.btnRight=function(){
		if(this.activeIndex<this.photos.length-1){
			this.goIndex(this.activeIndex+1);
		}else{
			this.goIndex(0);
		}
	};
	
	this.pointClick=function(e){
		//点击焦点需要传入焦点的序列
		this.goIndex(parseInt(e.target.getAttribute("data-index")));
	};

若是你希望加上自动轮播效果，可以写个定时器，每隔几秒调用btnRight函数，当鼠标移入图片时，就停止，当鼠标移出图片时就调用，实现起来非常简单，有兴趣的可以试试