028--Hbuilder--js--事件绑定、信号量思想2_综合

在这里插入图片描述
点击按钮可以切换下一张图片，一共五张照片，轮回切换。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="shortcut icon" href="//www.baidu.com/favicon.ico" type="image/x-icon"/><style type="text/css">*{
    margin: 0;padding: 0;}div{
    position: relative;width: 300px;height: 400px;margin: 100px auto;border: 1px solid black;}img{
    width: 300px;height: 400px;}#haha1{
    position: absolute;width: 40px;height: 20px;right: 0px;top: 40%;}#haha{
    position: absolute;width: 40px;height: 20px;left: 0px;top: 40%;}</style></head><body><div><button id = "haha">&lt;</button><img src="img/0.jpg"  id ="haha2"/><button id = "haha1">&gt;</button></div></body>
</html>
<script type="text/javascript">var hahaha = document.getElementById("haha");var hahaha1 = document.getElementById("haha1");var img = document.getElementById("haha2");var div = 0;hahaha.onclick = function(){
    div++;if(div>4){
    div=0;}img.src = "img/" + div +".jpg";}hahaha1.onclick = function(){
    div--;if(div<0){
    div=4;}img.src = "img/" + div +".jpg";}
</script>