===============================================jsp页面的代码========================================================: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="/struts-tags" prefix="s"%> <%@ page contentType="text/html;charset=gb2312"%> <%@ taglib uri="/page" prefix="page"%> <%@taglib prefix="banner" uri="/banner"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>详细页面介绍</title> <link type="text/css" rel="stylesheet" href="../../css/wp_global.css" /> <link type="text/css" rel="stylesheet" href="../../css/wp_index.css" /> <link type="text/css" rel="stylesheet"href="../../css/wp_whither_details.css" /> <link href="../../css/Supply.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../..js/prototype_to_ajax.js"></script> <script type="text/javascript" src="../../js/verify.js"></script> <script type="text/javascript" src="../../js/jquery-1.4.2.min.js"></script> <script language="javascript"> var kf_nid = 0; //显示出来的最左边的图片ID var kf_tid = 0; //最后一张图片的ID var wj_nid = 0; //显示出来的最左边的图片ID var wj_tid = 0; //最后一张图片的ID $(function(){ /************************************************/ //外景图 var wj_imgNum=document.getElementById("wj_hid").value; wj_tid=wj_imgNum-1; for(var i=0;i<=wj_tid;i++) { if(i>4) { $("#wj_lid_"+i).css("display","none"); } } $('#wj_lid_0').addClass('current');//将第一张图片设置为显示的大图 $("#wj_rightBtn").click(function(){ //alert(wj_nid); if(wj_nid<(wj_tid-4)) //当nid为倒数第5张图片的ID时,nid不再增长 { wj_nid=wj_nid+5; for(var i=0;i<wj_nid;i++) { $("#wj_lid_"+i).css("display","none"); } } var wj_tt1=wj_nid-5+5; var wj_tt2=wj_nid-5+5+5; for(var i=wj_tt1;i<wj_tt2;i++) { $("#wj_lid_"+i).css("display","block"); } }); $("#wj_leftBtn").click(function(){ // alert(wj_nid); wj_nid=wj_nid-5; if(wj_nid<0) { wj_nid=0; } for(var j=wj_tid;j>=wj_nid+5;j--) //6最后一张图片 { $("#wj_lid_"+j).css("display","none"); } for(var k=wj_nid;k<wj_nid+5;k++) { $("#wj_lid_"+k).css("display","block"); } for(var m=0;m<wj_nid;m++) { $("#wj_lid_"+m).css("display","none"); } }); $("#wj div ul li a img").bind("mouseover",function(){ $(".current").removeClass("current"); $(this).parents("a:first").parents("li:first").addClass("current");//获取父节点li的ID,并将当前的图片的Class设置为current var spath=$(this).attr("src"); var title=$(this).attr("title"); $("#wj_imid").attr("src",spath) $("#wj_imid").attr("title",title); var wj_imageId=$(this).parents("a:first").parents("li:first").attr("id"); var wj_imageId1=$("#"+wj_imageId+"_imageId").val();//图片ID var jingdianId=$("#scenicId").val();//景点ID $("#wj_imageId").val(wj_imageId1); var title=$(this).attr("title"); $("#wj_imageId").attr("title",title); var wj_imageName=$(this).attr('title'); $("#wj_imageName").val(wj_imageName); $("#wj_image_name").empty().html("<span id='s_wj_img_name' οnclick='ck_wj_image_name()'> "+wj_imageName+"</span>"); }); }); </script> </head> <body> <jsp:include page="../../head.jsp"></jsp:include> <input type="hidden" id="scenicId" name="scenicId" value="<s:property value="destinationScenic.scenicId" />"/> <div class="see_hotel_picbox"> <!-- 景点更多图 --> <div id="wj" style="display: block"> <div class="see_hotel_pic_infobox" style="margin-bottom: 10px;"> <div class="see_hotel_pic_infobox_l" style="width: 70%"> <s:iterator var="vo" value="destinationScenic.destinationPictures" status="sta"> <s:if test="#sta.index==0"> <img id="wj_imid" src="/<s:property value="filePath" />" width="630" height="420" border="1"/> </s:if> </s:iterator> </div> <div class="see_hotel_pic_infobox_r02"> <ul><s:iterator var="vo" value="destinationScenic.destinationPictures" status="sta"> <li id="wj_lid_${sta.index}"> <a href="#"><img src="/<s:property value="filePath" />" width="160" height="72"/></a> <input type="hidden" id="wj_lid_${sta.index}_imageId" name="wj_lid_${sta.index}_imageId" value="<s:property value="picId" />"/> <input type="hidden" id="wj_lid_${sta.index}_jingdianId" name="wj_lid_${sta.index}_jingdianId" value="<s:property value="picId" />"/> </li> </s:iterator> </ul> <div class="see_hotel_scroll_pic02"> <ul> <input type="hidden" id="wj_hid" value="${size}" /> <li class="scroll_btn"><img src="<%=path%>/images/li_leftBtn.jpg" id="wj_leftBtn" style="cursor:pointer;" border="0" height="28px" width="45px"/></li> <li class="scroll_btn"><img src="<%=path%>/images/li_rightBtn.jpg" id="wj_rightBtn" style="cursor:pointer;" border="0" height="28px" width="45px"/></li> </ul> </div> </div> </div> </div> <!-- 外景图 --> </div> <div id="wp_footer"> <div class="footer_content"> <ul> <li> <div class="footer_box_tit">百宝箱</div> <table class="tab_box01"> <tr> <td><a href="#">列车时刻表</a></td> <td><a href="#">汽车时刻表</a></td> </tr> <tr> <td><a href="#">公交查询</a></td> <td><a href="#">地铁线路</a></td> </tr> <tr> <td><a href="#">万年历查询</a></td> <td><a href="#">实时汇率查询</a></td> </tr> <tr> <td><a href="#">天气预报</a></td> <td><a href="#">各地车牌查询</a></td> </tr> <tr> <td><a href="#">邮编查询</a></td> <td><a href="#">区号查询</a></td> </tr> </table> </li> <li> <div class="footer_box_tit">移动APP</div> <table class="tab_box02"> <tr> <td><a href="#">智慧景区</a></td> <td><a href="#">旅行管家</a></td> </tr> <tr> <td><a href="#">智慧玩乐</a></td> <td><a href="#">地铁线路</a></td> </tr> <tr> <td><a href="#">万年历查询</a></td> <td><a href="#">实时汇率查询</a></td> </tr> </table> </li> <li> <div class="footer_box_tit">娱乐应用</div> <table class="tab_box03"> <tr> <td><a href="#">逐鹿中原</a></td> <td><a href="#">麦鲁小城</a></td><