كيفية تحريك من خلال الصور مكدسة جافا سكريبت

Question

لدي سلسلة من الصور التي هي" مكدسة " داخل ديف.أريد الانتقال (كروسفاد) بين هذه الصور (لا تستخدم مسج) ، مع التحولات كس.ما لا أعرف كيف أفعله هو الانتقال إلى ما لا نهاية بين الصور.يتم إضافة الصور بشكل حيوي من خلال تغذية جسون ، وأنها سوف تستمر في إضافتها وبالتالي فإن عدد الصور في divs لم يتم تعيين.

كنت أفكر في نهج باستخدام z-index لجلب الصور على رأس كل منهما الآخر (ومن ثم تحريك opacity وغيرها من الخصائص) ولكن إذا كنت ترغب في تحريك من خلال 4 صور ، وأنا لست متأكدا من كيفية تتبع z-index وإعدادات التعتيم ، لمعرفة الذي يظهر.هنا هو ما خطرت لي حتى الآن ، ولكن أود أن تكون مهتمة في كيفية دورة الناس من خلال عدد غير معروف من الصور وتتبع ما هو "يظهر".في الأساس ، لدي مجموعة انتقال كس بسيطة على الصور في الوقت الحالي وأنا موحية عن طريق إضافة وإزالة الطبقات وأريد أن أكون قادرا على إنشاء دورة تمر عبر الصور ، وتغيير z-index وبعض الممتلكات ، ثم إرسالها لاحقا إلى الجزء الخلفي من المجموعة.

أتش تي أم أل

//Example div (on my page there are many of these)
<div class="imageHolder">
    <div class="imageContent">
       <img class="homeImages" src="media/test.png">
       <img class="homeImages" src="media/test1.png">
       <img class="homeImages" src="media/test2.png">
    </div>
</div>

المغلق

 div.imageHolder {
        float: left;
        position: relative;
        width: 32.9%;
        padding-bottom: 18.6%;
        margin-right: .1em;
    }

    div.imageContent {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }

    div img {
        width: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1
    }

    div img.newImage {
        z-index: 2;
        opacity: 0;
    }

    div img.live {
        z-index: 3;
        opacity: 1;
        transition: opacity 1s ease-in;
    }

جافا سكريبت

    function select() {
        var x = Math.floor(Math.random() * divs.length);
        if(divs[x].children.length > 1) {
            var live = document.querySelector('div img.live');
            var old = document.querySelector('div img.newImage');
            live.className = 'newImage';
            old.className += ' live';
        }
    }

Answer 1

تحتاج جس ، على الأقل لتتبع الذي هو الصورة الحالية وإضافة فئة التي تقوم بتشغيل الانتقال كس.

إذا فهمت بشكل صحيح ، كنت قد حصلت عليه تقريبا.جرب هذا

function select() {
    var x = Math.floor(Math.random() * divs.length),
        current = document.querySelector('.imageContent img.live'),
        newOne = document.querySelectorAll('.imageContent img')[x];

    current.className = ''; // clear the .live class
    newOne.className = 'live'; 
    // this triggers the css transition

    setTimeout(select, 1000); // after the css transition ends, do this again
}

وتغيير كس إلى

div img {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* moved .newImage styles here as a default */
    z-index: 2;
    opacity: 0;
}