这次是完整版，网页点开就能自动播放
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
} .photo {
width: 400px;
height: 200px;
margin: 50px;
position: relative;
} .main {
width: 400px;
height: 200px;
position: relative;
} .main1 li {
width: 400px;
height: 200px;
list-style-type: none;
} .pto {
position: absolute;
left: 0;
top: 0;
} .pto1 {
width: 400px;
height: 200px;
background: red;
} .pto2 {
width: 400px;
height: 200px;
background: pink;
display: none;
} .pto3 {
width: 400px;
height: 200px;
background: blue;
display: none;
} .pto4 {
width: 400px;
height: 200px;
background: #f2ee36;
display: none;
} .btn {
width: 30px;
height: 30px;
position: absolute;
} .btn1 {
left: 0;
top: 85px;
background: url("img/left.png");
} .btn2 {
right: 0;
top: 85px;
background: url("img/right.png");
} .circleBtn {
position: absolute;
top: 170px;
right: 172px;
width: 56px;
height: 10px;
zoom: 1;
} .circleBtn span {
width: 10px;
height: 10px;
margin: 0 2px;
float: left;
cursor: pointer;
background: url("img/cir.png");
} .circleBtn .light {
background: url("img/oncir.gif");
}
</style> </head> <body>
<div class="photo" id="main">
<div class="main">
<ul class="main1" id="amain">
<li class="pto pto1">one</li>
<li class="pto pto2">two</li>
<li class="pto pto3">three</li>
<li class="pto pto4">four</li>
</ul>
</div> <span class="btn btn1" id="btn1"></span>
<span class="btn btn2" id="btn2"></span> <div class="circleBtn" id="circleBtn">
<span class="light"></span>
<span></span>
<span></span>
<span></span>
</div> </div> </body> </html>
下面的是js代码，函数的定义都有注释，不明白的可以看前面的单个焦点图的随笔，图片是img文件夹下
<script>
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
} var btnleft = $("btn1");
var btnright = $("btn2"); //1.先做按钮特效
//定义自定义函数用于按钮
function onBtn(one, two) {
one.style.background = two;
}
//当鼠标移动至左边按钮调用onBtn函数
btnleft.onmouseenter = function() {
onBtn(this, "url(img/onleft.gif) no-repeat");
}
//同理
btnleft.onmouseleave = function() {
onBtn(this, "url(img/left.png) no-repeat");
}
//当鼠标移动至右边按钮调用onBtn函数
btnright.onmouseenter = function() {
onBtn(this, "url(img/onright.gif) no-repeat");
}
//同理
btnright.onmouseleave = function() {
onBtn(this, "url(img/right.png) no-repeat");
} //2.设置图片，小框同时移动
//定义变量
var pto = $("amain").getElementsByTagName("li");
var cirBtn = $("circleBtn").getElementsByTagName("span");
var index = 0;
var timer = null;
var div = $("main"); //设置定时器timer
//timer = setInterval(autoPlayRight, 2000); //设置自动函数
function autoPlayRight() {
if (index < pto.length - 1) {
index++;
} else {
index = 0;
}
//调用清除图片函数
clearPto();
//调用显示图片函数，代入参数index
showPto(index);
//调用清除小框函数
clearBtn();
//调用显示小框函数，代入参数index
showBtn(index); } //定义清除图片的函数
function clearPto() {
for (var i = 0; i < pto.length; i++) {
pto[i].style.display = "none";
}
} //定义显示图片的函数
function showPto(x) {
for (var i = 0; i < pto.length; i++) {
if (i == x) {
pto[i].style.display = "block";
}
}
} //定义清除小框的函数
function clearBtn() {
for (var i = 0; i < cirBtn.length; i++) {
cirBtn[i].className = "";
}
} //定义显示小框的函数
function showBtn(y) {
for (var i = 0; i < cirBtn.length; i++) {
if (i == y) {
cirBtn[i].className = "light";
}
//这里重要了，如果不把返回值赋值给index，鼠标离开小框，
//自动循环会执行上一次的循环，而不是本次鼠标离开时，显示下一张图片
index = y;
}
} //3.设置鼠标点击事件
btnright.onclick = autoPlayRight;
btnleft.onclick = btnLeft; function btnLeft() {
if (index == 0) {
index = pto.length - 1;
} else {
index--;
}
//调用清除图片函数
clearPto();
//调用显示图片函数，代入参数index
showPto(index);
//调用清除小框函数
clearBtn();
//调用显示小框函数，代入参数index
showBtn(index);
} //4.设置鼠标移动至焦点图上时候停止自动播放
//把定时器放入自定义函数方便调用
function start() {
timer = setInterval(autoPlayRight, 2000);
} //把清除定时器放入自定义函数便于调用
function stop() {
clearInterval(timer);
}
//鼠标进入焦点图则停止自动播放
div.onmouseenter = stop;
//鼠标离开则开始自动
div.onmouseleave = start;
//设置当前只有一个定时器
if (timer) {
clearInterval(timer);
timer = null;
}
//设置网页点开时就自动播放
start(); //5.设置图片随小框变化
for (var i = 0; i < cirBtn.length; i++) {
cirBtn[i].id = i;
cirBtn[i].onmouseenter = function() {
clearInterval(timer);
//调用清除图片函数
clearPto();
//调用显示图片函数，代入参数index
showPto(this.id);
//调用清除小框函数
clearBtn();
//调用显示小框函数，代入参数index
showBtn(this.id);
} }
</script>