Менять фоновое изображение каждые 5 секунд - PullRequest
Новая
       3

Менять фоновое изображение каждые 5 секунд

0 голосов
/ 24 апреля 2020

Я создал эту 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>

1 Ответ

1 голос
/ 24 апреля 2020

Вы можете создать изображение списка 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...