<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>每日案例</title>
<style type="text/css">
*{margin: 0;padding:0;}
.big{margin: 20px 400px;}
input{margin: 20px auto;}
.box{width: 500px;height: 333px;background: url(http://m1.img.srcdd.com/farm4/d/2014/0821/15/E86FC29B93DE3A534A25F0037AB56259_B1280_1280_500_333.jpeg) no-repeat;position: relative;}
a{width: 45px;height: 38px;display: block;background: #31004a;color: #fff;line-height: 38px;text-align: center;font-size: 24px;text-decoration: none;font-weight: bold;filter:alpha(opacity:30);opacity: 0.3;}
a:hover{filter:alpha(opacity:80);opacity: 0.8}
.left{position: absolute;top: 150px;left: 30px;}
.right{position: absolute;top: 150px;right: 30px;}
p,strong{width: 500px;height: 32px;background: #606060;line-height: 32px;text-align: center;color: #fff;filter:(opacity:30);opacity: 0.9;position: absolute;}
p{top: 0}
strong{bottom:0;font-weight: normal;}
#img1{width:500px;height: 333px;}
span{position: absolute;width: 400px;height: 30px;line-height: 30px;text-align: center;top: -25px;left: 0;font-family: "微软雅黑";}
</style>
<script type="text/javascript">
window.onload=function(){
var oP=document.getElementById('p1');
var oStrong=document.getElementById('text');
var oNext=document.getElementById('right1');
var oPrev=document.getElementById('left1');
var oImg=document.getElementById('img1');
var aBtn=document.getElementsByTagName('input');
var arrUrl=['http://m1.img.srcdd.com/farm4/d/2014/0821/15/E86FC29B93DE3A534A25F0037AB56259_B1280_1280_500_333.jpeg','http://m3.img.srcdd.com/farm5/d/2014/0821/15/54ABBEFCCC59B1CCA1C784330558B161_B1280_1280_500_333.jpeg','http://m2.img.srcdd.com/farm5/d/2014/0821/15/B07314A517906738D61B8A91BB28C756_B1280_1280_500_333.jpeg','http://m2.img.srcdd.com/farm5/d/2014/0821/15/F59226553539AD59A3F0B10F2E3BE230_B1280_1280_500_333.jpeg','http://m2.img.srcdd.com/farm5/d/2014/0821/15/E1ED0ADB8146F9AE638694214B26879B_B1280_1280_500_333.jpeg'];
var arrText=['如果没有回应那就不是爱情 ','我为什么喜欢独自旅行 ','关于版本及购买 ','健身教练教我的事 ','张佳玮身上不为人知的超能力 '];
var num=0;
var onOff=true;
aBtn[0].onclick=function(){onOff=true;document.getElementsByTagName('span')[0].innerHTML='列表循环';};
aBtn[1].onclick=function(){onOff=false;document.getElementsByTagName('span')[0].innerHTML='顺序循环';};
function fnTab(){
oStrong.innerHTML=arrText[num];
oP.innerHTML=num+1+'/'+arrText.length;
oImg.src=arrUrl[num];
}
fnTab();
oPrev.onclick=function(){
num--;
if (num==-1) {
if (onOff) {
num=arrText.length-1
}else{
alert("已经是最后一张");
num=0;
}
}
fnTab();
}
oNext.onclick=function(){
num++;
if (num==arrText.length) {
if (onOff) {
num=0;
}else{
alert("已经是最后一张");
num=arrText.length-1;
}
}
fnTab();
}
}
</script>
</head>
<body>
<div class="big">
<input type='button' value='循环切换'/>
<input type='button' value='顺序切换'/>
<div class="box"><span>列表循环</span>
<p id="p1">1/5</p>
<a id="left1" class="left" href="javascript:"><</a>
<a id="right1" class="right" href="javascript:">></a>
<strong id="text">如果没有回应那就不是爱情</strong>
<img id="img1"/>
</div>
</div>
</body>
</html>
