jsp页面中实现图片切换显示

今天遇到一个需求，要求要在页面实现一张或多张图片的显示，如果为多张图片时要实现图片切换，于是自己就写了。但是在写的时候发现如果有多个容器都有这个需求的时就很容易造成id冲突（就是在多个div中了），于是自己便封装了一下代码，发现这个代码到处都可以用，所以就想分析一下。

具体代码如下：

//使用方式：
/*1，在需要显示图片的jsp页面引入
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ request.getContextPath() + "/";
%>
<script id="script1" type="text/javascript" src="<%=basePath%>/dist/js/picture.js" basePath=<%=basePath%>></script>
2,在需要展示图片的地方使用以下代码，传入图片地址即可，如果有多个图片，则用“|”隔开。
<a href="#" onclick='showPictures("图片地址","区别页面的标示")'>查看</a>
*/
var basePath = document.getElementById('script1').getAttribute('basePath');
var flieNameArr="";
var flieNameConut=0;

	//显示多张图片（也可以用于单张图片展示），需要在显示图片的页面加入以下代码。
	//注：page是用于区分页面的，主要是为了避免id重复。
	//一定要注意的是，在以下代码代码中id的最后一个单纯一定要统一（最后一个”_“之后的单纯要保存一直）。
    //如果id=show_picture_second那么page就为second，主要是避免不同容器中的id重复。
	//如下代码，page则为index
	/*
	<div class="layer-wrap none" id="show_picture_index">
		<i class=" glyphicon glyphicon-remove btn-close"
			onclick="reviewWarnHidePicture('index')"></i> <img
			class="img-responsive center-block" src="" />
		<p id="failDetail" style="font-size: 14px;"
			class="tips-info c_red none">操作结果</p>
		<div class="btn-wrap">
			<button type="button" class="btn btn-primary warn_btn"
				onclick="reviewWarnHidePicture('index')">关闭</button>
			<button type="button" class="btn btn-primary warn_btn none"
				id="nextPicture_index" onclick="nextPicture('index')">下一张</button>
		</div>
	</div>
	*/
	//一张或多张图片展示
	function showPictures(fileNames,page){
		//增加遮罩
		 maskShow();
		//本地测试
		var xx="E:\\picture\\1.jpg|E:\\picture\\2.jpg|E:\\picture\\3.jpg"; 
		flieNameArr=fileNames.split("|");
		var iscontain = fileNames.indexOf("暂无")==-1?false:true;
		if(iscontain){//如果没有图片，则显示默认图片
			$("#nextPicture_"+page).hide();
			$("#show_picture_"+page+" img").attr("src","./images/zanwu.jpg");
			/*$("#show_picture p").text("暂无图片显示");*/
			/*$("#show_picture p").show();*/
			$("#show_picture_"+page).show();
			return ;
		}	
		//如果有多张图片，则切换显示
		if(flieNameArr.length>0){
			$("#nextPicture_"+page).show();
		}
		var file=flieNameArr[0];//初始化图片显示第一张
		url=basePath+'/getFile.do?fileName='+file;
		$("#show_picture_"+page+" img").attr("src",url);
		$("#show_picture_"+page).show();
	}
	//一张或多张图片展示
	function nextShowPicture(nextFile,page){
		maskShow();
		var fileName=flieNameArr[nextFile];
		url=basePath+'/getFile.do?fileName='+fileName;
		$("#show_picture_"+page+" img").attr("src",url);
		$("#show_picture_"+page).show();
	}
	function reviewWarnHidePicture(page){
		maskHide();
		$("#show_picture_"+page).hide();
	}
	function nextPicture(page){
		flieNameConut++;
		if(flieNameConut==flieNameArr.length){
			flieNameConut=0;
		}
		nextShowPicture(flieNameConut,page)
	}
	
	
	
	
	
	
	
	

注：其中“<%=basePath%>/dist/js/picture.js”为保存此代码的文件与文件路径。。。。。。