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

最新推荐文章于 2025-11-23 15:13:37 发布
原创 最新推荐文章于 2025-11-23 15:13:37 发布 · 6.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

这是一个基于JavaScript的图片轮播代码示例，具备分页功能，可以在网页上展示多个图片并进行左右切换。代码中使用了jQuery库，通过点击左右按钮实现图片的动态加载和显示，同时在鼠标悬停时改变了被选中图片的样式。


===============================================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' onclick='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>
</tr>
<tr>
<td><a href="#">萌江湖</a></td>
<td><a href="#">找你妹</a></td>
</tr>
<tr>
<td><a href="#">我叫MT</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 style="margin-right: 0;">
<div class="footer_box_tit">关于我们</div>
<table class="tab_box04">
<tr>
<td><a href="#">招商与合作</a></td>
</tr>
<tr>
<td><a href="#">意见反馈</a></td>
</tr>
<tr>
<td><a href="#">关于蚂蚁窝</a></td>
</tr>
<tr>
<td><a href="#">隐私原则</a></td>
</tr>
<tr>
<td><a href="#">网站地图</a></td>
</tr>
</table>
</li>
</ul>
</div>
</div>
</body>
</html>


===============================================Supply.css===============================================================

/*----------------------全局样式------------------------*/
*{margin:0;padding:0;}
body {background:#FFF;margin:0;padding:0;font-size:12px;}
/*查看图片20110810*/
.see_hotel_picbox{width:870px;margin:10px auto;}
.see_hotel_pic_nav{overflow:hidden;}
.see_hotel_pic_nav li{background:url(../images/see_hotel_pic_bj.gif);height:23px;line-height:23px;border:1px solid #ccc;float:left;padding:0 10px;margin-right:-1px;}
.see_hotel_pic_nav li a{color:#666;}
.see_hotel_pic_nav li.curr{background:url(../images/see_hotel_pic_bj.gif) 0 -23px;font-weight:bold;}
.see_hotel_pic_infobox{overflow:hidden;height:500px;border:1px solid #ccc;margin-top:10px; }
.see_hotel_pic_infobox_l{float:left;width:650px;padding:25px;}
.see_hotel_pic_infobox_r{width:86px;height:345px;float:left;border-left:1px solid #ccc;padding:0 10px;}
.see_hotel_pic_infobox_r li{line-height:24px;}
.see_hotel_pic_infobox_r li a{color:#666;}
.see_hotel_pic_infobox_r li.curr{font-weight:bold;}
.see_hotel_scroll_pic{overflow:hidden;margin-top:10px;}
.see_hotel_scroll_pic li{float:left;margin-right:10px;padding:9px 3px 0 3px;}
.see_hotel_scroll_pic li.current{padding:9px 3px 0 3px;}
.see_hotel_scroll_pic li.scroll_btn{background:none;}
.see_hotel_scroll_pic li.scroll_btn .l{background:url(../images/scroll_pic2.gif);display:block;width:30px;height:60px;}
.see_hotel_scroll_pic li.scroll_btn .r{background:url(../images/scroll_pic2.gif) 0 -60px;display:block;width:30px;height:60px;}
.see_hotel_scroll_pic li img{width:78px;height:58px;border:none;padding:0;border:1px solid #ccc;}
/*第二种展示方式*/
.see_hotel_pic_infobox_r02{width:150px;height:480px;float:left;border-left:1px solid #ccc;padding:10px 10px 10px 14px;}
.see_hotel_pic_infobox_r02 li img{overflow:hidden;margin-bottom:10px;float:left;border:1px solid #ccc;}
.see_hotel_pic_infobox_r02 li a:hover img{border:1px solid #ff0000;}
.see_hotel_scroll_pic02{float:right;width:100px;overflow:hidden;margin-top:10px;}
.see_hotel_scroll_pic02 li{float:left;}
.see_hotel_scroll_pic02 li.scroll_btn{background:none;}
.see_hotel_scroll_pic02 li.scroll_btn .l{background:url(../images/scroll_pic3.gif);display:block;width:40px;height:30px;}
.see_hotel_scroll_pic02 li.scroll_btn .r{background:url(../images/scroll_pic3.gif) 0 -30px;display:block;width:40px;height:30px;}




=============================================verify.js=====================================================

//****************VARIABLE DESCRIPTION*******************//
// s=??????
// label_name = ??????????
// allow_len = ????????
// field_name = ???????? (document.formname.field)


//*************************************FUNCTION INCLUDED***************************************//


//chkLen(field_name, allow_len, label_name)              //??????????????,??????2??????    [????]
//chkLen(field_name, allow_len, label_name,defaultEmpty) //??????????????,???????????????? [????]
//chkEmail(field_name,label_name)       //????E_mail       [????]
//chkNum(field_name,label_name)       //??????????(0-9)
//chkCharNum(field_name,label_name)       //??????????(0-9a-zA-Z)
//chkPhone(field_name,label_name)                 //????????(0000-0000-0000)
//chkPostCode(field_name,label_name)       //????????
//chkInteger(field_name,label_name)       //??????????
//chkWhiteSpace(field_name,label_name)      //????????
//chkFloat(field_name,allow_len,dec,label_name,allow_zero)   //??????????
//function chkSelect(field_name,label_name)                       //??????????
//isFloatLength (s,label_name,allow_len, dec,floatErrMes)
//??dec???????????????? allow_zero=??????????????
//isFloatLength (s,label_name,allow_len, dec,floatErrMes)


//******************FUNCTION HEADER**********************//
//******************FUNCTION HEADER**********************//


// BOI, followed by one or more digits, followed by EOI.
var reInteger = /^\d+$/


// BOI, followed by one or more whitespace characters, followed by EOI.
var reWhitespace = /^\s+$/


// decimal point character differs by language and culture
var decimalPointDelimiter = "."


// field bgcolor
var fieldbg="#D0D0D0";


//*****************FUNCTION MAIN**************************//


function trim(s) {
var tempStr;
tempStr = s.replace(/\s+$/g,'');
tempStr = tempStr.replace(/^\s+/g,'');
return tempStr;
}


function isEmpty(s){ 
return ((s == null) || (trim(s).length == 0))
}


function isNum(s) {
    var str = /^[0-9]*$/;
    return (str.test(s));
}


function isCharNum(s) {
    var str = /^[0-9a-zA-Z]*$/;
return (str.test(s));
}


//is Integer? 
function isInteger (s)
{
var reInteger = /^\d+$/
if (!reInteger.test(s))return false;
  return true
}


function getTextLen(s) {
    var newlength=0;
    for(i=0;i<s.length;i++) {
       var chrInput;
       chrInput=escape(s.charAt(i));
       if(chrInput.length==6) newlength=newlength+2;
       else newlength=newlength+1;
    } //End for
    return newlength;
}




function chkSelect(field_name,label_name) {
    for ( i = 0; i < field_name.options.length; i++ ) {
       if ( field_name.options[i].selected )  {
      if (i==0) {
  field_name.focus();
     // field_name.style.background=fieldbg;
      alert ("请选择 " + label_name+" 。");
  return false;
  }
      else    
  return true; 
      break;
       }
    }
}


function chkLen(field_name, allow_len, label_name,defaultEmpty) {
        var s = field_name.value;
        if (typeof(defaultEmpty) == "undefined") defaultEmpty = true;
        if(isEmpty(s)) {
if (!defaultEmpty) {
              field_name.focus();
              field_name.style.background=fieldbg;
              alert ("请输入 " + label_name+" 。");
              return false;
       } else return true;
}
if (getTextLen(s) > allow_len) {
field_name.focus();
field_name.style.background=fieldbg;
alert(label_name + " 的长度不能大于 " + allow_len + " 字节，请重新输入！");
return false;
}
return true;
}


function chkEmail(field_name,label_name,defaultEmpty) {
        var s = field_name.value;
var str = /^[_\-\.0-9a-zA-Z-]+@([0-9a-zA-Z-]+\.)+[a-zA-Z]{2,3}$/;
if (typeof(defaultEmpty) == "undefined") defaultEmpty = true;
if(isEmpty(s)) {
if (!defaultEmpty) {
              field_name.focus();
              field_name.style.background=fieldbg;
              alert ("Please input " + label_name+" .");
              return false;
       } else return true;
}
if (!str.test(s))  {
           field_name.focus();
       field_name.style.background=fieldbg;
       alert(label_name+" input invalid,Please input right Email.");
       return false;
        }
return true;
}


function chkMoreEmail(field_name,label_name,defaultEmpty,seperator) {
var s = field_name.value;
var str = /^[_\-\.0-9a-zA-Z-]+@([0-9a-zA-Z-]+\.)+[a-zA-Z]{2,3}$/;
var ss=s.split(seperator);
var mail;
if (typeof(defaultEmpty) == "undefined") defaultEmpty = true;
if(isEmpty(s)) {
if (!defaultEmpty) {
              field_name.focus();
              field_name.style.background=fieldbg;
              alert ("Please input " + label_name+" .");
              return false;
       } else return true;
}
for( var i=0;i<ss.length;i++){
mail=ss[i];
if (!str.test(mail))  {
           field_name.focus();
       field_name.style.background=fieldbg;
       alert(label_name+" input invalid,Please input right Email.");
       return false;
        }
}
return true;
}


function chkNum(field_name,label_name,defaultEmpty) {
if (typeof(defaultEmpty) == "undefined") defaultEmpty = true;
        var s = field_name.value;
        if(isEmpty(s)) {
if (!defaultEmpty) {
              field_name.focus();
              field_name.style.background=fieldbg;
              alert ("Please input " + label_name+" .");
              return false;
       } else return true;
         }
         if (!isNum(s)) {
          field_name.focus();
       field_name.style.background=fieldbg;
       alert(label_name+" not valid,Please input Number!");
       return false;
         }
         return true;
}


function chkCharNum(field_name,label_name,defaultEmpty) {
    if (typeof(defaultEmpty) == "undefined") defaultEmpty = true;
    var s = field_name.value;
    if(isEmpty(s)) {
if (!defaultEmpty) {
              field_name.focus();
              field_name.style.background=fieldbg;
              alert ("Please input " + label_name+" .");
              return false;
       } else return true;
    }
    if (!isCharNum(s)) {
   field_name.focus();
   field_name.style.background=fieldbg;
   alert(label_name+" input invalid,Please input number or letter!");
   return false;
    }
    return true;
}


function chkPhone(field_name,label_name,defaultEmpty) {
    if (typeof(defaultEmpty) == "undefined") defaultEmpty = true;
    var s = field_name.value;
    var str=/^[0-9-;,]*$/;
    if(isEmpty(s)) {
if (!defaultEmpty) {
              field_name.focus();
              field_name.style.background=fieldbg;
              alert ("Please input " + label_name+" .");
              return false;
       } else return true;
    }
    if (!str.test(s)||s.length<10) {
   field_name.focus();
   field_name.style.background=fieldbg;
   alert(label_name+" invalid format,Please input right format!");
   return false;
    }
    return true;
}


function chkPostCode(field_name,label_name,defaultEmpty) {
    if (typeof(defaultEmpty) == "undefined") defaultEmpty = true;
    var s = field_name.value;
    if(isEmpty(s)) {
if (!defaultEmpty) {
              field_name.focus();
              field_name.style.background=fieldbg;
              alert ("请输入 " + label_name+" 。");
              return false;
       } else return true;
    }
    if(!isNum(s)||s.length!=6) {
         field_name.focus();
   field_name.style.background=fieldbg;
   alert(label_name+" input not valid!");
   return false; 
    }
    return true;    
}


function chkInteger(field_name,label_name,defaultEmpty) {
    if (typeof(defaultEmpty) == "undefined") defaultEmpty = true;
    var s = field_name.value;
    if(isEmpty(s)) {
if (!defaultEmpty) {
              field_name.focus();
              field_name.style.background=fieldbg;
              alert ("Please input " + label_name+" .");
              return false;
       } else return true;
    }
    if (!reInteger.test(s) || parseInt(s,10)==0) {
           field_name.focus();
field_name.style.background=fieldbg;
       alert ("Please at " + label_name+" input positive integer.");
       return false; 
    }
    return true; 
}


function chkWhiteSpace(field_name,label_name) { 
    var s = field_name.value;
    if (isEmpty(s) || reWhitespace.test(s)) {
field_name.focus();
field_name.style.background=fieldbg;
alert ("Please input " + label_name+" .");
    return false;
}
return true;
}


function chkFloat(field_name,allow_len,dec,label_name,allow_zero,defaultEmpty) {
    if (typeof(defaultEmpty) == "undefined") defaultEmpty = true;
    if (typeof(allow_zero) == "undefined") allow_zero = true;
    
    var s = field_name.value;
    var i;
    var floatErrMes = "";
    
    if(isEmpty(s)) {
if (!defaultEmpty) {
              field_name.focus();
              field_name.style.background=fieldbg;
              alert ("Please input " + label_name+" .");
              return false;
       } else return true;
    }
    
    for ( i=0; i<(allow_len-dec); i++) {
    floatErrMes += "9";
}
    floatErrMes +=".";
    for ( i=0; i<dec; i++) {
    floatErrMes += "9";
    }    
//check numeric
    if ( isFloatNaN(s,label_name)) {
   field_name.focus();
   field_name.style.background=fieldbg;
            return false;
    }
       
    s=s.toString();
    //check positive value
    if (s.charAt(0) == '-' || (!allow_zero && parseFloat(s) == 0)) {
             field_name.focus();
    field_name.style.background=fieldbg;
    alert("Please at " + label_name+" input positive integer!");
    return false;
    }    
    
    //check if the length of the number is correct
    if (!isFloatLength(s,label_name,allow_len,dec,floatErrMes)) {
field_name.focus();
field_name.style.background=fieldbg;
            return false;
    }
    // All characters are numbers.
    return true;
}


 function isFloatLength (s,label_name,allow_len, dec,floatErrMes) {
     var seenDecimalPoint = false;
     var posDecimalPoint;
     for (i = 0; i < s.length; i++) {   
        // Check that current character is number.
        var c = s.charAt(i); 
        if ((c == decimalPointDelimiter) && !seenDecimalPoint) {
        seenDecimalPoint = true;
        posDecimalPoint = i;
        }
     } //End For
    
     if (seenDecimalPoint == true) {
    if ((s.length - posDecimalPoint - 1) > dec || posDecimalPoint==(s.length-1)) { //right too long
    if (!isEmpty(label_name)) 
        alert("Please at "+label_name+" input number, "+dec+" decimal fraction.");
    return false;
    }
    else if (posDecimalPoint > (allow_len - dec)) { // left too long
    if (!isEmpty(label_name)) 
        alert("Attention "+label_name+" can't larger than "+floatErrMes+".");
    return false;
   
} //else
    } else if (s.length > allow_len - dec) { // left too long
    if (!isEmpty(label_name)) 
        alert("Attention "+label_name+" can't larger than "+floatErrMes+".");
    return false;
    
    } //else
    return true;    
 }    
 
 
//检测是否是Float
function f_check_float(obj,label_name)
{  
if (/^(\+|-)?\d+($|\.\d+$)/.test( obj.value )) 
{
  return true;
}
else{
  alert(label_name+"不正确，请输入正确的实数");
  obj.focus();
  obj.select();
  return false;
}
}


function f_check_double(obj,label_name,allowEmpty){
var num = Trim(obj.value);
if(num==''){
if(allowEmpty){
return true;
}else{
obj.focus();
obj.select();
alert(label_name+'不能为空');
return false;
}
}

    var numReg;   
    var value = obj.value;   
    var strValueTemp, strInt, strDec;      
    var dtype = obj.datatype;   
    var pos_dtype = dtype.substring(dtype.indexOf("(")+1,dtype.indexOf(")")).split(",");   
    var len = pos_dtype[0], prec = pos_dtype[1];   
    //alert(pos_dtype+":"+len+":"+prec)
    try  
    {        
   if (!/^(\+|-)?\d+($|\.\d+$)/.test( obj.value )) 
{
  alert('输入的'+label_name+"不正确");
  return false;
}  
        numReg =/[\-]/;   
        strValueTemp = value.replace(numReg, "");
        numReg =/[\+]/;
        strValueTemp = strValueTemp.replace(numReg, "");
        //整数   
        if(prec==0){   
            numReg =/[\.]/;
            if(numReg.test(value) == true){   
                alert(label_name+"输入必须为整数类型");   
                return false;      
            }              
        }
        if(strValueTemp.indexOf(".") < 0 ){   
            if(strValueTemp.length >( len - prec)){   
                alert(label_name+"整数位不能超过"+ (len - prec) +"位");   
                return false;   
            }          
        }else{   
            strInt = strValueTemp.substr( 0, strValueTemp.indexOf(".") );          
            if(strInt.length >( len - prec)){   
                alert(label_name+"整数位不能超过"+ (len - prec) +"位");   
                return false;   
            }   
            strDec = strValueTemp.substr( (strValueTemp.indexOf(".")+1), strValueTemp.length );    
            if(strDec.length > prec){   
                alert(label_name+"小数位不能超过"+  prec +"位");   
                return false;   
            }          
        }          
        return true;   
    }catch(e){   
        alert("in f_check_double = " + e);   
        return false;   
    }      
}


/*LTrim(string):去除左边的空格*/
function LTrim(str){
    var whitespace = new String(" \t\n\r");
    var s = new String(str);   


    if (whitespace.indexOf(s.charAt(0)) != -1){
        var j=0, i = s.length;
        while (j < i && whitespace.indexOf(s.charAt(j)) != -1){
            j++;
        }
        s = s.substring(j, i);
    }
    return s;
}
/*RTrim(string):去除右边的空格*/ 
function RTrim(str){
    var whitespace = new String(" \t\n\r");
    var s = new String(str);
 
    if (whitespace.indexOf(s.charAt(s.length-1)) != -1){
        var i = s.length - 1;
        while (i >= 0 && whitespace.indexOf(s.charAt(i)) != -1){
            i--;
        }
        s = s.substring(0, i+1);
    }
    return s;
}
/*Trim(string):去除字符串两边的空格*/ 
function Trim(str){
    return RTrim(LTrim(str));
}


/* 
功能：判断是否为日期(格式:yyyy年MM月dd日,yyyy-MM-dd,yyyy/MM/dd,yyyyMMdd) 
提示信息：未输入或输入的日期格式错误！ 
使用：f_check_date(obj) 
返回：bool 
*/
function f_check_date(obj,label_name,allowEmpty)
{
var date = Trim(obj.value);
if(date==''){
if(allowEmpty){
return true;
}else{
obj.focus();
obj.select();
alert(label_name+'不能为空');
return false;
}
}
var dtype = obj.datatype;
var format = dtype.substring(dtype.indexOf("(")+1,dtype.indexOf(")"));//日期格式
var year,month,day,datePat,matchArray;


if(/^(y{4})(-|\/)(M{1,2})\2(d{1,2})$/.test(format))
datePat = /^(\d{4})(-|\/)(\d{1,2})\2(\d{1,2})$/;
else if(/^(y{4})(年)(M{1,2})(月)(d{1,2})(日)$/.test(format))
datePat = /^(\d{4})年(\d{1,2})月(\d{1,2})日$/;
else if(format=="yyyyMMdd")
datePat = /^(\d{4})(\d{2})(\d{2})$/;
else
{
obj.focus();
obj.select();
alert(label_name+"日期格式不对");
return false;
}
matchArray = date.match(datePat);
if(matchArray == null) 
{
obj.focus();
obj.select();
alert(label_name+"日期长度不对,或日期中有非数字符号");
return false;
}
if(/^(y{4})(-|\/)(M{1,2})\2(d{1,2})$/.test(format))
{
year = matchArray[1];
month = matchArray[3];
day = matchArray[4];
} else
{
year = matchArray[1];
month = matchArray[2];
day = matchArray[3];
}
if (month < 1 || month > 12)
{  
obj.focus();
obj.select();
alert(label_name+"月份应该为1到12的整数");
return false;
}
if (day < 1 || day > 31)
{
obj.focus();
obj.select();
alert(label_name+"每个月的天数应该为1到31的整数");
return false;
}     
if ((month==4 || month==6 || month==9 || month==11) && day==31)
{
obj.focus();
obj.select();
alert(label_name+"该月不存在31号");
return false;
}     
if (month==2)
{
var isleap=(year % 4==0 && (year % 100 !=0 || year % 400==0));
if (day>29)
{
obj.focus();
obj.select();
alert(label_name+"2月最多有29天");
return false;
}
if ((day==29) && (!isleap))
{
obj.focus();
obj.select();
alert(label_name+"闰年2月才有29天");
return false;
}
}
return true;
}


//is numeric?
function isFloatNaN (s,label_name) {
if (isNaN(s)) {
  if (!isEmpty(label_name)) {
        alert("Please at "+label_name+" input number");
                }
           return true;
        } 
        return false;
}  


function isFileCharNum(s) {
    var str = /^[0-9a-zA-Z-;.; ;_]*$/;
return (str.test(s));
}


function chkFileChar(field_name,label_name,defaultEmpty){
   var s = field_name.value;
        if (typeof(defaultEmpty) == "undefined") defaultEmpty = true;
        if(isEmpty(s)) {
if (!defaultEmpty) {              
              alert ("Please input " + label_name+" .");
              return false;
       } else return true;
}
  var str = s.substring(s.lastIndexOf("\\")+1);
   if (!isFileCharNum(str)) {
    alert(label_name+" input invalid,Please input number or letter!");
   return false;
    } 
    return true;
}
function chkAlias(field_name,label_name,defaultEmpty) {
if (typeof(defaultEmpty) == "undefined") defaultEmpty = true;
        var s = field_name.value;
        if(isEmpty(s)) {
if (!defaultEmpty) {
              field_name.focus();
              field_name.style.background=fieldbg;
              alert ("Please input " + label_name+" .");
              return false;
       } else return true;
         }
         if (!isValid(s)) {
          field_name.focus();
       field_name.style.background=fieldbg;
       alert(label_name+" input invalid,Can not input x12345/xx12345/xxx12345.");
       return false;
         }
         return true;
}
function isValid(s){
if(s.length<=3) return false;
if(s.length>1){
var a=s.substring(0,1);
var b=s.substring(1);
if(isChar(a)&&isNum(b))return false;
}
if(s.length>2){
var a=s.substring(0,2);
var b=s.substring(2);
if(isChar(a)&&isNum(b)) return false;
}
if(s.length>3){
var a=s.substring(0,3);
var b=s.substring(3);
if(isChar(a)&&isNum(b)) return false;
}
if(isNum(s)) return false;
return true;
}

function isChar(s) {
   var str = /^[a-zA-Z]*$/;
return (str.test(s));
}
function chkBirthday(field_name,label_name,defaultEmpty) {
if (typeof(defaultEmpty) == "undefined") defaultEmpty = true;
        var s = field_name.value;
        if(isEmpty(s)) {
if (!defaultEmpty) {
              field_name.focus();
              field_name.style.background=fieldbg;
              alert ("Please input " + label_name+" .");
              return false;
       } else return true;
         }
         if (!isValidBirthday(s)) {
          field_name.focus();
       field_name.style.background=fieldbg;
       alert(label_name+" input invalid,Please input as yyyymmdd.");
       return false;
         }
         return true;
}
function isValidBirthday(s){
if(s.length!=8) return false;
if(!isNum(s)) return false;
var a=s.substring(4,6);
if(a>"12") return false;
var b=s.substring(6);
if(b>"31") return false;
return true;
}
function notInputChar(label_name,str){ 
var reg = /\'|\^/; 
var r = str.match(reg); 
if(r==null)
return true; //????????????
else
alert(label_name+"not include(' ^)");
return false;
} 
   
//=========add by zhengj
function checkFileNameChar(obj) {
var strlist = "~ ! @ # $ % ^ && * | ? : \" { } < > / \\";
var reg = /\~|\!|\@|\#|\$|\%|\^|\&\&|\*|\||\?|\:|\"|\{|\}|\<|\>|\/|\\/; 
var tempbool = true;
var _length = obj.value.lastIndexOf("\\");
var file_name = obj.value.substring(_length+1);
if(file_name!="") {
var r = file_name.match(reg);
if(r==null) {
tempbool = true;
} else {
tempbool = false;
alert("file name can not include \""+strlist+"\"");
}
} else {
tempbool = false;
alert("file name can not empty");
}
return tempbool;
}
function checkFileNameChar2(filename) {
var strlist = "~ ! @ # $ % ^ && * | ? : \" { } < > / \\";
var reg = /\~|\!|\@|\#|\$|\%|\^|\&\&|\*|\||\?|\:|\"|\{|\}|\<|\>|\/|\\/; 
var tempbool = true;
// var _length = obj.value.lastIndexOf("\\");
var file_name = filename;
if(file_name!="") {
var r = file_name.match(reg);
if(r==null) {
tempbool = true;
} else {
tempbool = false;
alert("file name can not include \""+strlist+"\"");
}
} else {
tempbool = false;
alert("file name can not empty");
}
return tempbool;
}
function checkSpecialChar(field_name,field_value) {
var strlist = "~ ! @ # $ % ^ && * | ? : \" { } < > / \\";
var reg = /\~|\!|\@|\#|\$|\%|\^|\&\&|\*|\||\?|\:|\"|\{|\}|\<|\>|\/|\\/; 
var tempbool = true;


var field_value = field_value;
if(field_value!="") {
var r = field_value.match(reg);
if(r==null) {
tempbool = true;
} else {
tempbool = false;
alert(field_name + " can not include \""+strlist+"\"");
}
}
return tempbool;
}
function chkValueLen(value, min_len, max_len, label_name,required){
if (required && getTextLen(value)==0){
alert("请输入" + label_name+".");
return false;
}
if (min_len == max_len) {
if (getTextLen(value) != min_len ){
alert(label_name + " length must equal " + min_len + ",Please reInput!");
return false;
}
}
else {
if (getTextLen(value) < min_len ){
alert(label_name + "长度小于" + min_len + ",请重新输入!");
return false;
}
if (getTextLen(value) > max_len ){
alert(label_name + "长度大于" + max_len + ",请重新输入!");
return false;
}
}
return true;
}


function checkInputTextLen(obj, min_len, max_len, label_name,required){
if(!chkValueLen(obj.value, min_len, max_len, label_name,required)){
obj.focus();
obj.select();
return false;
}
return true;
}


var com_CheckSubmitFlg1 = false; 
  function com_CheckSubmit1(form){ 
  if(com_CheckSubmitFlg1==true){
 alert('Do not re-submit unitl previous action was completed !');
    return false; 
   }
   com_CheckSubmitFlg1=true;
   form.submit();
   }


function isSubmit() {
    if(com_CheckSubmitFlg1 == true){
        alert('Do not re-submit unitl previous action was completed !');
        return false; 
    }
    return true;
}


function setSubmit(flag) {
if (flag == null) {
flag = true;
}
com_CheckSubmitFlg1 = flag;
}
//========end add
function Round(a_Num , a_Bit)
{
return( Math.round(a_Num * Math.pow (10 , a_Bit)) / Math.pow(10 , a_Bit)) ;
}




function ShowCenterDialog(url,windowName,iWidth,iHeight) {
var iTop=(window.screen.height-iHeight)/2;
var iLeft=(window.screen.width-iWidth)/2;
window.open(url,windowName,"Scrollbars=yes ,Toolbar=no,Location=no,Direction=no,resizable =yes, Width="+iWidth+" ,Height="+iHeight+",top="+iTop+",left="+iLeft); 
}
    
function ShowCenterModalDialog(url,windowName,iWidth,iHeight){
     var iTop=(window.screen.height-iHeight)/2;
     var iLeft=(window.screen.width-iWidth)/2;
     window.showModalDialog(url,windowName,"dialogHeight: "+iHeight+"px; dialogWidth: "+iWidth+"px;dialogTop: "+iTop+"; dialogLeft: "+iLeft+"; resizable: no; help:no ;status: no;scroll:no");
}
function ShowCenterModalDialogsale(url,windowName,iWidth,iHeight){
     var iTop=(window.screen.height-iHeight)/2;
     var iLeft=(window.screen.width-iWidth)/2;
     window.showModalDialog(url,windowName,"dialogHeight: "+iHeight+"px; dialogWidth: "+iWidth+"px;dialogTop: "+iTop+"; dialogLeft: "+iLeft+"; resizable: no; help:no ;status: no;scroll:yes");
}
function ShowCenterModalDialog1(url,windowName,iWidth,iHeight){
     var iTop=(window.screen.height-iHeight)/2;
     var iLeft=(window.screen.width-iWidth)/2;
     window.showModalDialog(url,windowName,"dialogHeight: "+iHeight+"px; dialogWidth: "+iWidth+"px;dialogTop: "+iTop+"; dialogLeft: "+iLeft+"; resizable: no; help:no ;status: no;scroll:yes ");
}


function ShowCenterDialogFeauter(url,windowName,iWidth,iHeight){
     var iTop=(window.screen.height-iHeight)/2;
     var iLeft=(window.screen.width-iWidth)/2;
     window.open(url,windowName,"Scrollbars=yes,Toolbar=no,Location=no,Direction=no,resizable=yes, Width="+iWidth+" ,Height="+iHeight+",top="+iTop+",left="+iLeft);
}


function disableButton(obj){
obj.disabled=true;
}
function readonlyInputText(obj){
obj.readOnly=true;
obj.style.backgroundColor="CCCCCC";
}
function disableSelect(obj){
obj.disabled=true;
}
/* 
功能：校验的格式为yyyy年MM月dd日HH时mm分ss秒,yyyy-MM-dd HH:mm:ss,yyyy/MM/dd HH:mm:ss,yyyyMMddHHmmss 
提示信息：未输入或输入的时间格式错误 
使用：f_check_time(obj) 
返回：bool 
*/ 
function f_check_time(obj,label_name,allowEmpty){   
    var time = Trim(obj.value);   
    if(time==''){
if(allowEmpty){
return true;
}else{
obj.focus();
obj.select();
alert(label_name+'不能为空');
return false;
}
}

    var dtype = obj.datatype;   
    var format = dtype.substring(dtype.indexOf("(")+1,dtype.indexOf(")"));  //日期格式   
    var datePat,matchArray,year,month,day,hour,minute,second;   
  
    if(/^(y{4})(-|\/)(M{1,2})\2(d{1,2}) (HH:mm:ss)$/.test(format))   
        datePat = /^(\d{4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;   
    else if(/^(y{4})(年)(M{1,2})(月)(d{1,2})(日)(HH时mm分ss秒)$/.test(format))   
        datePat = /^(\d{4})年(\d{1,2})月(\d{1,2})日(\d{1,2})时(\d{1,2})分(\d{1,2})秒$/;   
    else if(format == "yyyyMMddHHmmss")   
        datePat = /^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/;   
    else  
    {   
   obj.focus();
obj.select();
        alert(label_name+"日期格式不对");   
        return false;   
    }   
    matchArray = time.match(datePat);   
    if(matchArray == null)    
    {   
    obj.focus();
obj.select();
        alert(label_name+"日期长度不对,或日期中有非数字符号");   
        return false;   
    }   
    if(/^(y{4})(-|\/)(M{1,2})\2(d{1,2}) (HH:mm:ss)$/.test(format))   
    {   
        year = matchArray[1];   
        month = matchArray[3];   
        day = matchArray[4];   
        hour = matchArray[5];   
        minute = matchArray[6];   
        second = matchArray[7];   
    } else  
    {   
        year = matchArray[1];   
        month = matchArray[2];   
        day = matchArray[3];   
        hour = matchArray[4];   
        minute = matchArray[5];   
        second = matchArray[6];   
    }   
    if (month < 1 || month > 12)   
    {                
        obj.focus();
obj.select();
        alert(label_name+"月份应该为1到12的整数");   
        return false;   
    }   
    if (day < 1 || day > 31)   
    {              
        obj.focus();
obj.select();
        alert(label_name+"每个月的天数应该为1到31的整数");   
        return false;   
    }        
    if ((month==4 || month==6 || month==9 || month==11) && day==31)   
    {            
        obj.focus();
obj.select();
        alert(label_name+"该月不存在31号");   
        return false;   
    }        
    if (month==2)   
    {   
        var isleap=(year % 4==0 && (year % 100 !=0 || year % 400==0));   
        if (day>29)   
        {                  
            obj.focus();
obj.select();
            alert(label_name+"2月最多有29天");   
            return false;   
        }   
        if ((day==29) && (!isleap))   
        {                  
            obj.focus();
obj.select();
            alert(label_name+"闰年2月才有29天");   
            return false;   
        }   
    }   
    if(hour<0 || hour>23)   
    {   
        alert(label_name+"小时应该是0到23的整数");   
        return false;   
    }   
    if(minute<0 || minute>59)   
    {   
        obj.focus();
obj.select();
        alert(label_name+"分应该是0到59的整数");   
        return false;   
    }   
    if(second<0 || second>59)   
    {   
        obj.focus();
obj.select();
        alert(label_name+"秒应该是0到59的整数");   
        return false;   
    }   
    return true;   
}


function selectByOpenWindow(url,obj,iWidth,iHeight){
var iTop=(window.screen.height-iHeight)/2;
     var iLeft=(window.screen.width-iWidth)/2;
     window.showModalDialog(url,obj,"dialogHeight: "+iHeight+"px; dialogWidth: "+iWidth+"px;dialogTop: "+iTop+"; dialogLeft: "+iLeft+"; resizable: no; help:no ;status: no;scroll:yes");
}


function getNowDate(){
var now = new Date();
year=now.getYear();  //得到年份
month=now.getMonth()+1;  //得到月份
date=now.getDate();  //得到日期
return year+"-"+month+"-"+date;
}


function getNowTime(){
var now = new Date();
year=now.getYear();  //得到年份
month=now.getMonth()+1;  //得到月份
date=now.getDate();  //得到日期
hours = now.getHours();  //得到小时
minutes = now.getMinutes();  //得到分钟
seconds = now.getSeconds();  //得到秒
return year+"-"+month+"-"+date+" "+hours+":"+minutes+":"+seconds;
}


function enterToTab(){
if(event.keyCode==13) 
{ 
event.keyCode=9 
}
}



















Swiper 之 banner轮播图 五图效果
夜阑珊妖妖
09-22 2226
实现效果：
HTML5手机图片轮显切换 上下滑动图片翻页.rar
07-10
这个效果，你也可以说是图片翻页吧，也可以说是一个图片轮显，基于HTML5技术实现，当然了，为了更好支撑移动端，HTML5目前最好了。这个效果在电脑上演示时，鼠标向上或向下拖协，即可切换图片，实现了图片的翻页效果...
JS实现5张图片轮播效果
11-21
用户控件直接就可用。好资源不解释。还有生成的sql数据库文件，运行一遍就自己建好数据库了，图片文件夹复制过去就可以。
同时显示（两个、三个、四个...）等以上的轮播图
有一种信仰叫海阔天空
03-19 6764
话不多说，先上代码 <div class="main-product1 clearBoth"> <div class="layui-container"> <!-- 轮播图 --> <div class="overflowHidden gameBanner"> ...
手写一个 SVG 翻书轮播：模拟“翻页”动效的三种关键动画（无 JS）
最新发布
chslim的博客
11-23 833
本文介绍了一种纯SVG+SMIL实现的翻页轮播效果方案。相比传统JS/CSS轮播，该方法通过组合skewY(模拟翻折倾斜)、scale(模拟合页收拢)和opacity(控制层级关系)三个关键动画，配合SMIL时间轴同步，无需编写JS即可实现杂志翻页般的拟真效果。文章提供了完整可复用的SVG代码模板，并详细解析了动画原理和参数调整方法，同时推荐了E2编辑器的现成免费组件，方便快速应用到公众号、H5等场景。该方案具有适配性强、性能稳定、视觉效果细腻等特点，特别适合对动效要求较高的内容展示需求。
五张图片自动轮播（已完善）
qq_41353397的博客
11-15 8019
与本人博客“五张图片自动轮播(未完善）”略有不同，但原理一样的，都是使用position的绝对位置改变 html代码： 注：图片路径替换一下，才能看出效果，并需要引用floatWindows.js和jquery.min.js两个js库 <script src="../js/floatWindows.js?v=2020.04.17"></script> <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.
同时展示多张图片的无缝轮播
热门推荐
TM_Godspeed的博客
10-31 1万+
前言 这段时间在做练习的时候遇到了这个要展示多个轮播图的需求，现在大部分网页的轮播图每次都是展示一个的，就算是淘宝、天猫这样的大网站。一开始在做这个轮播图的时候在决定跳转的时刻同时防止用户短时间内频繁翻页这个地方卡了一会，最后终于做出来的时候决定将实现原理分享一下。 首先看一下要实现的效果 如图，一次性展示5张图片，向左或向右翻页时图片的展示顺序是固定的。 本文将使用 JQ 实现这个效果，如果...
html_html图片翻页_html实现翻页_html_
10-01
例如，我们可以创建多个`<div>`元素，每个`<div>`包含一张图片，然后通过JavaScript或jQuery来切换这些图片容器的可见性。 ```html 图片1"> 图片2"> ... ``` 这里，`hidden`类可以用于隐藏图片，CSS定义如下...
图片轮播插件：实现高效左右翻页效果
3. **JavaScript控制**：图片轮播插件的核心是JavaScript代码，用来监听用户的点击或滑动事件，并根据用户的操作来更新图片的位置，实现翻页效果。此外，还可以添加自动轮播功能，即在一定时间间隔后自动切换到下...
易语言-易语言实现简单图片轮播
06-25
在这个“易语言-易语言实现简单图片轮播”的主题中，我们将深入探讨如何使用易语言来创建一个简单的图片轮播程序。 图片轮播是一种常见的用户界面元素，常用于展示一组图片，并按照特定的顺序自动或手动切换。在...
图片重叠效果制作5张图片重叠切换
06-04
在本项目中，"图片重叠效果制作5张图片重叠切换"是一个使用JavaScript实现的动态视觉效果。这种效果通常用于网站的轮播图或者图片展示区域，通过让多张图片在屏幕上的特定位置重叠，并随着时间或用户交互进行平滑...
5种方式轮播图
02-29
插件描述：5种方式轮播图. 参考示例：http://www.jq22.com/jquery-info6016
卡片式轮播图（XBanner）
10-10
卡片式轮播图
jQuery带分页单排文字上下轮播滚动代码.zip
07-11
实现效果： jQuery带分页单排文字上下轮播滚动代码，这样的效果我们可以应用到企业网站，或者商城网站，文字写成产品的信息，这样的一个效果，让网站也变的更加美观！
jquery实现左右滑动式轮播图
10-20
主要为大家详细介绍了jquery实现左右滑动式轮播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
轮播广告图片5张图片实现轮播
09-01
轮播广告图片5张图片实现轮播图片可自由更换，前端的小框架
HTML中轮播图如何重叠,js，html一个页面里面多个页面轮播
weixin_28929351的博客
06-02 489
这种轮播都是div或者图片的，div能换成iframe显示嵌套网页吗？或者请问有没有其他方法能实现多个页面轮播？我写了三个iframeframeborder="no"border="0"marginwidth="0"marginheight="0"scrolling="no">frameborder="no"border="0"marginwidth="0"marginhei...
图片轮播——点击切换
weixin_34122810的博客
10-03 217
效果图 HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title> 广告图片轮播切换</title> <link rel="stylesheet" href="css/style.cs...
2024年安卓轮播图代码+定时翻页（全网代码最少实现）
博客
04-11 3461
2024年最新安卓轮播图代码+定时翻页 这里是Fragment子类的继承如果使用AppCompatActivity请修改一下很简单的如果又看
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值