1. Timer
setTimeout: Execute a program after how many milliseconds
$(function(){ setTimeout(function(){ $("#a1").text("Dynamically generated!!"); },3000); }); </script>
setInterval: How many milliseconds to execute the program
$(function(){ setInterval(function(){ $("#a1").append("Timer added!") },1000); }); </script>
Case 1: carousel map
First write the HTML layout
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="content">
<img src="img/01.jpg" id="pic">
</div>
<div id="ctrl">
<button id="befer">上一张</button>
<button id="after">下一张</button>
</div>
</body>
</html>
The second step is to write css layout
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
list-style: none;
}
#content{
width: 200px;
height: 150px;
margin: 10px auto;
position: relative;
}
#content img{
width: 150px;
height: 150px;
}
#ctrl{
width: 200px;
border: 0.0625rem #F0FFFF solid;
margin: 10px auto;
}
#befer{
display: block;
width: 60px;
height: 20px;
position: absolute;
left: 500px;
}
#after{
display: block;
width: 60px;
height: 20px;
position: absolute;
right: 550px;
}
</style>
</head>
<body>
</body>
</html>
The third step is to write jQuery code
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="content">
<img src="img/01.jpg" id="pic">
</div>
<div id="ctrl">
<button id="befer">上一张</button>
<button id="after">下一张</button>
</div>
<script src="js/JQuery.js" ></script>
<script type="text/javascript">
$(function(){
//1.把图片的地址存入数组
var n = 0;
//2.直接修改图片地址的数字编号
var n=1;
setInterval(function(){
n++;
if (n==7) {
n=1;
}
$("#pic").attr("src","img/0"+n+".jpg");
},1000);
//上一张和下一张的操作，首先要确定当前的图片是第几张
$("#befer").click(function(){
//获取当前图片的地址字符串
var src = $("#pic").attr("src");
//获取字符串最后.jpg的位置索引
var index = src.lastIndexOf(".jpg");
//位置所以-1就是图片的编号索引，根据编号索引取出该位置的字符串值，转成int值
var n = parseInt(src.charAt(index-1));
if (n==1) {
//如果是第一张，直接变成第六张
n=6;
} else{
//如果不是最后一张，-1变成前一张
n--;
}
//重新修改图片的地址
$("#pic").attr("src","img/0"+(n)+".jpg")
});
$("#after").click(function(){
//获取当前图片的地址字符串
var src = $("#pic").attr("src");
//获取字符串最后.jpg的位置索引
var index = src.lastIndexOf(".jpg");
//位置所以-1就是图片的编号索引，根据编号索引取出该位置的字符串值，转成int值
var n = parseInt(src.charAt(index-1));
if (n==6) {
//如果是最后一张，直接变成第1张
n=1;
} else{
//如果不是最后一张，+1变成后一张
n++;
}
//重新修改图片的地址
$("#pic").attr("src","img/0"+(n)+".jpg")
});
});
</script>
</body>
</html>
The renderings are as follows:
Overall code:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
list-style: none;
}
#content{
width: 200px;
height: 150px;
margin: 10px auto;
position: relative;
}
#content img{
width: 150px;
height: 150px;
}
#ctrl{
width: 200px;
border: 0.0625rem #F0FFFF solid;
margin: 10px auto;
}
#befer{
display: block;
width: 60px;
height: 20px;
position: absolute;
left: 500px;
}
#after{
display: block;
width: 60px;
height: 20px;
position: absolute;
right: 550px;
}
</style>
</head>
<body>
<div id="content">
<img src="img/01.jpg" id="pic">
</div>
<div id="ctrl">
<button id="befer">上一张</button>
<button id="after">下一张</button>
</div>
<script src="js/JQuery.js" ></script>
<script type="text/javascript">
$(function(){
//1.把图片的地址存入数组
var n = 0;
//2.直接修改图片地址的数字编号
var n=1;
setInterval(function(){
n++;
if (n==7) {
n=1;
}
$("#pic").attr("src","img/0"+n+".jpg");
},1000);
//上一张和下一张的操作，首先要确定当前的图片是第几张
$("#befer").click(function(){
//获取当前图片的地址字符串
var src = $("#pic").attr("src");
//获取字符串最后.jpg的位置索引
var index = src.lastIndexOf(".jpg");
//位置所以-1就是图片的编号索引，根据编号索引取出该位置的字符串值，转成int值
var n = parseInt(src.charAt(index-1));
if (n==1) {
//如果是第一张，直接变成第六张
n=6;
} else{
//如果不是最后一张，-1变成前一张
n--;
}
//重新修改图片的地址
$("#pic").attr("src","img/0"+(n)+".jpg")
});
$("#after").click(function(){
//获取当前图片的地址字符串
var src = $("#pic").attr("src");
//获取字符串最后.jpg的位置索引
var index = src.lastIndexOf(".jpg");
//位置所以-1就是图片的编号索引，根据编号索引取出该位置的字符串值，转成int值
var n = parseInt(src.charAt(index-1));
if (n==6) {
//如果是最后一张，直接变成第1张
n=1;
} else{
//如果不是最后一张，+1变成后一张
n++;
}
//重新修改图片的地址
$("#pic").attr("src","img/0"+(n)+".jpg")
});
});
</script>
</body>
</html>