<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选练习</title>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>
<input type="button" id="checkedAllBtn" value="全 选"/>
<input type="button" id="checkedNoBtn" value="全不选"/>
<input type="button" id="checkedRevBtn" value="反 选"/>
<input type="button" id="sendBtn" value="提 交"/>
</form>
<script type="text/javascript">
/*
功能说明:
1. 点击'全选': 选中所有爱好
2. 点击'全不选': 所有爱好都不勾选
3. 点击'反选': 改变所有爱好的勾选状态
4. 点击'提交': 提示所有勾选的爱好
5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
技术点：
1.DOM查询
2.事件回调函数绑定
3.checkbox *** 作
4.事件回调函数中的this
5.逻辑思维能力
*/
window.onload = function () {
var items = document.getElementsByName("items");
//1.#checkedAllBtn
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function () {
setItemsChecked(true);
checkedAllBox.checked = true;
};
//2.#checkedNoBtn
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function () {
setItemsChecked(false);
checkedAllBox.checked = false;
};
//3.#checkedRevBtn
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function () {
setItemsChecked();
//点满时将checkedAllBox.checked设置为true
//统计当前items中被选中的个数
checkedAllBox.checked = isAllChecked();
};
//4.#checkedAllBox
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function () {
setItemsChecked(this.checked);
};
//5.#sendBtn
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function () {
for (var i = 0; i < items.length; i++) {
if (items[i].checked) {
alert(items[i].value);
}
}
};
//6.items
for (var i = 0; i < items.length; i++) {
items[i].onclick = function () {
//点满时将checkedAllBox.checked设置为true
//统计当前items中被选中的个数
checkedAllBox.checked = isAllChecked();
}
}
function isAllChecked() {
for (var j = 0; j < items.length; j++) {
if (!items[j].checked)
return false;
}
return true;
}
function setItemsChecked(checked) {
for (var i = 0; i < items.length; i++) {
items[i].checked = (checked == undefined) ? (!items[i].checked) : checked;
}
}
}
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选练习</title>
</head>
<body>
<form>
你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>
<input type="button" id="checkedAllBtn" value="全 选"/>
<input type="button" id="checkedNoBtn" value="全不选"/>
<input type="button" id="checkedRevBtn" value="反 选"/>
<input type="button" id="sendBtn" value="提 交"/>
</form>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
/*
功能说明:
1. 点击'全选': 选中所有爱好
2. 点击'全不选': 所有爱好都不勾选
3. 点击'反选': 改变所有爱好的勾选状态
4. 点击'提交': 提示所有勾选的爱好
5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
*/
var $checkedAllBox = $('#checkedAllBox')
var $items = $(':checkbox[name=items]')
// 1. 点击'全选': 选中所有爱好
$('#checkedAllBtn').click(function () {
$items.prop('checked', true)
$checkedAllBox.prop('checked', true)
})
// 2. 点击'全不选': 所有爱好都不勾选
$('#checkedNoBtn').click(function () {
$items.prop('checked', false)
$checkedAllBox.prop('checked', false)
})
// 3. 点击'反选': 改变所有爱好的勾选状态
$('#checkedRevBtn').click(function () {
$items.each(function () {
this.checked = !this.checked
})
$checkedAllBox.prop('checked', $items.filter(':not(:checked)').length===0)
})
//4. 点击'提交': 提示所有勾选的爱好
$('#sendBtn').click(function () {
$items.filter(':checked').each(function () {
alert(this.value)
})
})
// 5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
$checkedAllBox.click(function () {
$items.prop('checked', this.checked)
})
// 6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
$items.click(function () {
$checkedAllBox.prop('checked', $items.filter(':not(:checked)').length===0)
})
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
/*
功能说明:
1. 点击'Submit', 根据输入的信息在表单中生成一行员工信息
2. 点击Delete链接, 提示删除当前行信息, 点击确定后删除信息
技术要点:
1. DOM查询
2. 绑定事件监听
3. DOM增删改
5. 取消事件的默认行为
*/
function removeTr(){
var trNode = this.parentNode.parentNode;
var tds = trNode.getElementsByTagName("td");
var nameStr = tds[0].firstChild.nodeValue;
var flag = confirm("真的要删除" + nameStr + "的信息吗？");
if(flag){
trNode.parentNode.removeChild(trNode);
}
return false;
}
window.onload = function(){
//目标1：点击Delete删除记录
var aEles = document.getElementsByTagName("a");
for(var i = 0;i < aEles.length;i++){
aEles[i].onclick = removeTr;
}
//目标2：点击Submit增加记录
var subBtn = document.getElementById("addEmpButton");
subBtn.onclick = function(){
var nameText = trim(document.getElementById("empName").value);
var emailText = trim(document.getElementById("email").value);
var salaryText = trim(document.getElementById("salary").value);
document.getElementById("empName").value = nameText;
document.getElementById("email").value = emailText;
document.getElementById("salary").value = salaryText;
if(nameText == "" || emailText == "" || salaryText == ""){
alert("您输入的内容不完整");
return ;
}
//组装节点
var nameTd = document.createElement("td");
nameTd.appendChild(document.createTextNode(nameText));
var emailTd = document.createElement("td");
emailTd.appendChild(document.createTextNode(emailText));
var salaryTd = document.createElement("td");
salaryTd.appendChild(document.createTextNode(salaryText));
var aTd = document.createElement("td");
var aNewEle = document.createElement("a");
aNewEle.href = "deleteEmp?id=XXX";
aNewEle.appendChild(document.createTextNode("Delete"));
aNewEle.onclick = removeTr;
aTd.appendChild(aNewEle);
var trNode = document.createElement("tr");
trNode.appendChild(nameTd);
trNode.appendChild(emailTd);
trNode.appendChild(salaryTd);
trNode.appendChild(aTd);
var empTable = document.getElementById("employeeTable");
empTable.appendChild(trNode);
}
function trim(str){
var reg = /^\s*|\s*$/g;
return str.replace(reg,"");
}
}
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name:</td>
<td class="inp">
<input type="text" name="empName" id="empName"/>
</td>
</tr>
<tr>
<td class="word">email:</td>
<td class="inp">
<input type="text" name="email" id="email"/>
</td>
</tr>
<tr>
<td class="word">salary:</td>
<td class="inp">
<input type="text" name="salary" id="salary"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
/*
1. 添加
2. 删除
*/
$('#addEmpButton').click(function () {
//1. 收集输入的数据
var $empName = $('#empName')
var $email = $('#email')
var $salary = $('#salary')
var empName = $empName.val()
var email = $email.val()
var salary = $salary.val()
//2. 生成对应的标签结构, 并插入#employeeTable的tbody中
/*
Bob
bob@tom.com
10000
Delete
*/
var $xxx = $(''+empName+' ') // 拼串
.append(''+email+' ')
.append(''+salary+' ')
.append('+Date.now()+'>Delete ')
.appendTo('#employeeTable>tbody')
.find('a')
.click(clickDelete)
//3. 清除输入
$empName.val('')
$email.val('')
$salary.val('')
})
// 给所有删除链接绑定点击监听
$('#employeeTable a').click(clickDelete)
/*
点击删除的回调函数
*/
function clickDelete () {
var $tr = $(this).parent().parent()
var name = $tr.children(':first').html()
if(confirm('确定删除'+name+'吗?')) {
$tr.remove()
}
return false
}
</script>
</body>
</html>
五.添加删除记录_jQuery2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name:</td>
<td class="inp">
<input type="text" name="empName" id="empName"/>
</td>
</tr>
<tr>
<td class="word">email:</td>
<td class="inp">
<input type="text" name="email" id="email"/>
</td>
</tr>
<tr>
<td class="word">salary:</td>
<td class="inp">
<input type="text" name="salary" id="salary"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
/*
1. 添加
2. 删除
*/
$('#addEmpButton').click(function () {
//1. 收集输入的数据
var $empName = $('#empName')
var $email = $('#email')
var $salary = $('#salary')
var empName = $empName.val()
var email = $email.val()
var salary = $salary.val()
//2. 生成对应的标签结构, 并插入#employeeTable的tbody中
/*
Bob
bob@tom.com
10000
Delete
*/
var $xxx = $(''+empName+' ') // 拼串
.append(''+email+' ')
.append(''+salary+' ')
.append('+Date.now()+'>Delete ')
.appendTo('#employeeTable>tbody')
//3. 清除输入
$empName.val('')
$email.val('')
$salary.val('')
})
// 通过table实现对所有a的click事件委托
$('#employeeTable').delegate('a', 'click', clickDelete)
/*
点击删除的回调函数
*/
function clickDelete () {
var $tr = $(this).parent().parent()
var name = $tr.children(':first').html()
if(confirm('确定删除'+name+'吗?')) {
$tr.remove()
}
return false
}
</script>
</body>
</html>
六.轮播图_原生js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>焦点轮播图</title>
<style type="text/css">
/*去除内边距,没有链接下划线*/
* {
margin: 0;
padding: 0;
text-decoration: none;
}
/*让
body {
padding: 20px;
}
/*最外围的div*/
#container {
width: 600px;
height: 400px;
overflow: hidden;
position: relative; /*相对定位*/
margin: 0 auto;
}
/*包含所有图片的*/
#list {
width: 4200px; /*7张图片的宽*/
height: 400px;
position: absolute; /*绝对定位*/
z-index: 1; /*???*/
}
/*所有的图片*/
#list img {
float: left; /*浮在左侧*/
}
/*包含所有圆点按钮的*/
#buttons {
position: absolute;
height: 10px;
width: 100px;
z-index: 2;
bottom: 20px;
left: 250px;
}
/*所有的圆点*/
#buttons span {
cursor: pointer;
float: left;
border: 1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
margin-right: 5px;
}
/*第一个*/
#buttons .on {
background: orangered;
}
/*切换图标*/
.arrow {
cursor: pointer;
display: none;
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
top: 180px;
background-color: RGBA(0, 0, 0, 0.3);
color: #fff;
}
/*鼠标移到切换图标上时*/
.arrow:hover {
background-color: RGBA(0, 0, 0, 0.7);
}
/*鼠标移到整个div区域时*/
#container:hover .arrow {
display: block; /*显示*/
}
/*上一个切换图标的左外边距*/
#prev {
left: 20px;
}
/*下一个切换图标的右外边距*/
#next {
right: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="list" style="left: -600px;">
<img src="img/5.jpg" alt="1"/>
<img src="img/1.jpg" alt="1"/>
<img src="img/2.jpg" alt="2"/>
<img src="img/3.jpg" alt="3"/>
<img src="img/4.jpg" alt="4"/>
<img src="img/5.jpg" alt="5"/>
<img src="img/1.jpg" alt="5"/>
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
<script type="text/javascript">
/*
功能说明:
1. 点击向右(左)的图标, 平滑切换到下(上)一页
2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页
3. 每隔3s自动滑动到下一页
4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
5. 切换页面时, 下面的圆点也同步更新
6. 点击圆点图标切换到对应的页
*/
/**
* 根据id得到对应的标签对象
* @param {Object} id
*/
function $(id) {
return document.getElementById(id);
}
/**
* 给指定id对应的元素绑定点击监听
* @param {Object} id
* @param {Object} callback
*/
function click(id, callback) {
$(id).onclick = callback;
}
window.onload = function () {
var listDiv = $("list");
var totalTime = 400;//换页的总时间
var intervalTime = 20;//移动的间隔时间
var intervalId;//循环定时器的id(翻页中的不移动)
var imgCount = 5; //图片的个数
var moveing = false; //是否正在移动中
var index = 0;//当前显示图片的下标(从0开始到imgCount-1)
var buttonSpans = $("buttons").children; //所有标识圆点标签的集合
var containerDiv = $("container");
var intervalId2; //循环定时器的id(自动翻页)
//给下一页绑定点击监听
click("next", function () {
//切换到下一页
nextPage(true);
});
//给上一页绑定点击监听
click("prev", function () {
//切换到上一页
nextPage(false);
});
//给所有的提示圆点绑定点击监听
clickButtons();
//启动定时自动翻页
autoNextPage();
//给容器div绑定鼠标移入的监听: 停止自动翻页
containerDiv.onmouseover = function () {
clearInterval(intervalId2);
}
//给容器div绑定鼠标移出的监听: 启动自动翻页
containerDiv.onmouseout = function () {
autoNextPage();
};
/**
* 启动定时自动翻页
*/
function autoNextPage() {
intervalId2 = setInterval(function () {
nextPage(true);
}, 3000);
}
/**
* 切换到下一页/上一页
* true 下
* false 上
* index 目标页
* @param {Object} next true
*/
function nextPage(next) {
//如果正在移动, 直接结束
if (moveing) {
return;
}
//标识正在移动
moveing = true;
//需要进行的总偏移量
var offset;
if (typeof next === 'boolean') {
offset = next ? -600 : 600;
} else {
offset = -600 * (next - index);
}
//var offset = next ? -600 : 600;
//每个小移动需要做的偏移量
var itemOffset = offset / (totalTime / intervalTime);
//切换完成时div的left的坐标
var targetLeft = listDiv.offsetLeft + offset;
//循环定时器
intervalId = setInterval(function () {
//var currentLeft = listDiv.offsetLeft;
//得到当前这次偏移的样式left坐标
var left = listDiv.offsetLeft + itemOffset;
//如果已经到达目标位置
if (left == targetLeft) {
//移除定时器
clearInterval(intervalId);
//如果当前到达的是最左边的图片, 跳转到右边第二张图片的位置
if (left == 0) {
left = -imgCount * 600;
} else if (left == -600 * (imgCount + 1)) {//如果当前到达的是最右边的图片, 跳转到左边第二张图片的位置
left = -600;
}
//标识没有移动了
moveing = false;
}
//指定div新的left坐标
listDiv.style.left = left + "px";
}, intervalTime);
//更新标识圆点
updateButtons(next);
}
/**
* 更新标识圆点
* @param {Object} next
*/
function updateButtons(next) {
//将当前的圆点更新为一般圆点
buttonSpans[index].removeAttribute("class");
//计算出目标圆点的下标
var targetIndex;
if (typeof next == 'boolean') {
if (next) {
targetIndex = index + 1;
if (targetIndex == imgCount) {
targetIndex = 0;
}
} else {
targetIndex = index - 1;
if (targetIndex == -1) {
targetIndex = imgCount - 1;
}
}
} else {
targetIndex = next;
}
//将标圆点的下标更新为当前下标
index = targetIndex;
//将目标圆点设置为当前圆点
buttonSpans[index].className = 'on';
}
/**
* 给所有的圆点设置点击监听
*/
function clickButtons() {
for (var i = 0, length = buttonSpans.length; i < length; i++) {
buttonSpans[i].index = i;
buttonSpans[i].onclick = function () {
nextPage(this.index);
};
/*
(function (index) {
buttonSpans[index].onclick = function () {
nextPage(index);
};
})(i);
*/
}
}
};
</script>
</body>
</html>
七.轮播图_jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>焦点轮播图</title>
<style type="text/css">
/*去除内边距,没有链接下划线*/
* {
margin: 0;
padding: 0;
text-decoration: none;
}
/*让
body {
padding: 20px;
}
/*最外围的div*/
#container {
width: 600px;
height: 400px;
overflow: hidden;
position: relative; /*相对定位*/
margin: 0 auto;
}
/*包含所有图片的*/
#list {
width: 4200px; /*7张图片的宽: 7*600 */
height: 400px;
position: absolute; /*绝对定位*/
z-index: 1;
}
/*所有的图片*/
#list img {
float: left; /*浮在左侧*/
}
/*包含所有圆点按钮的*/
#pointsDiv {
position: absolute;
height: 10px;
width: 100px;
z-index: 2;
bottom: 20px;
left: 250px;
}
/*所有的圆点*/
#pointsDiv span {
cursor: pointer;
float: left;
border: 1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
margin-right: 5px;
}
/*第一个*/
#pointsDiv .on {
background: orangered;
}
/*切换图标*/
.arrow {
cursor: pointer;
display: none;
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
top: 180px;
background-color: RGBA(0, 0, 0, 0.3);
color: #fff;
}
/*鼠标移到切换图标上时*/
.arrow:hover {
background-color: RGBA(0, 0, 0, 0.7);
}
/*鼠标移到整个div区域时*/
#container:hover .arrow {
display: block; /*显示*/
}
/*上一个切换图标的左外边距*/
#prev {
left: 20px;
}
/*下一个切换图标的右外边距*/
#next {
right: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="list" style="left: -600px;">
<img src="img/5.jpg" alt="5"/>
<img src="img/1.jpg" alt="1"/>
<img src="img/2.jpg" alt="2"/>
<img src="img/3.jpg" alt="3"/>
<img src="img/4.jpg" alt="4"/>
<img src="img/5.jpg" alt="5"/>
<img src="img/1.jpg" alt="1"/>
</div>
<div id="pointsDiv">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
/*
功能说明:
1. 点击向右(左)的图标, 平滑切换到下(上)一页
2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页
3. 每隔3s自动滑动到下一页
4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
5. 切换页面时, 下面的圆点也同步更新
6. 点击圆点图标切换到对应的页
bug: 快速点击时, 翻页不正常
*/
$(function () {
var $container = $('#container')
var $list = $('#list')
var $points = $('#pointsDiv>span')
var $prev = $('#prev')
var $next = $('#next')
var PAGE_WIDTH = 600 //一页的宽度
var TIME = 400 // 翻页的持续时间
var ITEM_TIME = 20 // 单元移动的间隔时间
var imgCount = $points.length
var index = 0 //当前下标
var moving = false // 标识是否正在翻页(默认没有)
// 1. 点击向右(左)的图标, 平滑切换到下(上)一页
$next.click(function () {
// 平滑翻到下一页
nextPage(true)
})
$prev.click(function () {
// 平滑翻到上一页
nextPage(false)
})
// 3. 每隔3s自动滑动到下一页
var intervalId = setInterval(function () {
nextPage(true)
}, 1000)
// 4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
$container.hover(function () {
// 清除定时器
clearInterval(intervalId)
}, function () {
intervalId = setInterval(function () {
nextPage(true)
}, 1000)
})
// 6. 点击圆点图标切换到对应的页
$points.click(function () {
// 目标页的下标
var targetIndex = $(this).index()
// 只有当点击的不是当前页的圆点时才翻页
if(targetIndex!=index) {
nextPage(targetIndex)
}
})
/**
* 平滑翻页
* @param next
* true: 下一页
* false: 上一页
* 数值: 指定下标页
*/
function nextPage (next) {
/*
总的时间: TIME=400
单元移动的间隔时间: ITEM_TIME = 20
总的偏移量: offset
单元移动的偏移量: itemOffset = offset/(TIME/ITEM_TIME)
启动循环定时器不断更新$list的left, 到达目标处停止停止定时器
*/
//如果正在翻页, 直接结束
if(moving) { //已经正在翻页中
return
}
moving = true // 标识正在翻页
// 总的偏移量: offset
var offset = 0
// 计算offset
if(typeof next==='boolean') {
offset = next ? -PAGE_WIDTH : PAGE_WIDTH
} else {
offset = -(next-index)* PAGE_WIDTH
}
// 计算单元移动的偏移量: itemOffset
var itemOffset = offset/(TIME/ITEM_TIME)
// 得到当前的left值
var currLeft = $list.position().left
// 计算出目标处的left值
var targetLeft = currLeft + offset
// 启动循环定时器不断更新$list的left, 到达目标处停止定时器
var intervalId = setInterval(function () {
// 计算出最新的currLeft
currLeft += itemOffset
if(currLeft===targetLeft) { // 到达目标位置
// 清除定时器
clearInterval(intervalId)
// 标识翻页停止
moving = false
// 如果到达了最右边的图片(1.jpg), 跳转到最左边的第2张图片(1.jpg)
if(currLeft===-(imgCount+1) * PAGE_WIDTH) {
currLeft = -PAGE_WIDTH
} else if(currLeft===0){
// 如果到达了最左边的图片(5.jpg), 跳转到最右边的第2张图片(5.jpg)
currLeft = -imgCount * PAGE_WIDTH
}
}
// 设置left
$list.css('left', currLeft)
}, ITEM_TIME)
// 更新圆点
updatePoints(next)
}
/**
* 更新圆点
* @param next
*/
function updatePoints (next) {
// 计算出目标圆点的下标targetIndex
var targetIndex = 0
if(typeof next === 'boolean') {
if(next) {
targetIndex = index + 1 // [0, imgCount-1]
if(targetIndex===imgCount) {// 此时看到的是1.jpg-->第1个圆点
targetIndex = 0
}
} else {
targetIndex = index - 1
if(targetIndex===-1) { // 此时看到的是5.jpg-->第5个圆点
targetIndex = imgCount-1
}
}
} else {
targetIndex = next
}
// 将当前index的的class移除
// $points.eq(index).removeClass('on')
$points[index].className = ''
// 给目标圆点添加class='on'
// $points.eq(targetIndex).addClass('on')
$points[targetIndex].className = 'on'
// 将index更新为targetIndex
index = targetIndex
}
})
欢迎分享，转载请注明来源：内存溢出
赞
(0)
打赏
微信扫一扫
支付宝扫一扫
11、JavaScript单例内置对象
上一篇
2022-06-10
评论列表（0条）