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

基于js实现简单轮播图

2020-07-12 17:19 239 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航