JavaScript实现图片自动轮播
2024-05-29 09:54:06
目录
1.轮播图片
1.1图片切换功能
1.2定时器功能
1.3图片自动轮播实现
2.页面定时弹出广告
2.2 技术分析
2.3步骤分析
2.4代码实现
3.表单校验
3.1需求分析
3.2技术分析
3.3校验邮箱
3.3.1从外部引入js文件（一些匹配函数）
JS：是一种脚本语言，由浏览器来解释执行，不需要进行编译。
JS声明变量：var 变量名
JS声明函数：function 函数名（参数）{}
JS开发步骤：
- 确定事件
- 事件要触发函数，所以要声明函数。
- 函数里面通常是要去做一些交互操作，弹框、修改页面内容、动态添加东西。
定时器：
setInterval("test()",3000) 每隔多少毫秒执行一次函数。
setTimeout("test()",3000)多少毫秒之后执行一次函数。
timerID：定时器调用后返回值
clearInterval()
clearTimeout()
切换图片
img.src = "图片路径"
事件：文档加载完成的事件 onload事件
显示广告： img.style.display = "block"
隐藏广告：img.style.display = "none"
表单校验
引入外部js文件
<script src = "js文件路径" type = "text/javascript"/>表单校验中常用事件:
- 获得焦点事件 onfocus
- 失去焦点事件 onblur
- 按键抬起事件 onkeyup
1.轮播图片
需求：
有一组图片，每隔三秒钟切换一张图。
技术分析：
切换图片
每隔三秒钟做一件事
步骤分析：
- 确定事件：文档加载完成的事件onload
- 事件要触发：init（）
- 函数里面要做一些事情：（通常会去操作元素提供交互）
- 开启定时器：执行切换图片的函数changeImg（）
- changeImg（） 获得要切换图片的那个元素
1.1图片切换功能
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>/* 1.事件：点击onclick2.事件触发函数：changeImg3.在函数中*/function changeImg(){var img = document.getElementById("img1");img.src = "../img/img2";//id传入src}</script></head><body><input type="button" value="点击切换图片" onclick="changeImg()" /><br /><img src="../img/1.jpg" id="img1"/><img src="../img/2.jpg" id="img2" /><!-- 定义图片为id --></body>
</html>
1.2定时器功能
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>alert('123');// window.setInterval("alert('123');",2000);//window对象是一个最顶层对象，可以省略window//每隔两千毫秒,进行引号内的命令function test(){console.log("setInterval调用了");}// setInterval("test()",2000);//2s执行一次// setTimeout("test()",2000);//2s后执行一次就不再执行了。 var timerID;//是setInterval返回的定时器idfunction startClock(){timerID = setInterval("test()",2000);}function stopClock(){clearInterval(timerID);//取消定时器 }</script></head><body><input type="button" value="开启计时器" onclick="startClock()"/><input type="button" value="关闭计时器" onclick="stopClock()"/></body>
</html>
1.3图片自动轮播实现
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 确定事件：文档加载完成的事件onload事件要触发：init（）函数里面要做一些事情：（通常会去操作元素提供交互）开启定时器：执行切换图片的函数changeImg（）changeImg（） 获得要切换图片的那个元素 --><script>var index = 0;function changeImg(){var img = document.getElementById("img1");//计算当前要切换到第几张图片var curIndex = index % 3 + 1;//0,1,2// img.src = "../img/2.jpg";//1，2，3img.src = "../img/"+curIndex+".jpg";//1，2，3//id传入srcindex = index + 1;}function init(){setInterval("changeImg()",1000); }// 每隔3s调用一次changeImg()</script></head><body onload="init()"><img src="../img/1.jpg" id="img1"/></body>
</html>
文件目录：
2.页面定时弹出广告
2.1 需求分析
打开网页时，弹出广告，五秒后消失。
2.2 技术分析
定时器
- setinterval 每隔多少毫秒执行一次函数
- setTimeout 多少毫秒之后执行一次函数
- clearinterval
- clearTimeout
显示广告 img.style.display = "block"
隐藏广告 img.style.display = "none"
2.3步骤分析
- 确定事件：页面加载完成的事件onload
- 事件要触发函数：init（）
- init函数里面做一件事：
- 启动一个定时器：setTimeout()
- 显示一个广告，再去开启一个定时器五秒后关闭。
2.4代码实现
1.图片的显示与隐藏
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>//文档加载顺序，由上到下function hideImg(){var img=document.getElementById("img1");img.style.display = "none";}function showImg(){var img=document.getElementById("img1");img.style.display = "";}</script></head><body><input type="button" value="显示" onclick="showImg()"/><input type="button" value="隐藏" onclick="hideImg()"/><br /><!-- 绑定函数 --><img src="../img/3.jpg" id="img1"/></body>
</html>
2.广告自动弹出
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 确定事件：页面加载完成的事件onload事件要触发函数：init（）init函数里面做一件事：启动一个定时器：setTimeout()显示一个广告，再去开启一个定时器五秒后关闭。 --><script>function hideAD(){var img = document.getElementById("img1");img.style.display = "none";}function showAD(){//首先获取要操作的img的idvar img = document.getElementById("img1");//显示img.style.display = "block";//开启定时器，关闭广告setTimeout("hideAD()",3000)}function init(){setTimeout("showAD()",3000);}</script></head><body onload="init()"><img id ="img1" src="../img/6.jpg" width="100%" style="display: none;"/></body>
</html>
3.表单校验
3.1需求分析
当用户输入信息有误时候，在输入框后给出友好提示。
3.2技术分析
【HTML中的innerHTML属性】
【JS中常用事件】
- onfocus：获得焦点事件
- onblur：失去焦点事件
- onkeyup：按键抬起事件
3.1用户名检验
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>// 1.确定事件:onfocus,// 2.事件驱动函数// 3.函数要做些事情,修改span内容//用户名提示function showTips(){//获得要操作的元素var span = document.getElementById("span_username");span.innerHTML = "<font color='red' size='2'>用户名长度不能少于六位</font>";}/*校验用户名：1.事件：onblur 失去焦点2.函数：checkUsername()3.函数显示校验结果*/function checkUsername(){//获取用户输入内容var uvalue = document.getElementById("username").value;//对输入内容进行校验//获得要显示结果的spanvar span = document.getElementById("span_username");if(uvalue.length < 6){span.innerHTML = "<font color='red' size='2'>用户名太短！</font>";}else{ span.innerHTML = "<font color='green' size='2'>通过</font>";}//显示校验结果}</script></head><body><form action="../01图片自动轮换/图片轮播.html" onsubmit="return checkForm()">用户名：<input type="text" id = "username" onfocus="showTips()" onblur="checkUsername()"/><span id="span_username"></span> <br />密码：<input type="password" id = "password" /><br />确认密码：<input type="password" id = "repassword" /><br />邮箱：<input type="text" id = "email" /><br />手机号：<input type="text" id = "text" /><br /><input type="submit" value="提交" /></form></body>
</html>
效果：
3.2密码校验
先修改提示函数，令提示内容与id为变量。
//用户名提示function showTips(spanID,msg){//获得要操作的元素var span = document.getElementById(spanID);span.innerHTML = msg;}新增密码校验与确认函数
// 密码校验function checkPassword(){//获取密码输入var Upass = document.getElementById("password").value;var span = document.getElementById("span_password");//对密码输入进行判断if(Upass.length < 6){span.innerHTML = "<font color='red' size='2'>密码太短不行！</font>";}else{ span.innerHTML = "<font color='green' size='2'>通过</font>";}}//确认密码function checkRePassword(){//获取密码输入var Upass = document.getElementById("password").value;//获取确认密码输入var URePass = document.getElementById("repassword").value;var span = document.getElementById("span_repassword");//对密码输入进行判断if(Upass != URePass){span.innerHTML = "<font color='red' size='2'>对不起！两次密码不一致！</font>";}else{ span.innerHTML = "<font color='green' size='2'>通过！</font>";}}用户名+密码校验总代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>// 1.确定事件:onfocus,// 2.事件驱动函数// 3.函数要做些事情,修改span内容//用户名提示function showTips(spanID,msg){//获得要操作的元素var span = document.getElementById(spanID);span.innerHTML = msg;}/*校验用户名：1.事件：onblur 失去焦点 onkeyup事件，每个按键都校验一次，连续2.函数：checkUsername()3.函数显示校验结果*/function checkUsername(){//获取用户输入内容var uValue = document.getElementById("username").value;//对输入内容进行校验//获得要显示结果的spanvar span = document.getElementById("span_username");if(uValue.length < 6){span.innerHTML = "<font color='red' size='2'>用户名太短！</font>";}else{ span.innerHTML = "<font color='green' size='2'>通过</font>";}//显示校验结果 }// 密码校验function checkPassword(){//获取密码输入var Upass = document.getElementById("password").value;var span = document.getElementById("span_password");//对密码输入进行判断if(Upass.length < 6){span.innerHTML = "<font color='red' size='2'>密码太短不行！</font>";}else{ span.innerHTML = "<font color='green' size='2'>通过</font>";}}//确认密码function checkRePassword(){//获取密码输入var Upass = document.getElementById("password").value;//获取确认密码输入var URePass = document.getElementById("repassword").value;var span = document.getElementById("span_repassword");//对密码输入进行判断if(Upass != URePass){span.innerHTML = "<font color='red' size='2'>对不起！两次密码不一致！</font>";}else{ span.innerHTML = "<font color='green' size='2'>通过！</font>";}}</script></head><body><form action="../01图片自动轮换/图片轮播.html" onsubmit="return checkForm()">用户名：<input type="text" id = "username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span> <br />密码：<input type="password" id = "password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()" /><span id="span_password"></span> <br />确认密码：<input type="password" id = "repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id = "span_repassword"></span><br />邮箱：<input type="text" id = "email" /><br />手机号：<input type="text" id = "text" /><br /><input type="submit" value="提交" /></form></body>
</html>
3.3校验邮箱
3.3.1从外部引入js文件（一些匹配函数）
/*
用途：检查输入的Email信箱格式是否正确
输入：strEmail：字符串
返回：如果通过验证返回true,否则返回false
*/
function checkEmail(strEmail)
{ var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;if ( emailReg.test(strEmail) ) {return true;}else {
// alert("您输入的Email地址格式不正确！");return false;}
};/*
用途：校验ip地址的格式
输入：strIP：ip地址
返回：如果通过验证返回true,否则返回false；
*/
function isIP(strIP)
{if (isNull(strIP)) {return false;}var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/ //匹配IP地址的正则表达式 if (re.test(strIP)) {if ( RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256) {return true;}}return false;
};/*
用途：检查输入手机号码是否正确
输入：strMobile：字符串
返回：如果通过验证返回true,否则返回false
*/
function checkMobile( strMobile )
{ //13588888888var regu = /^[1][345678][0-9]{9}$/;var re = new RegExp(regu);if (re.test(strMobile)) {return true;}else {return false;}
};/*
用途：检查输入的电话号码格式是否正确
输入：strPhone：字符串
返回：如果通过验证返回true,否则返回false
*/
function checkPhone( strPhone )
{var phoneRegWithArea = /^[0][1-9]{2,3}-[0-9]{5,10}$/;var phoneRegNoArea = /^[1-9]{1}[0-9]{5,8}$/;var prompt = "您输入的电话号码不正确!" if ( strPhone.length > 9 ) {if ( phoneRegWithArea.test(strPhone) ) {return true;}else {alert( prompt );return false;}}else {if ( phoneRegNoArea.test( strPhone ) ) {return true;}else {alert( prompt );return false;}}
};/*
用途：检查输入字符串是否为空或者全部都是空格
输入：str
返回：如果全是空返回true,否则返回false
*/
function isNull( str )
{if ( str == "" ) {return true;}var regu = "^[ ]+$";var re = new RegExp(regu);return re.test(str);
};/*
用途：检查输入对象的值是否符合整数格式
输入：str 输入的字符串
返回：如果通过验证返回true,否则返回false
*/
function isInteger( str )
{var regu = /^[-]{0,1}[0-9]{1,}$/;return regu.test(str);
};/*
用途：检查输入字符串是否符合正整数格式
输入：s：字符串
返回：如果通过验证返回true,否则返回false
*/
function isNumber( s )
{var regu = "^[0-9]+$";var re = new RegExp(regu);if (s.search(re) != - 1) {return true;}else {return false;}
};/*
用途：检查输入字符串是否是带小数的数字格式,可以是负数
输入：str：字符串
返回：如果通过验证返回true,否则返回false
*/
function isDecimal( str )
{if (isInteger(str)) {return true;}var re = /^[-]{0,1}(\d+)[\.]+(\d+)$/;if (re.test(str)) {if (RegExp.$1 == 0 && RegExp.$2 == 0) {return false;}return true;}else {return false;}
};/*
用途：检查输入对象的值是否符合端口号格式
输入：str 输入的字符串
返回：如果通过验证返回true,否则返回false
*/
function isPort( str )
{return (isNumber(str) && str < 65536);
};/*
用途：检查输入字符串是否符合金额格式,格式定义为带小数的正数，小数点后最多三位
输入：s：字符串
返回：如果通过验证返回true,否则返回false
*/
function isMoney( s )
{var regu = "^[0-9]+[\.][0-9]{0,3}$";var re = new RegExp(regu);if (re.test(s)) {return true;}else {return false;}
};/*
用途：检查输入字符串是否只由英文字母和数字和下划线组成
输入：s：字符串
返回：如果通过验证返回true,否则返回false
*/
function isNumberOr_Letter( s )
{//判断是否是数字或字母 var regu = "^[0-9a-zA-Z\_]+$";var re = new RegExp(regu);if (re.test(s)) {return true;}else {return false;}
};/*
用途：检查输入字符串是否只由英文字母和数字组成
输入：s：字符串
返回：如果通过验证返回true,否则返回false
*/
function isNumberOrLetter( s )
{//判断是否是数字或字母 var regu = "^[0-9a-zA-Z]+$";var re = new RegExp(regu);if (re.test(s)) {return true;}else {return false;}
};/*
用途：检查输入字符串是否只由汉字、字母、数字组成
输入：s：字符串
返回：如果通过验证返回true,否则返回false
*/
function isChinaOrNumbOrLett( s )
{//判断是否是汉字、字母、数字组成 var regu = "^[0-9a-zA-Z\u4e00-\u9fa5]+$";var re = new RegExp(regu);if (re.test(s)) {return true;}else {return false;}
};/*
用途：判断是否是日期
输入：date：日期；fmt：日期格式
返回：如果通过验证返回true,否则返回false
*/
function isDate( date, fmt )
{if (fmt == null) {fmt = "yyyyMMdd";}var yIndex = fmt.indexOf("yyyy");if (yIndex ==- 1) {return false;}var year = date.substring(yIndex, yIndex + 4);var mIndex = fmt.indexOf("MM");if (mIndex ==- 1) {return false;}var month = date.substring(mIndex, mIndex + 2);var dIndex = fmt.indexOf("dd");if (dIndex ==- 1) {return false;}var day = date.substring(dIndex, dIndex + 2);if (!isNumber(year) || year > "2100" || year < "1900") {return false;}if (!isNumber(month) || month > "12" || month < "01") {return false;}if (day > getMaxDay(year, month) || day < "01") {return false;}return true;
};
function getMaxDay(year, month)
{if (month == 4 || month == 6 || month == 9 || month == 11) {return "30";}if (month == 2) {if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {return "29";}else {return "28";}return "31";;}
};/*
用途：字符1是否以字符串2结束
输入：str1：字符串；str2：被包含的字符串
返回：如果通过验证返回true,否则返回false
*/
function isLastMatch(str1, str2)
{var index = str1.lastIndexOf(str2);if (str1.length == index + str2.length) {return true;}return false;
};/*
用途：字符1是否以字符串2开始
输入：str1：字符串；str2：被包含的字符串
返回：如果通过验证返回true,否则返回false
*/
function isFirstMatch(str1, str2)
{var index = str1.indexOf(str2);if (index == 0) {return true;}return false;
};/*
用途：字符1是包含字符串2
输入：str1：字符串；str2：被包含的字符串
返回：如果通过验证返回true,否则返回false
*/
function isMatch(str1, str2)
{var index = str1.indexOf(str2);if (index ==- 1) {return false;}return true;
};/*
用途：检查输入的起止日期是否正确，规则为两个日期的格式正确，且结束如期>=起始日期
输入：startDate：起始日期，字符串; endDate：结束如期，字符串
返回：如果通过验证返回true,否则返回false
*/
function checkTwoDate( startDate, endDate )
{if ( !isDate(startDate) ) {alert("起始日期不正确!");return false;}else if ( !isDate(endDate) ) {alert("终止日期不正确!");return false;}else if ( startDate > endDate ) {alert("起始日期不能大于终止日期!");return false;}return true;
};/*
用途：检查复选框被选中的数目
输入：checkboxID：字符串
返回：返回该复选框中被选中的数目
*/
function checkSelect( checkboxID )
{var check = 0;var i = 0;if ( document.all(checkboxID).length > 0 ) {for ( i = 0; i < document.all(checkboxID).length; i++ ) {if ( document.all(checkboxID).item( i ).checked ) {check += 1;}}}else {if ( document.all(checkboxID).checked ) {check = 1;}}return check;
}
function getTotalBytes(varField)
{if (varField == null) {return - 1;}var totalCount = 0;for (i = 0; i < varField.value.length; i++) {if (varField.value.charCodeAt(i) > 127) {totalCount += 2;}else {totalCount++ ;}}return totalCount;
}
function getFirstSelectedValue( checkboxID )
{var value = null;var i = 0;if ( document.all(checkboxID).length > 0 ){for ( i = 0; i < document.all(checkboxID).length; i++ ){if ( document.all(checkboxID).item( i ).checked ) {value = document.all(checkboxID).item(i).value;break;}}}else {if ( document.all(checkboxID).checked ) {value = document.all(checkboxID).value;}}return value;
}
function getFirstSelectedIndex( checkboxID )
{var value = - 2;var i = 0;if ( document.all(checkboxID).length > 0 ){for ( i = 0; i < document.all(checkboxID).length; i++ ) {if ( document.all(checkboxID).item( i ).checked ) {value = i;break;}}}else {if ( document.all(checkboxID).checked ) {value = - 1;}}return value;
}
function selectAll( checkboxID, status )
{if ( document.all(checkboxID) == null) {return;}if ( document.all(checkboxID).length > 0 ){for ( i = 0; i < document.all(checkboxID).length; i++ ) {document.all(checkboxID).item( i ).checked = status;}}else {document.all(checkboxID).checked = status;}
}
function selectInverse( checkboxID )
{if ( document.all(checkboxID) == null) {return;}if ( document.all(checkboxID).length > 0 ) {for ( i = 0; i < document.all(checkboxID).length; i++ ) {document.all(checkboxID).item( i ).checked = !document.all(checkboxID).item( i ).checked;}}else {document.all(checkboxID).checked = !document.all(checkboxID).checked;}
}
function checkDate( value )
{if (value == '') {return true;}if (value.length != 8 || !isNumber(value)) {return false;}var year = value.substring(0, 4);if (year > "2100" || year < "1900") {return false;}var month = value.substring(4, 6);if (month > "12" || month < "01") {return false;}var day = value.substring(6, 8);if (day > getMaxDay(year, month) || day < "01") {return false;}return true;
};/*
用途：检查输入的起止日期是否正确，规则为两个日期的格式正确或都为空且结束日期>=起始日期
输入：startDate：起始日期，字符串; endDate： 结束日期，字符串
返回：如果通过验证返回true,否则返回false
*/
function checkPeriod( startDate, endDate )
{if ( !checkDate(startDate) ) {alert("起始日期不正确!");return false;}else if ( !checkDate(endDate) ) {alert("终止日期不正确!");return false;}else if ( startDate > endDate ) {alert("起始日期不能大于终止日期!");return false;}return true;
};/*
用途：检查证券代码是否正确
输入：secCode:证券代码
返回：如果通过验证返回true,否则返回false
*/
function checkSecCode( secCode )
{if ( secCode.length != 6 ) {alert("证券代码长度应该为6位");return false;}if (!isNumber( secCode ) ) {alert("证券代码只能包含数字");return false;}return true;
};/*
function:cTrim(sInputString,iType)
description:字符串去空格的函数
parameters:iType：1=去掉字符串左边的空格;2=去掉字符串左边的空格;0=去掉字符串左边和右边的空格
return value:去掉空格的字符串
*/
function cTrim(sInputString, iType)
{var sTmpStr = ' ';var i = - 1;if (iType == 0 || iType == 1) {while (sTmpStr == ' ') {++i;sTmpStr = sInputString.substr(i, 1);}sInputString = sInputString.substring(i);}if (iType == 0 || iType == 2) {sTmpStr = ' ';i = sInputString.length;while (sTmpStr == ' ') {--i;sTmpStr = sInputString.substr(i, 1);}sInputString = sInputString.substring(0, i + 1);}return sInputString;
};定义checkMail函数与checkForm整个表单的函数
function checkMail(){var umail = document.getElementById("email").value;var flag = checkEmail(umail); var span = document.getElementById("span_email");//对邮箱输入进行校验if(flag){span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";return true;}else{span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>";return false;}}function checkForm(){var flag = checkUsername()&&checkPassword()&& checkRePassword() && checkMail()return flag;}每个check函数return true 或者 false
当全部返回为1时，checkForm函数返回flag=1，进行onsubmit事件
总代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title><!-- 引入外部js文件--></title><script type="text/javascript" src="../js/regutils.js"></script><script>// 1.确定事件:onfocus,// 2.事件驱动函数// 3.函数要做些事情,修改span内容//用户名提示function showTips(spanID,msg){//获得要操作的元素var span = document.getElementById(spanID);span.innerHTML = msg;}/*校验用户名：1.事件：onblur 失去焦点 onkeyup事件，每个按键都校验一次，连续2.函数：checkUsername()3.函数显示校验结果*/function checkUsername(){//获取用户输入内容var uValue = document.getElementById("username").value;//对输入内容进行校验//获得要显示结果的spanvar span = document.getElementById("span_username");if(uValue.length < 6){span.innerHTML = "<font color='red' size='2'>用户名太短！</font>";return false;}else{ span.innerHTML = "<font color='green' size='2'>通过</font>";return true;}//显示校验结果 }// 密码校验function checkPassword(){//获取密码输入var Upass = document.getElementById("password").value;var span = document.getElementById("span_password");//对密码输入进行判断if(Upass.length < 6){span.innerHTML = "<font color='red' size='2'>密码太短不行！</font>";return false;}else{ span.innerHTML = "<font color='green' size='2'>通过</font>";return true;}}//确认密码function checkRePassword(){//获取密码输入var Upass = document.getElementById("password").value;//获取确认密码输入var URePass = document.getElementById("repassword").value;var span = document.getElementById("span_repassword");//对密码输入进行判断if(Upass != URePass){span.innerHTML = "<font color='red' size='2'>对不起！两次密码不一致！</font>";return false;}else{ span.innerHTML = "<font color='green' size='2'>通过！</font>";return true;}}/*校验邮箱* */function checkMail(){var umail = document.getElementById("email").value;var flag = checkEmail(umail); var span = document.getElementById("span_email");//对邮箱输入进行校验if(flag){span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";return true;}else{span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>";return false;}}function checkForm(){var flag = checkUsername()&&checkPassword()&& checkRePassword() && checkMail()return flag;}</script></head><body><form action="../01图片自动轮换/图片轮播.html" onsubmit="return checkForm()">用户名：<input type="text" id = "username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span> <br />密码：<input type="password" id = "password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()" /><span id="span_password"></span> <br />确认密码：<input type="password" id = "repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id = "span_repassword"></span><br />邮箱：<input type="text" id = "email" onfocus="showTips('span_email','请输入正确邮箱格式')" onblur="checkMail()" /> <span id="span_email"></span><br />手机号：<input type="text" id = "text" /><br /><input type="submit" value="提交" /></form></body>
</html>
JavaScript实现图片自动轮播相关推荐
- ios 图片自动轮播
ios 图片自动轮播 #import "NYViewController.h"#define kImageCount 5@interface NYViewController () ...
- iOS实现图片自动轮播展示
一.需要实现的效果如下图1,首页图片自动轮播展示,其中图片从网络异步加载,加载过程用风火轮显示加载中,如图2. 本文参考了以下博客文章: http://www.haodaima.net/art/268 ...
- 广告图片自动轮播控件
2019独角兽企业重金招聘Python工程师标准>>> 自定义广告轮播 自定义控件ImageCycleView 每个广告页的对象(包含具体显示图片.内容.id等) 自定义广告控件 I ...
- java图片轮播_java制作广告图片自动轮播控件
首页图片的轮播 /** * 广告图片自动轮播控件 * */ public class ImageCycleView extends LinearLayout { /** * 上下文 */ privat ...
- 怎样实现banner自动播放html,纯CSS3实现banner图片自动轮播效果方式总结
自动轮播: 实现切换图片,图片循环播放:鼠标悬停某张图片, 则暂停切换.css 方法一.opacity控制透明度实现轮播效果 依照需求咱们选择用CSS3的animation动画进行实现:transit ...
- html5时间线图片自动轮播,js实现自动播放匀速轮播图
本文实例为大家分享了js实现自动播放匀速轮播图的具体代码,供大家参考,具体内容如下 函数封装:( 匀速运动函数) function animate(obj,target,step,speed){ cl ...
- 自动图片轮播php源码,js图片自动轮播代码分享(js图片轮播)
1.利用图片width显示位置来播放图片,技术:.offsetWidth .aBtn[i].index = i .setInterval() .oUl[0].style.left = .onclic ...
- php中实现图片自动轮播,轻松实现javascript图片轮播特效_javascript技巧
本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下 还是先来看一看效果图: 具体代码: 一.HTML代码分析 此效果的层次结构比较清楚: 1. c ...
- 杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播
JavaScript案例之跑马灯左右无缝连接 效果图: 思路: 1.先做界面 1.1 制作一个大盒子,进行存放整个图片及按钮区域 1.2 制作两个按钮和中间区域盒子 1.3 中间区域盒子中使用无序列表 ...
最新文章
- 【GStreamer】gstreamer工具详解之：ges-launch-1.0
- Web API与JWT认证
- Union和Union All的区别
- php上传文件 不移动,move_uploaded_file（）为什么无法移动上传的文件？
- 八、Linux 常用 Shell 命令，控制台的快捷键以及 Shell 编程（中）
- 当我们在谈论HTTP缓存时我们在谈论什么
- vscode 调试参数_如何通过vscode运行调试javascript代码
- java class api 中文乱码_SpringMVC之springmvc原始api,请求中文乱码问题
- 收藏 | 神经网络debug 6大技巧！
- linux shell基础
- python3.7读取csv文件_Python3 读取csv文件
- CSDN下载频道2014年11月4日-5日维护公告
- 使用X-Scan进行漏洞扫描的基本操作演示
- 神经网络的双曲线正切激活函数
- vr软件测试,如何进行VR可用性测试？
- pb一步步开发APP
- 洛谷4315 月下“毛景树”（树链剖分）
- 2018-8-10-win10-uwp-读取保存WriteableBitmap-、BitmapImage
- BIM技术在家装中有5大应用，您知道吗？
- 盘点三种常见的硬盘接口