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

大家好，我是讯享网，很高兴认识大家。

自动播放轮播图，鼠标放在图片上轮播停止；鼠标移开，继续轮播；
一种是打开页面就开始轮播；
另一种是打开图片过几秒再开始轮播（具体看下面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秒钟之后再开始轮播

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

相关推荐