图片轮播且可以实现5张翻页


===============================================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><

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值