0

Есть 4 картинки: первая, вторая, третья, четвертая.

Нужно, чтобы они сменяли одна другую через определенное время покругу как в слайдере. Вот что я сделал - https://jsfiddle.net/drebqy5j/

<img src="http://rako-apk.ru/design/test1.jpg" width="100%" border="0" alt="" id="bannerI">

Картинки меняются по очереди, но последняя картинка меняется на первую дольше остальных. Происходит короткое провисание. Как это исправить? Есть ли другие решения как реализовать смену картинок по кругу?

1
  • Вставьте сниппет с кодом в вопрос, а не ссылку.
    – ilyaplot
    28 июн 2016 в 13:08

2 ответа 2

3

Если код выше не подойдёт, потому что Вам нужно картинки с разных URL получать, то попробуйте так:

var params  = {
  now: -1,  

  links: [
    "https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_looks_one_48px-128.png",
    "https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_looks_two_48px-128.png",
    "https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_looks_3_48px-128.png",
    "https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_looks_4_48px-128.png"
  ]
};

function change_image(image) {
  if((params.now + 1) == params.links.length) {
    params.now = 0;
  } else {
    params.now++;
  }

  image.setAttribute("src", params.links[params.now]);
}

window.addEventListener("load", function() {
  var image = document.getElementsByClassName("image")[0];

  change_image(image);

  setInterval(function() {
    change_image(image);
  }, 1000);
}, false);
<img class="image">

1

Обнуление переменной происходило, но действие не выполнялось, отсюда одна итерация выполнялась без изменения картинки.

var numB = 0;

function CNumber() {
  numB = (numB < 4) ? numB+1 : 1;
  var myNumber= 'http://rako-apk.ru/design/test' + numB + '.jpg';
  document.getElementById('bannerI').src=myNumber;
}

setInterval(CNumber, 1000);
<img src="http://rako-apk.ru/design/test1.jpg" width="100%" border="0" alt="" id="bannerI">

1
  • Спасибо, то что надо. 28 июн 2016 в 13:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.