实例练习——轮播图 & 全选/全不选
1 实例1：轮播图
1）实质就是改变图片的src
2）把图片的路径用数组存起来
3） “下一张”的实现就是改变数组的下标，用一个变量i控制，每次点击下标加1。“上一张”的实现正好相反。注意“i的变化”与“if判断”与“src改变”的顺序。
4）自动播放的实现：添加一个定时器，自动调用“下一张”的方法
5）当鼠标移上时，清除定时器，移出时，再添加定时器
6）注意整体写法，首先定义全局变量，然后页面加载时调用方法，然后写每一个方法的定义
2 轮播图添加缩略图控制
1）给缩略图添加一个自定义属性
2）循环给缩略图添加点击事件，获取到自定义属性值，赋值给全局变量i，就是大图片数组的下标，就可以改变相应大图片的src了
3）缩略图可以用js循环出来，不直接写在html中
html代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播</title> <link rel="stylesheet" href="css/common.css"/> <script src="js/common.js"></script> </head> <body> <div class="img-wrap" id="wrap"> <div class="imgs"><img src="images/1.jpg" id="img_dom"/></div> <p> <button id="prev">上一张</button> <button id="next">下一张</button> </p> <!--<div class="nav"> <img src="images/1.jpg" onclick="tab(0)"/> <img src="images/2.jpg" onclick="tab(1)"/> <img src="images/3.jpg" onclick="tab(2)"/> </div>--> <div class="nav"></div> </div> </body> </html>
css代码：
.img-wrap{width: 990px;margin: 20px auto 0;text-align: center;overflow: hidden;border: 1px solid #ccc;}
.imgs img{width: 100%;height: 340px;}
.nav{text-align: center;}
.nav img{width: 200px;margin: 0 10px;cursor: pointer;height: 70px;}
js代码：
var arr_img=['images/1.jpg','images/2.jpg','images/3.jpg'], //数组存储图片的路径
i=0, //数组的下标
timer=null, //定时器对象
img_dom=null, //大图片
img_box=null, //最外面的div
t=2000, //自动播放时间，毫秒，数越大越慢
nav=[],//缩略图
prevBtn=null, //上一张按钮
nextBtn=null; //下一张按钮
window.onload=function(){
init(); //初始化变量
addimg(); //添加缩略图
addEvent(); //添加事件
}
//初始化变量
function init(){
img_box=document.getElementsByClassName('img-wrap')[0]; //最外面的div
prevBtn=document.getElementById('prev'); //上一张按钮
nextBtn=document.getElementById('next'); //下一张按钮
img_dom=document.getElementById('img_dom'); //大图片
nav=document.getElementsByClassName('nav')[0].getElementsByTagName('img'); //缩略图
timer=setInterval(next,t); //自动调用下一张
}
//添加缩略图
function addimg(){
var str='';
var nav_wrap=document.getElementsByClassName('nav')[0];
for(var q=0; q<arr_img.length; q++){
str+='<img src="'+arr_img[q]+'" data-id="'+q+'"/>'
}
nav_wrap.innerHTML=str;
}
//添加事件
function addEvent(){
prevBtn.onclick=prev; //上一张
nextBtn.onclick=next; //下一张
//鼠标移入清除定时器
img_box.onmouseover=function(){
clearInterval(timer);
}
//鼠标移出添加定时器
img_box.onmouseout=function(){
timer=setInterval(next,t);
}
//缩略图的事件
for(var j=0; j<nav.length; j++){
nav[j].onclick=function(){
i=+this.getAttribute('data-id');
img_change();
}
}
}
//改变大图src
function img_change(){
img_dom.src=arr_img[i];
}
//上一张
function prev(){
i--;
if(i<0){
i=arr_img.length-1;
}
img_change();
}
//下一张
function next(){
i++;
if(i>=arr_img.length){
i=0;
}
img_change();
}
//直接点击缩略图，html中已注释
function tab(num){
i=num;
img_change();
}
3 实例2：全选/全不选
1）给全选框添加点击事件，获取他的选中状态，再找到其他复选框（以下都称为子选框），把选中状态设为和全选框一样
2）注意使用this
3）反着选：循环给所有子选框添加点击事件，判断选中，只要有一个没被选中，则把全选框的选中状态置为假；全部子选框被选中了，全选框的选中状态置为真
html代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选/全不选</title> <script src="js/select.js"></script> </head> <body> <p> <label> <input type="checkbox" id="all"/>全选/全不选 </label> </p> <p> <label> <input type="checkbox" class="child"/>选择 </label> </p> <p> <label> <input type="checkbox" class="child"/>选择 </label> </p> <p> <label> <input type="checkbox" class="child"/>选择 </label> </p> <p> <label> <input type="checkbox" class="child"/>选择 </label> </p> </body> </html>
js代码：
var all=null; //全选框
var child=[]; //子选框
window.onload=function(){
init(); //初始化变量
all.onclick=select_all; //调用全选方法
for(var i=0; i<child.length; i++){
child[i].onclick=select_child; //给子选框添加点击事件
}
}
//初始化变量
function init(){
all=document.getElementById('all'); //全选框
child=document.getElementsByClassName('child'); //子选框
}
//全选
function select_all(){
var selects = this.checked; //全选框的选中状态
for(var i=0; i<child.length; i++){
child[i].checked=selects; //子选框的选中状态等于全选框的选中状态
}
}
//子选框
function select_child(){
var flag=1; //定一个用来判断的标识
for(var i=0; i<child.length; i++){
if(child[i].checked==false){
flag=0; //如果有一个子选框没有被选中，则标识等于0
}
}
if(flag==0){
all.checked=false; //全选框不被选中
} else{
all.checked=true; //全选框被选中
}
}
