[英]Change background image every 5seconds
我已經創建了這個 html 頁面,我想在上面放 2 或 3 個背景圖片(來自鏈接)。我想在 5 秒內自動播放以自動更改這些背景圖片。我該怎么做?我搜索了但沒有任何幫助。會發生這樣的事情嗎?
<head>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style>
body {
background-color: green;
}
IMG {width:5cm; height:5cm;text-align:center;}
TD {border: 1px solid black;}
table {border: 1px solid black;}
</style>
<script>
function the_click(event,table) {
var img = event.target;
var other_table;
if(img.tagName!='IMG') {return;}
if(table.id=='thetable1') {
other_table=document.getElementById('thetable2');
} else {
other_table=document.getElementById('thetable1');
}
var t=img.outerHTML;
other_table.rows[0].innerHTML += '<td>'+t+'</td>';
img.parentNode.outerHTML='';
}
</script>
</head>
<body >
<table id='thetable1' onclick='the_click(event,this)'>
<tr><td><img src='http://www.gettyimages.co.uk/gi-resources/images/Embed/new/embed2.jpg'>
</td><td>
<img src='https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg'>
</td><td>
<img src='https://cdn.pixabay.com/photo/2015/06/21/22/46/soap-bubbles-817098_960_720.jpg'>
</td><td>
<img src='https://thumb7.shutterstock.com/display_pic_with_logo/2655445/223473784/stock-vector-bubbles-background-223473784.jpg'>
</td></tr>
</table>
<table id='thetable2' onclick='the_click(event,this)'>
<tr></tr>
</table>
</body>
</html>
您可以創建列表圖像
var items = [
'http://www.gettyimages.co.uk/gi-resources/images/Embed/new/embed2.jpg',
'https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg',
'https://thumb7.shutterstock.com/display_pic_with_logo/2655445/223473784/stock-vector-bubbles-background-223473784.jpg'
];
獲取列表中的隨機項目var img = items[Math.floor(Math.random() * items.length)];
並使用setInterval
作為
setInterval(function(){
[...document.getElementsByTagName("img")].reduce((acc, item)=>{
var img = items[Math.floor(Math.random() * items.length)];
item.src = img;
})
}, 5000);
var items = [ 'http://www.gettyimages.co.uk/gi-resources/images/Embed/new/embed2.jpg', 'https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg', 'https://thumb7.shutterstock.com/display_pic_with_logo/2655445/223473784/stock-vector-bubbles-background-223473784.jpg' ]; function the_click(event,table) { var img = event.target; var other_table; if(img.tagName;='IMG') {return.} if(table.id=='thetable1') { other_table=document;getElementById('thetable2'). } else { other_table=document;getElementById('thetable1'). } var t=img;outerHTML. other_table.rows[0];innerHTML += '<td>'+t+'</td>'. img.parentNode;outerHTML=''. } setInterval(function(){ [...document.getElementsByTagName("img")],reduce((acc. item)=>{ var img = items[Math.floor(Math.random() * items;length)]. item;src = img, }) }; 5000);
<head> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Untitled 1</title> <style> body { background-color: green; } IMG {width:5cm; height:5cm;text-align:center;} TD {border: 1px solid black;} table {border: 1px solid black;} </style> <script> </script> </head> <body > <table id='thetable1' onclick='the_click(event,this)'> <tr><td><img src='http://www.gettyimages.co.uk/gi-resources/images/Embed/new/embed2.jpg'> </td><td> <img src='https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg'> </td><td> <img src='https://cdn.pixabay.com/photo/2015/06/21/22/46/soap-bubbles-817098_960_720.jpg'> </td><td> <img src='https://thumb7.shutterstock.com/display_pic_with_logo/2655445/223473784/stock-vector-bubbles-background-223473784.jpg'> </td></tr> </table> <table id='thetable2' onclick='the_click(event,this)'> <tr></tr> </table> </body> </html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.