Question

我正在构建Javascript OOP滑块，我希望使用fadeIn（）/ fadeOut（）效果使图像平滑变化，但无法使其正常工作。

我知道有类似问题的帖子，但是在阅读了所有这些内容之后，我找不到答案，因为所有其他代码似乎都已经将所有图像包含在html中，并且有些CSS规则（例如display）：none + use具体类别。而在我的代码中，我使用数组来存储图像并从一个图像切换到另一个图像。再加上其中一些帖子的年代很久，我认为自那时以来编码发生了很大变化。

我试图将fadeIn（）和fadeOut（）函数放在setInterval中，或者直接放在forwardSlide（）和reverseSlide（）函数中，但是效果不如预期。

我不得不提到我对编码特别是Java真的很陌生，并且该滑块是不允许使用任何插件的练习的一部分。

如果有一个完整的代码https://codepen.io/StraightAndAlert/pen/JVJeLP

可以帮助您查看实际的滑块，则这里是一个Codepen链接

感谢任何可以提供帮助的人！

这是我的代码。

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"
        ]);

OPP Javascript滑块上的fadeIn（）/ fadeOut（）问题

0 个答案: