Проблема с fadeIn () / fadeOut () на слайдере OPP Javascript - PullRequest
Новая
       27

Проблема с fadeIn () / fadeOut () на слайдере OPP Javascript

0 голосов
/ 14 апреля 2019

Я работаю над созданием ползунка Javascript OOP, и я хотел бы, чтобы мои изображения плавно менялись с помощью эффета fadeIn () / fadeOut (), но не могу заставить его работать.

Я знаюбыли сообщения на подобные проблемы, но после прочтения их я не мог найти ответы, так как весь другой код, кажется, содержит все изображения, уже включенные в html, и некоторые правила Css, такие как display: none + использование определенных классов.Принимая во внимание, что в моем коде я использую массив для хранения своих изображений и переключения между ними.Плюс некоторые из этих постов довольно старые, и я предполагаю, что кодирование сильно изменилось с тех пор.

Я пытался поместить функции fadeIn () и fadeOut () в setInterval или непосредственно в forwardSlide ()и reverseSlide (), но он работает не так, как ожидалось.

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

Вот ссылка на кодовую ручку, если она помогает увидеть фактический слайдер с полным кодом: https://codepen.io/StraightAndAlert/pen/JVJeLP

, спасибо всем, кто мог помочь!

Вот мой код.

HTML 

<!DOCTYPE html>
<html lang="fr">
<!-- General Information -->
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

    <link rel="stylesheet" href="css/POOstyle.css" />

        <!--Fontawesome -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

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


        <title>Location de vélos - JCDecaux</title>
        <meta name="description" content="Où que vous soyez, réservez votre vélo via l'application JCDecaux" />

    </head>

    <body>
       <!-- Carousel  -->
        <section id="sectionCarousel">
            <div class="carousel-container" > 
                <div class ="carousel-slide" >     
                    <div id="imagesCarousel">
                      </div>
                </div>
            </div>
        </section>
      <script src="js/POOcarousel.js" ></script>
    </body>
</html>

CSS 

.carousel-container{
    position:relative;
    width: 80vw;
    margin: 20px auto 0 auto;
}

.carousel-slide{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;       
}

.carousel-slide img{
    width: 80vw;
    height: 400px;
}

JAVASCRIPT 


class Diaporama {   
    constructor(id, imagesSlider){
        this.idSlide = id;
        this.imagesSlider = imagesSlider;
        this.imgNumber = 0;
        this.currentSlide = this.imagesSlider[this.imgNumber];
        this.intervalTime = setInterval(this.forwardSlide.bind(this), 1000);
        this.playing = true;


        // Create the HTML element <img> that will display the slider
        this.newImage = document.createElement("img")
        this.newImage.id = "js-newImage";
        this.newImage.src = this.currentSlide;
        document.getElementById(this.idSlide).appendChild(this.newImage);


        // Event listeners ( Keyboard & clicks)
        document.addEventListener("keydown",  this.keyboard.bind(this));
    }


    // ---- Functions slide, forwardslide & reverseSlide ----


    forwardSlide(){
        this.imgNumber++;
        if (this.imgNumber > (this.imagesSlider.length - 1) ){
            this.imgNumber = 0;
        }
        this.currentSlide = this.imagesSlider[this.imgNumber];
        this.newImage.src = this.currentSlide;
    }

    reverseSlide(){
        this.imgNumber--;
        if (this.imgNumber < 0) {
            this.imgNumber = this.imagesSlider.length-1
        }
        this.currentSlide = this.imagesSlider[this.imgNumber];
        this.newImage.src = this.currentSlide; 
    }


    // ---- Function pause, play & play-pause ----

    pause(){
        this.pauseBtn.innerHTML = "&#9658;"; 
        this.playing = false;
        clearInterval(this.intervalTime); 
    }

    play(){
        this.pauseBtn.innerHTML = "&#10074;&#10074;"; 
        this.playing = true;
        this.forwardSlide(); 
        this.intervalTime = setInterval(this.forwardSlide.bind(this), 1000);
    }

    playPause(){
        if(this.playing === true){ 
                this.pause(); 
        }else{ 
            this.play(); 
        }
    }


    // Functions to pause the slider and change images

    nextPress(){
        this.pause();
        this.forwardSlide();
    }

    prevPress(){
        this.pause();
        this.reverseSlide();
    }


    // ---- Keyboard (keypress) ----

    keyboard(event){
        switch(event.key){
            case "ArrowRight":    
                this.nextPress();
                break;

            case "ArrowLeft":
                this.prevPress();
                break;

            case "Space":
                this.playPause();
                break;
        }  
    }
}
let Slider = new Diaporama("imagesCarousel",[
        "http://ocr.straightandalert.com/LocationVelo/pic1.jpg",
        "http://ocr.straightandalert.com/LocationVelo/pic2.jpg",
        "http://ocr.straightandalert.com/LocationVelo/pic3.jpg",
        "http://ocr.straightandalert.com/LocationVelo/pic4.jpg",
        "http://ocr.straightandalert.com/LocationVelo/pic5.jpg"
        ]);
...