图片轮播

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
var b = 1;
function showImg(type){
document.getElementById("imgDiv").innerHTML='<img src="img/'+b+'.jpg">';//修改div的内容
if(type == 'shang'){//点击上一页b--
b--;
if(b == 0){//如果是第一张 修改为最后一张
b = 6;
}
}else{//点击上一张 b自增
b++;
if(b==7){//如果是最后一张 修改为第一张
b = 1;
}
}
}
/*<div id="imgDiv"> <img src="img/1.jpg"> </div>
<button onClick="showImg('shang')">上一张</button>
<button onClick="showImg('xia')">下一张</button>*/
</script>
</head>

<body>
<div id="imgDiv">
<img src="img/1.jpg">
</div>
<button onClick="showImg('shang')">上一张</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button onClick="showImg('xia')">下一张</button>
</body>
</html>

posted on 2017-10-17 16:27  acaca  阅读(129)  评论(0编辑  收藏  举报