旋转时闪烁图像

<!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>

你好！这是我的代码，我想知道如何在不悬停在图像上的情况下每秒更改图像，因此它基本上旋转但每秒都会更改图像。我希望图片是图像/账单门.jpg和图像/卡片.jpg感谢您的帮助！

从鼠标悬停和鼠标悬停中删除函数调用，然后添加以下代码。

window.setInterval（function（）{

在这里调用你的函数

}， 1000）;

删除两个鼠标悬停，并实现 setInterval 方法

然而;

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

我希望这有所帮助。

相关内容

最新更新

热门标签：