原生js(JavaScript)实现手动切换图片效果

手动切换图片只是实现了功能，并没有对页面样式做很好的优化。因为现在只是讲解这个图片切换的功能，没有必要花太多的时间和精力在界面优化上面。下面先把代码和样式图奉上再进行讲解。

代码：

	

		
《
		

			

				

				

				

			
		
		
》
	

样式图：

具体讲解部分：

这个功能的实现逻辑也很简单，下面分三步进行讲解。

1、首先是获取id为imageShow下面的所有div（每个div都是一张图片），注意这里使用div的原因是div简单，而且好布局，实际应用中什么可以显示图片的元素都可以。只要把imageShow.getElementsByTagName("div")里面的参数变成对应的元素就好了。这样取到了所有需要展示的图片并放到了images这个数组中。

2、然后我们定义了一个变量showNo用来控制数组中对应下标的图片进行展示。图片区域左右两边的div都调用了同一个方法showByIndex。它们的区别就是参数不同，左边的div点击1次让showNo减1，右边的div点击1次让showNo加1。

3、最后循环遍历images数组，如果下标等于showNo就显示，否则就隐藏。这样功能就算实现了。

不过在应用中发现了一个问题。js的取余方法%正数取余是正确的，负数的取余会是一个负数。如果取一个数组的负数下标是很危险的，所以为了保证showNo的取余没问题，我们加了一个images的长度再取余，防止showNo为0时减1导致去取下标为负数的bug。然后图片随便找几个把背景换了就可以了，为了不错乱，三张图片高度要一致，如果高度不是300px，记得将样式中的高度调成和图片的高度一致。然后就可以运行了，期待效果吧！