как затухает изображение ротатора? - PullRequest
Новая
       23

как затухает изображение ротатора?

0 голосов
/ 31 декабря 2018

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

html: 

<div class="exploding-faces">
    <img id="twelve" src="img/ba-small.png" />
    <img id="eleven" src="img/bo-small2.png" /> 
    <img id="ten" src="img/ca-small.png" />
    <img id="nine" src="img/ha-small.png" />
    <img id="eight" src="img/ka-small.png" />
    <img id="seven" src="img/ke-small.png" />
    <img id="six" src="img/mi-small.png" />
    <img id="five" src="img/po-small.png" />
    <img id="four" src="img/so-small.png" />
    <img id="three" src="img/to-small.png" />
    <img id="two" src="img/tr-small.png" />
    <img id="one" src="img/wi-small.png" />
</div>

css: 

.exploding-faces {
    position: absolute;
    left: 42%;
    top: 30vh;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);

}
    .exploding-faces img {
        width: 300px; -webkit-shape-outside:circle();shape-outside:circle(); 
        position: absolute;
        left: 0;
        top: 0;
        cursor: default;
    }

javascript: 

var InfiniteRotator =
    {
        init: function()
        {
            var numOfCalls = 0;

            //initial fade-in time (in milliseconds)
            var initialFadeIn = 500;

            //interval between items (in milliseconds)
            var itemInterval = 500;

            //cross-fade time (in milliseconds)
            var fadeTime = 500;

            //count number of items
            var numberOfItems = $('.exploding-faces img').length;

            //set current item
            var currentItem = 0;

            //show first item
            $('.exploding-faces img').eq(currentItem).fadeIn(initialFadeIn);

            //loop through the items
            var infiniteLoop = setInterval(function(){

                    $('.exploding-faces img').eq(currentItem).fadeOut(fadeTime);

                    if(currentItem == numberOfItems -1){
                        currentItem = 0;

                    }else{
                        currentItem++;
                    }
                    $('.exploding-faces img').eq(currentItem).fadeIn(fadeTime);

            }, itemInterval);
        }
    };

   InfiniteRotator.init(); //how make it fade out after a number of seconds?
   //setTimeOut did not work
...