详解原生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函数，当鼠标移入图片时，就停止，当鼠标移出图片时就调用，实现起来非常简单，有兴趣的可以试试