轮播图

<!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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值