Question

我已经创建了这个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

您可以创建列表图像

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>

每5秒更改一次背景图片

1 个答案: