Question

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background-color: grey;
            }
            img.Billgates {
                margin-top: 30px;
                border: 2px solid black;
                margin-bottom: 20px;
                display:block;
                margin-left:auto;
                margin-right:auto;
                -webkit-animation:spin 4s linear infinite;
                -moz-animation:spin 4s linear infinite;
                animation:spin 4s linear infinite;
            }
                @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
                @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
                @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
        </style>
    </head>

    <body>
        <script type="text/javascript" language="javascript">
    function billFunction(img) {
        var Bill = document.getElementById('BillGate');
        if (img.src.match("Bill")) {
            img.src = "images/bill-gates.jpg";
        } else {
            img.src = "images/Card.jpg";
        }
    }
    function outbillFunction(img) {
    var Out = document.getElementById('BillGate');
    if (img.src.match("Bill")) {
        img.src="images/Card.jpg";
    }
    else {
        img.src = "images/bill-gates.jpg";
    }
    }
    /* End of JavaScript code */
        </script>
        <img id="BillGate" src="images/bill-gates.jpg" alt="Bill Gates" class="Billgates" onmouseover="billFunction(this)" onmouseout="outbillFunction(this)"/>
    </body>
</html>

您好！这是我的代码，我想知道如何我可以每秒更改图像而不会悬停在它上面，所以它基本上旋转，但每秒都会改变图像。我希望图片是images / bill-gates.jpg和images / Card.jpg感谢您的帮助！

Answer 1

从onmouseover中删除函数调用，然后添加以下代码。

window.setInterval（（）的函数 {

///在此处调用您的函数

}，1000）;

Answer 2

删除两个Mouse Overs，并实现setInterval方法

然而;

确保您可以默认打包到原始文件，因为您最初有两个函数，我个人会将您的两个现有函数修改为一个更大的函数，因此当您在方法setInterval中调用该函数时，您的函数会检查两种情况并相应地替换。

我希望这会有所帮助。

旋转时闪烁的图像

2 个答案: