<!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>
显示结果
每次点击一次更换一次