每 5 秒更换一次背景图片

Question

I have create this html page and I want to put 2 or 3 background images on that(from links).I want in 5 seconds,autoplay to change auto those background images.How can I do it?I searched but nothing was helpful.Can it happen something like that?我已经创建了这个 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>

Answer 1

You can create list image您可以创建列表图像

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'
    ];

Get random item in list as var img = items[Math.floor(Math.random() * items.length)];获取列表中的随机项目var img = items[Math.floor(Math.random() * items.length)];

And use setInterval as并使用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>

每 5 秒更换一次背景图片

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-04-24 11:52:53

每 5 秒更换一次背景图片

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-04-24 11:52:53

解决方案1
1 已采纳 2020-04-24 11:52:53