JS 两张图片的切换

来源：互联网发布：图像算法工程师笔试编辑：程序博客网时间：2024/06/11 23:51

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>两张图片轮换</title>
    <script type="text/javascript">
        var numb = 0;
        var imgnumb = 1;

        function showimg() {
            /*numb++;
            if (numb % 2 == 0) {
            document.getElementById('img1').setAttribute('src', 'images/1.jpg');
            }
            else {
            document.getElementById('img1').setAttribute('src', 'images/2.jpg');
            }*/
            //肖维哲

            /*if (numb == 0) {
            document.getElementById('img1').setAttribute('src', 'images/2.jpg');
            numb = 1;
            }
            else {
            document.getElementById('img1').setAttribute('src', 'images/1.jpg');
            numb = 0;
            }*/
        }
        function imgfor() {
            imgnumb++;
            document.getElementById('img1').setAttribute('src', 'images/' + imgnumb + '.jpg');
            if (imgnumb == 6) {
                imgnumb = 0;
            }
        }
        var clearid;
        function clearfun() {
            clearInterval(clearid);
        }
        clearid = setInterval(imgfor, 1000);
    </script>
</head>
<body>
    <img alt="" id="img1" class="style1" src="images/1.jpg" width="500px" height="500px" />
    <input type="button" value="两张图片切换" onclick="showimg();" />
    <br />
    <input type="button" value="图片轮换" onclick="imgfor();;" />
    <br />
    <input type="button" value="结束执行" onclick="clearfun();" />
</body>
</html>