<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片切换</title>
</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">图片加载中...</div>
<div id="info">图片加载中...</div>
<img id="picture"/>
</div>
</body>
</html>
<script>
function id(id){
return document.getElementById(id) ;
}
var index = 0 ;
var context = ["一","二","三","四"] ;
var srcArr = ["图片一","图片二","图片三","图片四"] ;
var flag = 0 ;
function showImg(){
id("order").innerHTML = (index+1)+"/4" ;
id("info").innerHTML = "图片"+context[index] ;
id("picture").src = "img/"+srcArr[index]+".jpg" ;
}
//调用函数,初始化页面内容
showImg() ;
id("next").onclick = function(){
if(index == 3 && flag == 1){
index = 3 ;
alert("这是最后一张了...")
}else if(index == 3 && flag == 0){
index = 0 ;
}else{
index++;
}
showImg() ;
}
id("prev").onclick = function(){
if (index == 0 && flag == 1) {
index = 0 ;
alert("这是第一张了...") ;
} else if (index == 0 && flag == 0) {
index = 3 ;
} else{
index--;
}
showImg() ;
}
id("round").onclick = function(){
alert("开始循环播放了!");
flag = 0 ;
}
id("single").onclick = function(){
alert("开始顺序播放了!") ;
flag = 1 ;
}
</script>
<style>
#controls{
width: 400px;
margin: 0 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: appha(opacity:80);
opacity: 0.8;
}
#order,#info{
position: absolute;
width: 100%;
height: 30px;
text-align: center;
line-height: 30px;
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>
效果图: