Flickering images while spinning
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>
Hello! This is my code and im wondering how i can change image every second without hovering over it, so it basically spins around but changes image every second. I want the pictures to be images/bill-gates.jpg and images/Card.jpg Thanks for your help!
2 answers
solution1
0 ACCPTED 2016-05-31 08:43:24
Remove the function call from onmouseover and out add the following code.
window.setInterval(function() {
/// call your function here
}, 1000);
solution2
0 2016-05-31 09:03:51
Remove both of the Mouse Overs, and implement the setInterval method
However;
Make sure you can default pack to the original, as you have two functions originally, I'd personally go for modifying your two existing function into one bigger one so when you call the function in the method setInterval, your function checks for both cases and replaces accordingly.
I hope this helps a little.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.