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> <imgclass="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”为保存此代码的文件与文件路径。。。。。。

jsp页面中实现图片切换显示相关推荐

怎么在html页面中加入图片不显示,html – 如何在网页上显示本地图片？
您可以使用FileReader.readAsDataURL()轻松地执行此操作.用户选择图像,您可以显示它,而无需上传它. 这是代码: function previewFile() { // Wher ...
java错误页面显示错误信息_Struts2在JSP页面中显示错误信息和提示信息的方法
Struts2在JSP页面中显示错误信息和提示信息的方法主要有以下四种. 注意:以下四种方法均需要使Action类继承ActionSupport类. 一.域级错误信息 ①重写Action中的valid ...
spring mvc项目中，在jsp页面中输入中文时，提交到student.jsp页面后，结果显示中文乱码
在jsp页面中输入中文时,提交到student.jsp页面后,结果显示中文乱码下面是相关代码截图表单代码: 控制器类代码: springmvc配置文件代码: 用于显示的jsp页面: 修改之前的we ...
jsp逐行打印mysql查询表格,jsp页面怎么写循环语句显示数据库中所有数据到网页表格中...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServ ...
JSP页面中常用四种标签
JSP页面常用四种标签: 1. EL表达式: ${} 2. jstl表达式(sun apache): <%@ taglib prefix="c" uri="htt ...
javaWeb-百斯特电子商城-在jsp页面中侧边栏点击，右边进行变化（java实现）（持续完善）
(javaWeb-百斯特电子商城-在jsp页面中侧边栏点击,右边进行变化(java实现)(持续完善) 1.问题描述: 2.开发环境:+解决思想+建议+注意 3.问题解决 3.1项目结构 3.资源下载( ...
JSP页面中验证码的调用方法
步骤: 1.首先是要生成验证码 2.对验证码类进行调用:主要实现的是将验证码图片输出到response.getOutputStream()这个输出流中调用时,可以在页面调用,也可以在serv ...
《淘宝店铺经营管理一册通》一一1.3　页面中的图片应用
本节书摘来自异步社区出版社<淘宝店铺经营管理一册通>一书中的第1章,第1.3节,作者: 葛存山,更多章节内容可以访问云栖社区"异步社区"公众号查看. 1.3 页面中的图 ...
向窗体中拖放图片并显示
Frm_Main.cs View Code 1 using System; 2 using System.Collections.Generic; 3 using System.ComponentMo ...

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

jsp页面中实现图片切换显示相关推荐

最新文章

热门文章