定时器 — 图片自动切换（轮播图）

自动播放轮播图，鼠标放在图片上轮播停止；鼠标移开，继续轮播；
一种是打开页面就开始轮播；
另一种是打开图片过几秒再开始轮播（具体看下面js代码）；

html：

<div id="pic">
    <img src="img/1.jpg" alt="">
    <span>数量正在加载...</span>
    <p>文字正在加载...</p>
    <ul></ul>
</div>

css：

body {background-color: #333;}
ul {padding: 0;margin: 0;}
li {list-style: none}
#pic {
width: 120px;
height: 200px;
position: relative;
margin: 200px auto;
}
#pic img {
width: 120px;
height: 200px;
}
#pic ul {
position: absolute;
top: 0;
right: -50px;
}
#pic ul li {
width: 40px;
height: 40px;
margin-bottom: 4px;
background-color: #666;
}       
p,span {
width: 120px;
height: 20px;
line-height: 20px;
text-align: center;
color: #fff;
position: absolute;
left: 0;
}
p { bottom: 0;margin: 0;}
span { top: 0;}
#pic .active { background-color: #fc3;}

js：

// 找元素
var pic = document.getElementById('pic');
var imgs = pic.getElementsByTagName('img')[0];
var lis = pic.getElementsByTagName('li')[0];
var txt = pic.getElementsByTagName('p')[0];
var spans= pic.getElementsByTagName('span')[0];
var uls = pic.getElementsByTagName('ul')[0];
var lis = uls.getElementsByTagName('li');//找到页面中的li元素,li元素是往里面塞进去的

// 准备数据
var arrUrl = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
var arrTxt = ['海上帆船','小台灯','椰子树','照相机'];
var num = 0;//有数组的地方一般都有数字，因为图片地址配合数字就能找到文字描述

// -----------------------添加定时器--------------------------------------------
var timer = null;//设置定时器开关
function autoPlay(){//定时器用函数包围起来
    timer = setInterval(function(){
        num ++;//数值加1
        num %= arrTxt.length;//以数组长度来循环切换
        fnTab();                
    },1000);
}
//autoPlay();//函数直接调用，打开页面就开始轮播；(这行与下一行只能存在一个)
setTimeout(autoPlay,2000);//打开页面2秒钟之后再开始轮播
// 鼠标移入图片上面，让定时器关闭；
pic.onmouseover = function(){
    clearInterval(timer);
};
// 鼠标移出图片定时器开启
pic.onmouseout = autoPlay;//autoPlay后面不能添加括号

// ----------------------定时器结束--------------------------------------------

// 插入li标签
for(var i=0;i<arrUrl.length;i++){
    uls.innerHTML += '<li></li>';//往Ul里添加li就要写成+=，如果是改写就直接写成等号 
}

// 初始化，要先插入标签再初始化，顺序不要颠倒，否则会出错
function fnTab(){
    imgs.src = arrUrl[num];//显示第一张图片
    spans.innerHTML = num+1+'/'+arrUrl.length;//显示上面总张数（自动获取总数）
    txt.innerHTML = arrTxt[num];
for(var i=0;i<lis.length;i++){
        lis[i].className = '';
    }           
    lis[num].className = 'active';//给当前的li添加类名 
}
fnTab();

// 给li添加点击事件，循环li
for(var i=0;i<lis.length;i++){  
    lis[i].index = i;//自定义属性又叫索引值
    lis[i].onclick = function(){            
        num = this.index;
        fnTab();
    };              
}

注意：
1、自动切换的关键点在于：var num = 0;后面的数字会自动切换，所以我们要添加定时器，让num的数值自动切换；
2、函数名称加括号等于函数返回值：pic.onmouseout = autoPlay();，如果这么写返回的是undefined，所以不能加括号：pic.onmouseout = autoPlay;；
3、setTimeout(autoPlay,2000);//打开页面2秒钟之后再开始轮播

秒客网

定时器 — 图片自动切换（轮播图）

相关文章