用按钮控制轮播图
2018-08-21 本文已影响0人
相遇无眠
用按钮来控制轮播图，核心就是通过按钮的点击事件来改变图片的路径。
以下就来介绍怎么实现：
1、先创建一个主体
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<div class="box1">
<input type="button" id="up" value="上一张" />
<input type="button" id="down" value="下一张" />
</div>
<div class="box2">
<img src="img/img/img_01.png" id="img" />
</div>
</div>
</body>
</html>
2、用css进行修饰
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 600px;
height: 260px;
margin: 0 auto;
overflow: hidden;
background-color: black;
position:relative;
}
.box1{
z-index: 100;
position: relative;
top: 240px;
left: 450px;
}
.box2{
z-index: 50;
margin: 0px;
padding: 0px;
}
.box2 img{
margin: 0;
/*border: 1px solid black;*/
padding: 0;
position: relative;
top:-20px;
}
</style>
这个里面由于我是用盒子套的按钮，所以后面会在图片上方出现一片黑色背景，这是由按钮的盒子撑出来的，你可以在css里面对按钮的盒子的宽高进行定义，最后在从img的 修饰里面用相对定义的top减去自己对按钮盒子定义的高度即可。
当然你也可以不用那个，你可以先直接在img的修饰里面先写上一个估值，然后从浏览器里面的检查里进行调试，最后再回去改。
3、用js来实现按钮的点击事件
<script type="text/javascript">
onload = function(){
var img = document.getElementById('img')
var i=1
up.onclick = function(){
i--
if(i<0){
i=4
}else if(i==0){
i=5
}
imgname = 'img/img/img_0'+i+'.png'
img.src = imgname
}
down.onclick = function(){
i++
if(i>5){
i=1
}
imgname = 'img/img/img_0'+i+'.png'
img.src = imgname
}
}
</script>
这个里面就相对理解起来简单一些，点击相应的按钮，会做出相应的反应。所谓的上一张或下一张就是把图片的路径进行更改，当然这个图片的路径，你要设置的尽量简单些，最好是序号排列。不然在写判断时会麻烦些。
好了，以上就是我想做出的分享！
