<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#controls {
width: 400px;
margin: auto;
text-align: center;
}
#container {
width: 400px;
height: 400px;
border: 10px solid #eee;
position: relative;
background: gray;
margin: 10px auto 0;
}
#prev,
#next {
position: absolute;
background: black;
filter: alpha(opacity: 40);
opacity: 0.4;
font-size: 20px;
color: white;
width: 40px;
height: 40px;
border: 2px solid white;
line-height: 40px;
text-align: center;
top: 180px;
pointer: cursor;
text-decoration: none;
}
#prev:hover,
#next:hover {
filter: alpha(opacity: 80);
opacity: 0.8;
}
#order,
#info {
position: absolute;
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
background: black;
filter: alpha(opacity: 60);
opacity: 0.6;
font-size: 20px;
color: white;
}
#prev {
left: 0;
}
#next {
right: 0;
}
#picture {
height: 400px;
width: 400px;
}
#order {
top: 0;
}
#info {
bottom: 0;
}
</style>
</head>
<body>
<div id="controls">
<input id="round" type="button" value="循环播放">
<input id="single" type="button" value="顺序播放">
</div>
<div id="container">
<a href='javascript:' id="prev"><</a>
<a href='javascript:' id="next">></a>
<div id="order">1/4</div>
<div id="info">图片一</div>
<img src="images/6.jpg" width="400" height="400" id="picture" />
</div>
</body>
</html>
<script type="text/javascript">
var round = document.getElementById("round");
var single = document.getElementById("single");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var order = document.getElementById("order");
var info = document.getElementById("info");
var pic = document.getElementById("picture");
var arrSrc = ["images/6.jpg", "images/7.jpg", "images/8.jpg", "images/9.jpg"];
var arrTitle = ['图片一', '图片二', '图片三', '图片四'];
var num = 0;
//点击图片切换
function qiehuan() {
pic.src = arrSrc[num];
order.innerHTML = 1 + num + "/" + arrSrc.length;
info.innerHTML = arrTitle[num];
}
//点击循环播放按钮
round.onclick = function() {
alert("循环播放开始了！");
//点击左边
prev.onclick = function() {
num--;
if (num == -1) {
num = arrSrc.length - 1;
}
qiehuan();
}
//点击右边
next.onclick = function() {
num++;
if (num == arrSrc.length) {
num = 0;
}
qiehuan();
}
}
//点击顺序播放按钮
single.onclick = function() {
alert("顺序播放开始了!");
//点击右边
next.onclick = function() {
num++;
if (num < arrSrc.length) {
qiehuan();
}
if(num==arrSrc.length){
alert("这是最后一张图了");
num=arrSrc.length-1;
}
}
//点击左边
prev.onclick = function() {
num--;
if (num >-1) {
qiehuan();
}
if(num==-1){
alert("这是最后一张图了");
num=0;
}
}
}
</script>
| 
转播
