数组构成的轮播

最新推荐文章于 2022-08-05 11:03:05 发布

笔临

最新推荐文章于 2022-08-05 11:03:05 发布

阅读量383

点赞数















<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
body,p{margin: 0;padding: 0;}
#content{
width:600px;
height: 400px;
margin: 30px auto;
position:relative;
border: 10px solid #2a3ce6;
}
#content a{
width: 50px;
height: 50px;
border: 5px solid #da3ef6;
position: absolute;
top:170px;
line-height: 50px;
font-size: 30px;
font-weight: bold;
text-decoration: none;
background: #2a3ce6;
text-align: center;
filter:alpha(opacity:60);
opacity:0.6;
color:#fff;
}
#content a:hover{
filter:alpha(opacity:90);
opacity:0.9;
}
#prve{
left:10px;
}
#next{
right: 10px;
}
#content p{
text-align: center;
width: 600px;/*为块元素设置绝对定位,会漂浮起来,如果不设置宽高,默认是内容撑开宽高!*/
height: 28px;
font: 16px/28px "微软雅黑";
color:#fff;
background: #000;
filter:alpha(opacity:60);
opacity:0.6;
position: absolute;
left:0px;
}
#p1{
top: 0;
}
#p2{
bottom: 0;
}
img{
	width: 100%;
	height: 100%;
}
</style>


<script type="text/javascript">
window.onload = function () {
// 查找元素
var oNext = document.getElementById('next');
var oPrve = document.getElementById('prve');
var oP1 = document.getElementById('p1');
var oP2 = document.getElementById('p2');
var oImg = document.getElementById('Img');
/* 此处声明变量并赋初值，声明的意思是在此作用域范围内，在内存中开辟一块空间给你定义的变量，
然后赋值——把你给的值放在这个变量空间中。如果不先声明，则无法存放数据。*/
var num=0;
// 添加图片和信息
var arrUrl = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg']
var arrP2 = ['图片1','图片2','图片3','图片4','图片5']
// 初使化内容
function funtab() {
oP1.innerHTML = num+1+'/'+arrUrl.length;
oP2.innerHTML = arrP2[num];
oImg.src = arrUrl[num];
}
funtab();//函数必须先调用再执行

// 上一张
oPrve.onclick = function () {
num --;
if(num==-1){
num=arrUrl.length-1;
}
funtab();
};
// 下一张
oNext.onclick = function () {
num ++;
if(num==arrUrl.length){
num=0;
}
funtab();
};
};
</script>
<body>
<div id="content">
<a id="prve" href="#"><</a>
<a id="next" href="#">></a>
<p id="p1">图片个数加载中</p>
<p id="p2">图片信息加载中</p>
<img id="Img" src=""/>
</div>
</body>
</html>