<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width: 200px;
height: 200px;
display:block;
}
</style>
</head>
<body>
<div class="swiper">
<div class="swiper-content">
<img src="../images/lunbo1.jpg" alt="" />
</div>
<div class="swiper-control">
<button >上一张</button>
<button >下一张</button>
</div>
</div>
<script>
var img = document.getElementsByTagName('img')[0];
var prev = document.getElementsByTagName('button')[0];
var next =document.getElementsByTagName('button')[1];
var arr = ['../images/lunbo1.jpg','../images/lunbo1.jpg','../images/lunbo3.jpg','../images/lunbo4.jpg'];
var current = 1;
var nextPic = function(){
current++;
if(current>arr.length)
{
current = 1;
}
console.log(current);
img.src = arr[current-1];
};
var prevPic = function(){
current--;
if(current<1)
{
current=arr.length;
}
console.log(current);
img.src = arr[current-1];
};
prev.onclick = prevPic;
next.onclick = nextPic;
</script>
</body>
</html>
2337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
