0

Всем привет помогите пожалуйста, у меня тут на сайте нужно выкладывать новости, и есть анонсы новостей, там просто заголовок и картинка.Недавно решить сделать так что-бы картинка в анонсе была как слайд-шоу. Я сделал, но работает только с одним анонсом новости, а с другим- нет. Вот шаблон новости: HTML Код:

<div id="header"  class="div" 
style = "width:100%; 
height:100%; 
border: 2px solid #eec55f;">

 <div style = "position:relative;
width: 100%;
height: 100%;">

<img src="https://bipbap.ru/wp-content/uploads/2018/06/img_resize.jpg"  style="position:relative; 
opacity: 0;
width: 100%;
height: 100%;">

<img src="https://bipbap.ru/wp-content/uploads/2018/06/img_resize.jpg" id="img_1"  style="position:absolute;
right: 0px;
top: 0px;
width: 100%;"  />

<img src="https://bipbap.ru/wp-content/uploads/2018/06/3c980dd2e9c909ada7377cc89885231b.jpg" id="img_2"  style="position:absolute;
right: 0px;
top: 0px;
width: 100%;
 opacity: 0;
 filter: alpha(opacity=0); "  />

<img src="https://bipbap.ru/wp-content/uploads/2018/06/background-backgrounds-floral-flower-Favim.com-2429619.jpg" id="img_3"  style="position:absolute;right: 0px;top: 0px;width: 100%; opacity: 0; filter: alpha(opacity=0); "  />

</div>

</div>

А вот код js JS Код:

$(document).ready(function change_image(){

var image_count = 3;

 var interval = 5000; //пауза

 var time_out = 15; //скорость смены картинки

 var i = image_count;

 var timeout;

 var opacity = 100;

opacity--;

var j = i + 1;

var current_image = 'img_' + i;

if (i == image_count) j = 1;

var next_image = 'img_' + j;

document.getElementById(current_image).style.opacity=opacity/100;

 document.getElementById(current_image).style.filter='alpha(opacity='+opacity+')';

 document.getElementById(next_image).style.opacity= (100-opacity)/100;

 document.getElementById(next_image).style.filter=' alpha(opacity='+(100-opacity)+')';

 timeout = setTimeout("change_image()", time_out);

if (opacity==1) {

 opacity = 100;

 clearTimeout(timeout);

i++;

if (i>image_count) i=1;

timeout = setTimeout("change_image()", interval);

}   

change_image()

});

var image_count = 3;
 var interval = 5000; //пауза
 var time_out = 15; //скорость смены картинки
 var i = image_count;
 var timeout;
 var opacity = 100;
 function change_image() {
 opacity--;
 var j = i + 1;
 var current_image = 'img_' + i;
 if (i == image_count) j = 1;
 var next_image = 'img_' + j;
 document.getElementById(current_image).style.opacity=opacity/100;
 document.getElementById(current_image).style.filter='alpha(opacity='+opacity+')';
 document.getElementById(next_image).style.opacity= (100-opacity)/100;
 document.getElementById(next_image).style.filter=' alpha(opacity='+(100-opacity)+')';
 timeout = setTimeout("change_image()", time_out);
if (opacity==1) {
 opacity = 100;
 clearTimeout(timeout);
i++;
if (i>image_count) i=1;
timeout = setTimeout("change_image()", interval);
 }
 }
change_image()
<div id="header"  class="div" 
style = "width:100%; 
height:100%; 
border: 2px solid #eec55f;">

 <div style = "position:relative;
width: 100%;
height: 100%;">

<img src="https://bipbap.ru/wp-content/uploads/2018/06/img_resize.jpg"  style="position:relative; 
opacity: 0;
width: 100%;
height: 100%;">

<img src="https://bipbap.ru/wp-content/uploads/2018/06/img_resize.jpg" id="img_1"  style="position:absolute;
right: 0px;
top: 0px;
width: 100%;"  />

<img src="https://bipbap.ru/wp-content/uploads/2018/06/3c980dd2e9c909ada7377cc89885231b.jpg" id="img_2"  style="position:absolute;
right: 0px;
top: 0px;
width: 100%;
 opacity: 0;
 filter: alpha(opacity=0); "  />

