Смена фонового изображения и теста по таймеру

@kmaffa · Регистрация: 29.10.2012

Author24 — интернет-сервис помощи студентам

Есть блок div с фонового изображения и в нем текстовая гиперссылка

HTML5

1
2
3

<div style="background-image: url(img/showBG1.png); .... "> 
  <a href="..." style="...">Фотография концерта 2016 года</a> 
</div>

Есть несколько изображений и к ним есть подписи и адреса, как сделать чтобы по таймеру сменялись изображения и выводился текст в виде гиперссылки от этому изображению?

@TFullControl · 20.08.2017, 17:13

Можно сделать так:

HTML5

1
2
3

<div class="conteiner"> 
  <a href="#" style="">Картинка такая</a> 
</div>

CSS

.conteiner {
    background-image: url([url]https://s00.yaplakal.com/pics/pics_original/4/1/0/6874014.jpg);[/url]
    width: 400px;
    height: 300px;
    border: 1px solid;
}
a{
  color: red;
}

Javascript

//Массив с урлами изображений
var img = ["https://s00.yaplakal.com/pics/pics_original/4/1/0/6874014.jpg",
"https://s00.yaplakal.com/pics/pics_original/9/1/0/6874019.jpg",
"https://s00.yaplakal.com/pics/pics_original/0/2/0/6874020.jpg"];
//Массив с описанием изображений
var description = ["Картинка такая", "Картинка сякая", "Картинка Эдакая"];
var conteiner = document.querySelector(".conteiner");
var a = document.querySelector(".conteiner a");
var i = 0;
setImg = function(){
    conteiner.style.backgroundImage ="url("+img[i]+")";
  a.href = img[i];
  a.innerText =description[i];
  i = (i === img.length-1) ? 0 : i+1;
}
setInterval(setImg, 1000);

https://jsfiddle.net/jqtL95d2/4/

	20.08.2017, 17:13

Смена фонового изображения и теста по таймеру

Решение