<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">图片加载中……</div>
<div id="info">图片加载中……</div>
<img id="picture">
</div>
<script type="text/javascript">
// 封装一个函数 根据id找元素
function $(id){
return document.getElementById(id)
}
var imgsArr=["1.jpg","2.jpg","3.jpg","4.jpg"];
var imgsText=["图片一","图片二","图片三","图片四"];
var index=0;
var flag=true;
function infoShow(){
$("picture").src=imgsArr[index];
$("order").innerHTML=(index+1)+"/4";
$("info").innerHTML=imgsText[index];
}
infoShow();
$("prev").onclick=function(){
index--;
if(flag&&index==-1){
alert("已经是第一张了");
index=0;
}
if(!flag&&index==-1){
index=imgsArr.length-1;
}
infoShow();
}
$("next").onclick=function(){
index++;
if(flag&&index==imgsArr.length){
alert("已经是最后一张了");
index=imgsArr.length-1;
}
if(!flag&&index==imgsArr.length){
index=0;
}
infoShow();
}
$("round").onclick=function(){
alert("开始循环播放");
flag=false;
}
$("single").onclick=function(){
alert("开始顺序播放");
flag=true;
}
</script>
