Создание слайдера в ООП (JS и jQuery), проблемы с fadeIn () и fadeOut () - PullRequest
Новая
       5

Создание слайдера в ООП (JS и jQuery), проблемы с fadeIn () и fadeOut ()

0 голосов
/ 23 января 2019

В настоящее время я работаю над созданием слайдера с помощью jQuery и JavaScript. Мне удалось изменить работу слайдов, но я не могу найти никакого решения, чтобы добавить эффект fadeIn() и fadeOut(), работающий хорошо ...

Независимо от того, где я поместил эти эффекты в коде, он не работает для меня .... Я пытался поместить их в функцию changeImage(), но это ничего не меняет.

Я должен добавить, что это упражнение, и у меня нет возможности использовать какой-либо плагин.

Вот мой код: 

$(function(){

    //Current slide
    let i = 0;

    //Slides Objects
    let slide = {
        //Init slide
        init: function(image, title, description) {
            this.image = image;
            this.title = title;
            this.description = description;
        },

        //Return image source
        origin: function() {
            let source = this.image;
            return source;
        },

        //Return image title
        showTitle: function() {
            let headTitle = this.title;
            return headTitle;
        },

        //Return image description
        showDesc: function() {
            let descriptionContent = this.description;
            return descriptionContent;
        }
    };

    // Time Between Switch
    let time = 5000;
         
    // Slides creation
    let slide1 = Object.create(slide);
    slide1.init("image-slider-1.jpg", "Première slide", "Description 1");

    let slide2 = Object.create(slide);
    slide2.init("image-slider-2.jpg", "Deuxième slide", "Description 2");

    let slide3 = Object.create(slide);
    slide3.init("image-slider-3.jpg", "Troisième slide", "Description 3");

    let slide4 = Object.create(slide);
    slide4.init("image-slider-4.jpg", "Quatrième slide", "Description 4");

    //Adding slides to Array
    let slides = [];
    slides.push(slide1);
    slides.push(slide2);
    slides.push(slide3);
    slides.push(slide4);

    let animateSlides= setInterval(changeImage, time);

    $('.slides').on('mouseout', function(){
        animateSlides;
    });

    $('.slides').on('mouseover', function(){
        clearInterval(animateSlides);
    })

    

    function changeImage() {
        
        $('#slideImage').attr('src', slides[i].origin());
        $('#slideTitle').text(slides[i].showTitle());
        $('#slideDesc').text(slides[i].showDesc());

        //If current image number is not the last, pass to the next
        if (i < (slides.length - 1)) {
            i++;
            
        //Else, go to the beginning of the slider
        } else {
            i=0;
        }

    }

});
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Carte de location de vélos</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
</head>
<body>
    <div class="page">
        <section class="slider">
            <div class="slides">
                <img id="slideImage" src="" alt="">
                <div class="content">
                    <h2 id="slideTitle"></h2>
                    <p id="slideDesc"></p>
                </div>
            </div>
        </section>
        <section class="bike-booking container">
    
        </section>
    </div>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</html>

1 Ответ

0 голосов
/ 23 января 2019

Вы можете изменить обратный вызов setInterval - это будет fadeOut текущий слайд, затем изменить его содержимое и fadeIn. 

setInterval(function(){
   $('.slides').fadeOut("slow", function(){
      changeImage()
      $('.slides').fadeIn("slow");
    })
}, time);

Демо: 

$(function() {

  //Current slide
  let i = 0;

  //Slides Objects
  let slide = {
    //Init slide
    init: function(image, title, description) {
      this.image = image;
      this.title = title;
      this.description = description;
    },

    //Return image source
    origin: function() {
      let source = this.image;
      return source;
    },

    //Return image title
    showTitle: function() {
      let headTitle = this.title;
      return headTitle;
    },

    //Return image description
    showDesc: function() {
      let descriptionContent = this.description;
      return descriptionContent;
    }
  };

  // Time Between Switch
  let time = 5000;

  // Slides creation
  let slide1 = Object.create(slide);
  slide1.init("image-slider-1.jpg", "Première slide", "Description 1");

  let slide2 = Object.create(slide);
  slide2.init("image-slider-2.jpg", "Deuxième slide", "Description 2");

  let slide3 = Object.create(slide);
  slide3.init("image-slider-3.jpg", "Troisième slide", "Description 3");

  let slide4 = Object.create(slide);
  slide4.init("image-slider-4.jpg", "Quatrième slide", "Description 4");

  //Adding slides to Array
  let slides = [];
  slides.push(slide1);
  slides.push(slide2);
  slides.push(slide3);
  slides.push(slide4);

  changeImage();
  $('.slides').fadeIn("slow");
  let animateSlides = startAnimatingSlides(time)


  $('.slides').on('mouseout', function() {
    animateSlides = startAnimatingSlides(time);
  });

  $('.slides').on('mouseover', function() {
    clearInterval(animateSlides);
  })

  function startAnimatingSlides(interval) {
    return setInterval(function() {
      $('.slides').fadeOut("slow", function() {
        changeImage()
        $('.slides').fadeIn("slow");
      })
    }, interval);
  }

  function changeImage() {

    $('#slideImage').attr('src', slides[i].origin());
    $('#slideTitle').text(slides[i].showTitle());
    $('#slideDesc').text(slides[i].showDesc());

    //If current image number is not the last, pass to the next
    if (i < (slides.length - 1)) {
      i++;

      //Else, go to the beginning of the slider
    } else {
      i = 0;
    }



  }

});
.slides {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page">
  <section class="slider">
    <div class="slides">
      <img id="slideImage" src="" alt="">
      <div class="content">
        <h2 id="slideTitle"></h2>
        <p id="slideDesc"></p>
      </div>
    </div>
  </section>
  <section class="bike-booking container">

  </section>
</div>

PS.Я исправил перезапуск слайд-шоу на mouseover - вам нужно снова вызвать setInterval, animateSlides - просто дескриптор, чтобы очистить этот интервал.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...