Stworzyłem pokaz slajdów JavaScript, ale nie wiem, jak dodać efekt zanikania. Powiedz mi, jak to zrobić, i powiedz tylko w JavaScript, bez jQuery!

Kod:

var imgArray = [
    'img/slider1.jpg',
    'img/slider2.jpg',
    'img/slider3.jpg'],
    curIndex = 0;
    imgDuration = 3000;

function slideShow() {
    document.getElementById('slider').src = imgArray[curIndex];
    curIndex++;
    if (curIndex == imgArray.length) { curIndex = 0; }
    setTimeout("slideShow()", imgDuration);
}
slideShow();
4
Abhinv Bhagwat 17 sierpień 2014, 13:30

4 odpowiedzi

Najlepsza odpowiedź

Znacznie krótszy niż rozwiązanie ninja i ze sprzętem przyspieszoną animacją CSS3. http://jsfiddle.net/pdb4kb1a/2/ Upewnij się, że czas przejścia (1S) jest taki sam jak funkcja pierwszej limitu (1000 (MS)).

Zwykły JS

var imgArray = [
    'http://placehold.it/300x200',
    'http://placehold.it/200x100',
    'http://placehold.it/400x300'],
    curIndex = 0;
    imgDuration = 3000;

function slideShow() {
    document.getElementById('slider').className += "fadeOut";
    setTimeout(function() {
        document.getElementById('slider').src = imgArray[curIndex];
        document.getElementById('slider').className = "";
    },1000);
    curIndex++;
    if (curIndex == imgArray.length) { curIndex = 0; }
    setTimeout(slideShow, imgDuration);
}
slideShow();

CSS

#slider {
    opacity:1;
    transition: opacity 1s; 
}

#slider.fadeOut {
    opacity:0;
}
12
Bram Vanroy 17 sierpień 2014, 09:47

jako alternatywa. Jeśli próbujesz zrobić suwak.

Zwykłe podejście polega na animowaniu ramki i animować ramy.

To sprawia, że efekt slajdów i działanie efektu znikającego. Twój przykład zanika. Co jest w porządku, ale może nie, czego naprawdę chcesz, gdy zobaczysz, że działa.

Jeśli naprawdę chcesz, to animować obrazy i ... Out potrzebujesz czegoś bardziej bardziej kompleksu.

Aby ożywić obrazy i wyjść, musisz użyć elementu obrazu dla każdego, a następnie odwróć jeden na zewnątrz i odwróć się jeden obok siebie.

Twoja funkcja pokazu slajdów działa, a następnie działa magia, ale zanim będziesz mógł to zrobić, musisz dodać wszystkie te obrazy w tablicy do domu, nazywa się to dynamicznym wtryskiem Domu i jest naprawdę fajny.

Upewnij się, że sprawdzasz skrzypce dla pełnego roboczego demo i kodu, który jest połączony na dole.

HTML

<div id="slider">
// ...we will dynamically add your images here, we need element for each image
</div>

JS

var curIndex = 0,
    imgDuration = 3000,
    slider = document.getElementById("slider"),
    slides = slider.childNodes; //get a hook on all child elements, this is live so anything we add will get listed
    imgArray = [
        'http://placehold.it/300x200',
        'http://placehold.it/200x100',
        'http://placehold.it/400x300'];


//
// Dynamically add each image frame into the dom;
//
function buildSlideShow(arr) {
    for (i = 0; i < arr.length; i++) {
        var img = document.createElement('img');
        img.src = arr[i];
        slider.appendChild(img);
    }
    // note the slides reference will now contain the images so we can access them
}

//
// Our slideshow function, we can call this and it flips the image instantly, once it is called it will roll
// our images at given interval [imgDuration];
//
function slideShow() {

    function fadeIn(e) {
        e.className = "fadeIn";
    };

    function fadeOut(e) {
        e.className = "";
    };


        // first we start the existing image fading out;

        fadeOut(slides[curIndex]);

        // then we start the next image fading in, making sure if we are at the end we restart!
        curIndex++;
        if (curIndex == slides.length) {
            curIndex = 0;
        }

        fadeIn(slides[curIndex]);

        // now we are done we recall this function with a timer, simple.

        setTimeout(function () {
            slideShow();
        }, imgDuration);
    };


    // first build the slider, then start it rolling!

    buildSlideShow(imgArray);
    slideShow();

skrzypce: http://jsfiddle.net/f8d1js04/2/

3
MartinWebb 17 sierpień 2014, 11:10

Możesz użyć tego kodu

var fadeEffect=function(){

    return{

        init:function(id, flag, target){

            this.elem = document.getElementById(id);

            clearInterval(this.elem.si);

            this.target = target ? target : flag ? 100 : 0;

            this.flag = flag || -1;

            this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;

            this.elem.si = setInterval(function(){fadeEffect.tween()}, 20);

        },

        tween:function(){

            if(this.alpha == this.target){

                clearInterval(this.elem.si);

            }else{

                var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);

                this.elem.style.opacity = value / 100;

                this.elem.style.filter = 'alpha(opacity=' + value + ')';

                this.alpha = value

            }

        }

    }

}();

To jest jak go używać

fadeEffect.init('fade', 1, 50) // fade in the "fade" element to 50% transparency

fadeEffect.init('fade', 1) // fade out the "fade" element
1
Khodour.F 17 sierpień 2014, 09:36

Znacznie krótsza odpowiedź:

HTML:

<div class="js-slideshow">
    <img src="[your/image/path]">
    <img src="[your/image/path]" class="is-shown">
    <img src="[your/image/path]">
</div>

JavaScript:

setInterval(function(){
    var $container = $('.js-slideshow'),
        $currentImage = $container.find('.is-shown'),
        currentImageIndex = $currentImage.index() + 1,
        imagesLength = $container.find('img').length;

    $currentImage.removeClass('is-shown');
    $currentImage.next('img').addClass('is-shown');

    if ( currentImageIndex == imagesLength ) {
        $container.find('img').first().addClass('is-shown');
    }
}, 5000)

SCSS

.promo-banner {
   height: 300px;
   width: 100%;
   overflow: hidden;
   position: relative;

   img {
       width: 100%;
       height: 100%;

       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;

       opacity: 0;
       z-index: -10;
       transition: all 800ms;

       &.is-shown {
           transition: all 800ms;
           opacity: 1;
           z-index: 10;
       }
  }

}

0
JuliaCrush 11 kwiecień 2019, 09:41