js日常：用js构造一个轮播器的思考

用js构造一个轮播器的思考

最近用纯js编写了一个轮播器，期间遇到了很多问题，由此记录下这篇文章。

一．轮播器结构设计

轮播器就是一个用于承载图片并实现图片动态滚动效果的模块，首先县分析一下其基本组成结构：一个容器(我用的是div块)+图片容器(img)+轮播器图片信息与操作栏(一个div模块，然后其中放置一个span用于描述图片信息+一个图片列表项ul)。结构图如下：

 

二．轮播器的实现过程

首先，我们要想的是我们在实现轮播器功能块时，需要涉及到的一些基本操作：

1.动画操作：比如说透明度渐变，节点元素块的移动操作等等；

2.修改innerHTML值：图片信息的修改，切换到不同图片时切换相应的图片信息；

3.修改颜色值：比如我们选中某一图片列表项，其所对应的模块项颜色改变以标识当前选中图片，同时我们切换到哪张图片就要使相应列表项中模块项颜色改变；

4.获取当前选中图片序号：当我们选中某一图片列表项，我们需要获取该列表项在列表中的序号，该序号即是选中图片的序号，我们需要获取它；

5.获取选中图片：我们在用document.getElementByTagName获取图片模块集，这时我们通过获取到的列序号获取相应的图片进行相应的的效果显示；

6.获取前一图片序号：显示某一图片时，我们要将前面显示的那张图片消掉，这时便要前一张图片的序号；

 

其次，就是如何实现的问题了：这里我们可以分两块，一块就是我们手动选择显示的图片，另外一块就是通过定时器进行轮播器的定时效果动作。

手动选择轮播：我们这里通过hover事件(鼠标的移入移出)来做，即通过悬停来选择图片，如图：

 

当我们选中一张图时，显示这张图，其相应列表项颜色改变(上面这张图上是颜色变深)，相应的图片信息模块显示相应的信息，同时隐藏前一张图。

我们可以这样表示：

给列表项绑定一个hover事件(两个事件——mouseover和mouseout)：

1.mouseover:function(){

显示选中图片；

隐藏前张图片；

切换相应图片信息；

选中列表项颜色变深，即图中●的颜色由浅变深，同时前一列表项●颜色变浅；

记录下当前图片的序列号为下一切换图片的前一张图片序列号；

}

2.mouseout:function(){

暂且无操作；
}

其中不乏出现某些难点，比如说如何确定前一张图片的序列号值，一开始的时候可能觉得上述的构思很清晰应该没什么问题，但始终还是有些矛盾的地方的——这里举一个特例：假如有三张图片，我们初始为图片一，当我们将鼠标从图片一瞬间滑动到图片二三，也就是说图片二三几乎是同时触发了事件，按照上述的构思，其实图片二三都可能将图片一当作是其上一张图，而实际上，图一是图二的上一张图，图二是图三的上一张图，这样也就导致了图三的上一张图序号获取错误，而本该在图三显示同时隐藏的图二并没有被隐藏，这样必定会出现错误的。

 

之后，为了解决这个问题而绞劲脑汁，不过感觉有点代码冗余了：

if((temp_cur==0&&pre_index==2)||(temp_cur==2&&pre_index==0)){}

else{}

这里我分了两种情况就是为了错开上面那种情况，temp_cur为余部变量，每次触发事件各自对应的图片序号，而pre_index则是一个全局变量，记录上一张图片的序号。我们知道上面上一个例子中出问题的的是图片三，我们触发事件使图片三显示时，隐藏的上一张图片却是图片一，实际上是图片二，而假如我们一个一个选的话(即鼠标从左往右一步一步选定)时，这是没有问题的，故而，对于上面的图三也就是“if((temp_cur==0&&pre_index==2)||(temp_cur==2&&pre_index==0)){}”的情况我们需要将除当前选定图片之外的的图片全部图片隐藏。

或者，解决上面的问题很简单，直接在切换图片时隐藏其他的图片，这时也就没有上一张图片的概念，不过这样的话冗余不说，也影响了轮播效果(比如说，我们切换图片时是建立在上一张图片的基础上，上一张图淡出，而当前图慢慢显现，当然强迫如我这样的人不会这样做，感觉太low了)。

之后，我又看了一下B站的轮播，发现它手动选择图片是通过点击来实现的，想想确实能够解决问题，而且只要我的鼠标悬停在图片列表项上，那么自动轮播则会停止，想想这样确实挺好的。当然这篇文章里还是沿用我们我们开始的想法。、

 

解决上面的问题，现在就是自动轮播了：

上面已经实现了基本的功能，这里只要添加计时器就可以了：

初始化时启用计时器：var banner_timer=setInterval(autoBanner,2000);

1.mouseover:function(){

current_index=当前选定图片序列；

取消定时器：clearInterval(banner_timer)；

操作；

}

2.mouseout:function(){

重启定时器；

}

当然自动轮播器需要另外封装一个函数——autoBanner，即上面添加定时器的bannerautoBanner

autoBanner(){

if(current_index>2)current_index=0;//current_index和上面的pre_index一样都是全局变量用来存取当前图片序列号

if(current_index!=pre_index){

基本操作；

pre_index=current_index;

current_index++;

}

else{

current_index++;

}
}

 

三．轮播器的扩展

之前我们已经实现了基本的手动选定和自动轮播，我们也可以扩展一些功能，比如说设置轮播滚动模式，1表示渐变，2表示滚动，滚动还可以细分为水平滚动和垂直滚动。

 

四．番外

我发现B站的轮播器是水平滚动的，其实也就是几张图片水平连接在一起，而轮播器则设置“overflow:hidden”样式，这样实现轮播功能也就是图片的来回滚动而已。

另外，我上面的构思复杂化了，其实可以简化很多，只要在hover操作中把current_index的设置放在其中的moveout里面就行了：

1.mouseover:function(){

取消定时器：clearInterval(banner_timer)；

操作(其中的pre_index用current_index-1代替)；

}

2.mouseout:function(){

current_index=当前图片序列-1;

重启定时器；

}

在单单手动轮播中则是：

1.mouseover:function(){

显示选中图片；

隐藏前张图片(前张图片的序列号即current_index-1)；

切换相应图片信息；

选中列表项颜色变深，即图中●的颜色由浅变深，同时前一列表项●颜色变浅；

}

2.mouseout:function(){

记录current_index=当前选中图片序列号+1；

}