<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡自动切换</title> <style> body{ background: #fff; font: 14/1.4 "Microsoft Yahei";} ul{ padding: 0; margin: 0;} li{ list-style: none;} #box{ width: 400px; height: 300px; margin: 0 auto; background: #eee url(img/loader_ico.gif) no-repeat center; position: relative; } #box img{ width: 400px; height: 300px;} #box ul{ position: absolute;} #box li{ float: left; margin-right: 10px; width: 40px; height: 40px; margin-bottom: 5px; background: #ccc; cursor: pointer;} #box li.active{ background: #f60;} #box p ,#box span{ position: absolute; left: 0; width: 400px; height: 30px; line-height: 30px; text-align: center; color: #fff; background: rgba(0,0,0,.4);} #box span{ top: 0;} #box p{ bottom: 0; margin: 0;} </style> </head> <body> <div id="box"> <img src="" alt=""> <span>数量正在加载中……</span> <p>文字说明正在加载中……</p> <ul> </ul> </div> <script> window.onload = function(){ var oDiv = document.getElementById('box'); var oImg = oDiv.getElementsByTagName('img')[0]; var oSpan = oDiv.getElementsByTagName('span')[0]; var oP = oDiv.getElementsByTagName('p')[0]; var oUl = oDiv.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); var arrUrl = ['img/1.png','img/2.png','img/3.png','img/4.png']; var arrText = ['图片一','图片二','图片三','图片四']; var num = 0; var timer = null; // 动态创建生成所有的li for (var i = 0; i < arrUrl.length; i++) { oUl.innerHTML += '<li></li>' }; // 初始化 function init(){ oImg.src = arrUrl[num]; oSpan.innerHTML = 1 + num + '/' + arrUrl.length; oP.innerHTML = arrText[num]; // 清空所有li的class，当前添加class for(var i = 0; i < arrUrl.length; i++){ aLi[i].className = ''; } aLi[num].className = 'active'; }; // 函数调用 init(); // 点击切换图片 for(var i = 0; i < aLi.length; i++){ aLi[i].index = i; aLi[i].onclick = function(){ // 将当前索引赋给num num = this.index; init(); }; } // 自动播放函数 function autoPlay(){ // 通过定时器改变num实现循环播放 timer = setInterval(function(){ num ++; num %= arrUrl.length; init(); },2000); }; // 函数调用，立即自动播放 autoPlay(); // 设置一个定时器，2s后自动播放 // setTimeout(autoPlay,2000); // 鼠标移入，清空定时器 oDiv.onmouseover = function(){ clearInterval(timer); }; // 鼠标移开，开启定时器，再次自动播放 oDiv.onmouseout = function(){ autoPlay(); }; }; </script> </body> </html>