<img src="https://bipbap.ru/wp-content/uploads/2018/06/background-backgrounds-floral-flower-Favim.com-2429619.jpg" id="img_3"  style="position:absolute;right: 0px;top: 0px;width: 100%; opacity: 0; filter: alpha(opacity=0); "  />

</div>
</div>

Ребята помогите пожалуйста, всю голову сломал

11
  • Код не рабочий.
    – Gonzo
    21 мая 2019 в 18:08
  • Он рабочий, картинки из интернета, но там скрипт не подключён, нужно подключить в html
    – Антон
    21 мая 2019 в 18:12
  • Нерабочий код. Разметка не соответствует js коду.
    – Gonzo
    21 мая 2019 в 18:13
  • У Вас к коде точно так <script src=>"js/anons.js"</script>?
    – XelaNimed
    21 мая 2019 в 18:23
  • Ой нет, у меня написано <script src="js/anons.js"></script>
    – Антон
    21 мая 2019 в 18:26

1 ответ 1

0

Если опираться на существующий код, то можно сделать вот так:

var image_count = 3;
var interval = 1000; //пауза
var time_out = 15; //скорость смены картинки
var i = image_count;
var timeout;
var opacity = 100;

function change_image() {
  opacity--;
  var j = i + 1;
  var current_image = document.getElementsByClassName('img_' + i);
  if (i == image_count) j = 1;
  var next_image = document.getElementsByClassName('img_' + j);
  
  restyleImg(current_image, next_image);

  timeout = setTimeout("change_image()", time_out);
  if (opacity == 1) {
    opacity = 100;
    clearTimeout(timeout);
    i++;
    if (i > image_count) i = 1;
    timeout = setTimeout("change_image()", interval);
  }
}

function restyleImg(cur, next) {
  Array.prototype.forEach.call(cur, function(el) {
    el.style.opacity = opacity / 100;
    el.style.filter = 'alpha(opacity=' + opacity + ')';
  });
  Array.prototype.forEach.call(next, function(el) {
    el.style.opacity = (100 - opacity) / 100;
    el.style.filter = ' alpha(opacity=' + (100 - opacity) + ')';
  })
}

change_image()
<div id="header" class="div" style="width:100%;height:100%;border: 2px solid #eec55f;">
  <div style="position:relative;width: 100%;height: 100%;">
    <img src="https://bipbap.ru/wp-content/uploads/2018/06/img_resize.jpg" style="position:relative;opacity: 0;width: 100%;height: 100%;">
    <img src="https://bipbap.ru/wp-content/uploads/2018/06/img_resize.jpg" class="img_1" style="position:absolute;right: 0px;top: 0px;width: 100%;" />
    <img src="https://bipbap.ru/wp-content/uploads/2018/06/3c980dd2e9c909ada7377cc89885231b.jpg" class="img_2" style="position:absolute;right: 0px;top: 0px;width: 100%;opacity: 0;filter: alpha(opacity=0); " />
    <img src="https://bipbap.ru/wp-content/uploads/2018/06/background-backgrounds-floral-flower-Favim.com-2429619.jpg" class="img_3" style="position:absolute;right: 0px;top: 0px;width: 100%;opacity: 0;filter: alpha(opacity=0); " />
  </div>
  <div style="position:relative;width: 100%;height: 100%;">
    <img src="https://bipbap.ru/wp-content/uploads/2018/06/img_resize.jpg" style="position:relative;opacity: 0;width: 100%;height: 100%;">
    <img src="https://bipbap.ru/wp-content/uploads/2018/06/img_resize.jpg" class="img_1" style="position:absolute;right: 0px;top: 0px;width: 100%;" />
    <img src="https://bipbap.ru/wp-content/uploads/2018/06/3c980dd2e9c909ada7377cc89885231b.jpg" class="img_2" style="position:absolute;right: 0px;top: 0px;width: 100%;opacity: 0;filter: alpha(opacity=0); " />
    <img src="https://bipbap.ru/wp-content/uploads/2018/06/background-backgrounds-floral-flower-Favim.com-2429619.jpg" class="img_3" style="position:absolute;right: 0px;top: 0px;width: 100%;opacity: 0;filter: alpha(opacity=0); " />
  </div>

1
  • Спасибо большое!
    – Антон
    23 мая 2019 в 9:26

Ваш ответ

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

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