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

曾经终败给现在 2022-05-20 10:26 259阅读 0赞

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

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>手动切换图片</title>
    <style type="text/css">
    	.imageStyle{width: 400px;height: 300px;background-repeat: no-repeat;list-style-type: none;}
    	.switchStyle{float: left;height: 300px;line-height: 300px;background-color: gray;color: white;cursor: pointer;}
    </style>
    <script type="text/javascript">
    	var showNo = 0;	//当前显示图片在数组中下标
    	
    	function showByIndex(dir){
    		var imageShow = document.getElementById("imageShow");
    		var images = imageShow.getElementsByTagName("div");
    		if(dir==0){	//dir为0，显示当前图片前面的图片，否则显示当前图片后面的图片
    			showNo=showNo+images.length-1;	//因为负数取余的逻辑是绝对值取余之后再取相反数。比如5%3=2；-5%3=-2，而实际上应该为1
    		}else{
    			showNo=showNo+1;
    		}
    		showNo=showNo%(images.length);
    		for(var i=0;i<images.length;i++){
    			if(showNo==i){
    				images[i].style.display='block';
    			}else{
    				images[i].style.display='none';
    			}
    		}
    	}
    </script>
    </head>
    <body>
    	<div style="left: 100px;top: 50px;position: absolute;">
    		<div id="leftDiv" class="switchStyle" onclick="showByIndex(0)">《</div>
    		<div id="showDiv" style="float: left;">
    			<div id="imageShow">
    				<div class="imageStyle" style="background-image: url('images/psbCAMVXF5F.jpg');display: block;"></div>
    				<div class="imageStyle" style="background-image: url('images/psbCAQUOM5Z.jpg');display: none;"></div>
    				<div class="imageStyle" style="background-image: url('images/psbCAT61K9Y.jpg');display: none;"></div>
    			</div>
    		</div>
    		<div id="rightDiv" class="switchStyle" onclick="showByIndex(1)">》</div>
    	</div>
    </body>
    </html>

样式图：

![70][]

具体讲解部分：

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

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，记得将样式中的高度调成和图片的高度一致。然后就可以运行了，期待效果吧！

[70]: /images/20220520/e0cf27eb5a014c9d9622a9995e8e373e.png