核心提示：!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN https://www.w3.org/TR/xhtml1/DTD/xhtml1-...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
* {
padding: 0px;
margin: 0px;
}
#content {
width: 400px;
height: 400px;
border: 10px solid #ccc;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
}
#top,#bottom {
width: 400px;
height: 40px;
background: #000;
color: #fff;
filter(opacity: 80);
opacity: 0.8;
text-align: center;
line-height: 40px;
position: absolute;
}
#top {
top: 0;
}
#bottom {
bottom: 0;
}
#prev,#next {
position: absolute;
top: 50%;
margin-top: -20px;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
text-decoration: none;
background: #000;
color: #fff;
font-size: 30px;
font-weight: bold;
}
#prev {
left: 10px;
}
#next {
right: 10px;
}
#img1 {
width: 400px;
height: 400px;
}
#tab {
position: absolute;
width: 400px;
height: 100px;
margin-top: -90px;
text-align: center;
}
#info {
margin-top: 10px;
font-size: 20px;
}
#tab input {
width: 70px;
height: 30px;
}
.active {
background: yellow;
}
</style>
</head>
<body>
<p id="content">
<p id="tab">
<input id="loopBtn" type="button" value="循环切换" />
<input id="orderBtn" type="button" value="顺序切换" />
<p id="info">图片顺序加载中......</p>
</p>
<p id="top">图片数量加载中......</p>
<a id="prev" href="javascript：;"><</a>
<a id="next" href="javascript：;">></a>
<p id="bottom">图片信息加载中.....</p>
<img id="img1" />
</p>
<script>
window.onload = function () {
var top = $('top'), bottom = $('bottom'),
prev = $('prev'), next = $('next'),
img = $('img1'), loopBtn = $('loopBtn'),
orderBtn = $('orderBtn'), info = $('info'), tab = $('tab');
// 切换图片顺序的按钮
var btns = tab.getElementsByTagName('input');
// 第几张图片
var num = 0;
// 图片url
var picSrc = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg'];
// 图片的数量
var picLen = picSrc.length;
// 图片信息
var picInfo = ['高冷美女','终结者','性感美女','妖娆美女'];
// 循环方式
var loopMethod = 1; // 1,循环切换；0，,顺序切换
// 循环信息
var loopInfo = ['图片可以从最后一张转到第一种切换','图片只能切换到最后一张或者第一张'];
changePic();
// 循环切换
loopBtn.onclick = function () {
loopMethod = 1;
changeOrder();
}
// 顺序切换
orderBtn.onclick = function () {
loopMethod = 0;
changeOrder();
}
// 上一张
prev.onclick = function () {
num--;
// 1,循环切换；0，,顺序切换
if(loopMethod) {
if (num === -1) num = picLen - 1;
changePic();
} else {
if (num === -1) {
num = 0;
alert('已经是第一张图片啦!');
}
changePic();
}
}
// 下一张
next.onclick = function () {
num++;
// 1,循环切换；0，,顺序切换
if(loopMethod) {
if (num === picLen) num = 0;
changePic();
} else {
if (num === picLen) {
num = picLen - 1;
alert('已经是最后一张图片啦!');
}
changePic();
}
}
// 切换顺序
function changeOrder () {
// 情况按钮的高亮
for ( var i = 0, len = btns.length; i < len;i++) {
btns[i].className = '';
}
// 循环切换 1，循环；0，顺序
info.innerHTML = loopInfo[1 - loopMethod];
loopMethod === 1 ?
loopBtn.className = 'active' :
orderBtn.className = 'active';
}
// 切换图片
function changePic () {
changeOrder();
top.innerHTML = num + 1 + ' / ' + picLen;
bottom.innerHTML = picInfo[num];
img.src = picSrc[num];
}
// id选择器
function $(id) { return document.getElementById(id);}
}
</script>
</body>
</html>
效果图：
