1

Как видите тут рекурсия которая меняет картинку каждые 2 секунды.Мне нужно сделать плавный переход картинок без абсолютного позиционирования.Можно и в jquery написать элементарный код который будет работать так как мне нужно.

var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none"; //здесь вместо display(none) написать opacity(0) я уже пробовал  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  ////здесь вместо display(block) написать opacity(1) я уже пробовал  
    setTimeout(carousel, 2000); // Менят изображения каждые 2 секунды 
}
.mySlides {
  position:relative;
  width:300px;
  height:200px;
}
<img src="http://www.prisnilos.su/kcfinder/upload/image/articles1/devushka11.jpg" class="mySlides">
<img src="http://oboi-dlja-stola.ru/file/11951/760x0/16:9/%D0%9A%D1%80%D0%B0%D1%81%D0%B8%D0%B2%D0%B0%D1%8F-%D0%B4%D0%B5%D0%B2%D1%83%D1%88%D0%BA%D0%B0.jpg" class="mySlides">

##

1 ответ 1

1

Чтобы достичь эффекта абсолютного позиционирования, можно второй слайд сместить влево на ширину одного слайда через margin-left: -300px; или left: -300px; (имея position: relative;).

// Когда документ загружен.
$(function() {

  var index = 0
  // Все слайды.
    , slides = $('.mySlides');
        
  function carousel() {
    index++;
    if (index > slides.length - 1) {
      index = 0;
    }
    // Показать активный слайд за 1 сек.
    var active = slides.eq(index).animate({ opacity: 1 }, 1000);
    // Скрыть все слайды кроме активного за 1 сек.
    slides.not(active).animate({ opacity: 0 }, 1000);
  }

  // Запустить таймер.
  setInterval(carousel, 2000);
  
});
.mySlides {
  /*position: relative;*/
  width: 300px;
  height: 200px;
}

.slide2 {
  margin-left: -300px;
  /*left: -300px;*/
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://www.prisnilos.su/kcfinder/upload/image/articles1/devushka11.jpg" class="mySlides slide1">
<img src="http://oboi-dlja-stola.ru/file/11951/760x0/16:9/%D0%9A%D1%80%D0%B0%D1%81%D0%B8%D0%B2%D0%B0%D1%8F-%D0%B4%D0%B5%D0%B2%D1%83%D1%88%D0%BA%D0%B0.jpg" class="mySlides slide2">

1
  • спасибо огромное
    – Randall
    28 апр 2017 в 18:50

Ваш ответ

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

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