js自增图片切换

使用js自增进行图片的切换

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>
<body>
    <img id="img1" src="img/10.jpg" onclick="qh()" widht="200px" height="200px"
    title="点击切换图片" style="margin: auto;display: block;">
    <br><br><br><br>
    <button onclick="qh()"style="display: block;width: 100px;height: 50px;margin: auto;background: pink;color: blueviolet;font-size:30px;">点我</button>
<script type="text/javascript">
    var a = 10;
    function qh(){
        a++;
        document.getElementById("img1").src="img/"+a+".jpg" ;
        if(a==13)
        a=10;
    }
</script>
</body>
</html>

效果如下点击按钮就可以进行切换下一张

猜你喜欢

转载自www.cnblogs.com/niuyaomin/p/11708853.html