您的位置：首页 > Web前端 > JavaScript

JavaScript--数组实现照片轮换

2017-12-04 21:23 417 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background: #96D5E8;
}
#box{
width: 900px;
height:420px;
margin:10px auto;
position: relative;
border:4px solid #BCC9EF;
}
#box img{
width: 100%;
height: 100%;
border-radius: 20px;
}
#box a{
width: 50px;
height: 50px;
border:1px solid #1488F6;
text-decoration: none;
text-align: center;
font:20px/50px "simhei";
border-radius: 4px;
position: absolute;
top: 50%;
margin-top: -25px;

}
#left1{
left: -100px;
}
#right1{
right:-100px;
}
</style>
</head>
<body>
<div id="box">
<img src="img/1.jpg" alt="" id="img1">
<a href="#" id= "left1"><</a>
<a href="#" id = "right1">></a>
</div>
</body>
</html>
<script type="text/javascript">
var oImg = document.getElementById("img1");
var oRight = document.getElementById("right1");
var oLeft = document.getElementById("left1");
var arr = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.png'];//注意这里是中括号不是大括号
//以前用的是字符串拼接，但是出现了png并不全是jpg，所以用数组。

var num = 0;
oRight.onclick = function(){
if(num == arr.length)
num = 0;
oImg.src =arr[num];
num++;
}
oLeft.onclick = function(){
if(num < 0)
num = arr.length;
oImg.src = arr[num];
num--;
}

</script>


显示结果

每次点击一次更换一次





内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航