<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style>
*{margin:0;padding:0;}
#content{width:400px;height:400px;border:10px solid #ccc;margin:40px auto;position:relative;background:#f1f1f1;}
#content a{width:40px;height:40px;background:#000;border:5px solid #fff;position:absolute;top:175px;text-align:center;
text-decoration:center;line-height:40px;color:#fff;font-size:40px;font-weight:900;opacity:0.6;}
#content a:hover{opacity:0.9;}
#prev{left:10px;}
#next{right:10px;}
#text{position:absolute;bottom:0;left:0;width:400px;height:40px;line-height:40px;color:#fff;background:#000;text-align:center;
opacity:0.7;}
#span1{position:absolute;position:absolute;top:0;left:0;width:400px;height:40px;line-height:40px;color:#fff;background:#000;text-align:center;
opacity:0.7;}
#img1{width:400px;height:400px;}
</style>
</head>
<body>
<div id="content">
<a id="prev" herf="javascript:;"><</a>
<a id="next" herf="javascript:;">></a>
<p id="text">图片文字加载中...</p>
<span id="span1">数量正在计算中...</span>
<img id="img1" />
</div>
</body>
<script type="text/javascript">
var oPrev=document.getElementById("prev");
var oNext=document.getElementById("next");
var oText=document.getElementById("text");
var oSpan1=document.getElementById("span1");
var oImg1=document.getElementById("img1");
var arrUrl=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg",];
var arrText=["葫芦娃","魔鬼女","蓝精灵","贵财物","散点王","加菲鲁",];
var num=0;
//初始化
function fnTab(){
oSpan1.innerHTML=num+1+"/"+arrText.length;
oImg1.src=arrUrl[num];
oText.innerHTML=arrText[num];
}
fnTab();
oNext.οnclick=function(){
num++;
if(num==arrText.length){
num=0;
}
fnTab();
}
oPrev.οnclick=function(){
num--;
if(num==-1){
num=arrText.length-1;
}
fnTab();
}
</script>
</html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style>
*{margin:0;padding:0;}
#content{width:400px;height:400px;border:10px solid #ccc;margin:40px auto;position:relative;background:#f1f1f1;}
#content a{width:40px;height:40px;background:#000;border:5px solid #fff;position:absolute;top:175px;text-align:center;
text-decoration:center;line-height:40px;color:#fff;font-size:40px;font-weight:900;opacity:0.6;}
#content a:hover{opacity:0.9;}
#prev{left:10px;}
#next{right:10px;}
#text{position:absolute;bottom:0;left:0;width:400px;height:40px;line-height:40px;color:#fff;background:#000;text-align:center;
opacity:0.7;}
#span1{position:absolute;position:absolute;top:0;left:0;width:400px;height:40px;line-height:40px;color:#fff;background:#000;text-align:center;
opacity:0.7;}
#img1{width:400px;height:400px;}
</style>
</head>
<body>
<div id="content">
<a id="prev" herf="javascript:;"><</a>
<a id="next" herf="javascript:;">></a>
<p id="text">图片文字加载中...</p>
<span id="span1">数量正在计算中...</span>
<img id="img1" />
</div>
</body>
<script type="text/javascript">
var oPrev=document.getElementById("prev");
var oNext=document.getElementById("next");
var oText=document.getElementById("text");
var oSpan1=document.getElementById("span1");
var oImg1=document.getElementById("img1");
var arrUrl=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg",];
var arrText=["葫芦娃","魔鬼女","蓝精灵","贵财物","散点王","加菲鲁",];
var num=0;
//初始化
function fnTab(){
oSpan1.innerHTML=num+1+"/"+arrText.length;
oImg1.src=arrUrl[num];
oText.innerHTML=arrText[num];
}
fnTab();
oNext.οnclick=function(){
num++;
if(num==arrText.length){
num=0;
}
fnTab();
}
oPrev.οnclick=function(){
num--;
if(num==-1){
num=arrText.length-1;
}
fnTab();
}
</script>
</html>
8878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
