JavaScript/jQuery: البحث عن نص الصور

Question

أنا أبحث عن برنامج نصي خفيف الوزن (مفضل JavaScript النقي) - يجب أن يكون يتلاشى بسلاسة سلسلة من الصور في بعضها البعض (= Carousel Image). يجب أن يكون من الممكن أيضًا تشغيل عدة حالات (لذلك يجب أن يكون نصًا أوليًا) ، مثل على سبيل المثال: - شعار الموقع: تلاشي 3 صور بعد بعضها البعض - المحتوى الرئيسي: 3 معارض ، كل صور تتلاشى 3-5

أي توصيات أي نص لاستخدامه لهذا الغرض؟

شكرًا!

Answer 1

لقد استخدمت jQuery المساعد المتقاطع وهو يعمل بشكل جيد.

Answer 2

مرحبًا ، لقد كتبت نصًا بسيطًا يستخدم أساليب jQuery .Fadeout () و .fadein () جنبًا إلى جنب مع بضعة أسطر من HTML و CSS. مع ترقيم IDS لعناصر الصورة 1 إلى n ، يمكن للخوارزمية أن تكرر بسهولة من خلال الصور والبدء من جديد عندما يصل إلى الصورة الأخيرة. يمكن تكييفه بسهولة لجعل التحولات تحدث تلقائيًا بعد تأخير زمني معين بدلاً من إطلاق النار على زر النقر. اعلمني اذا كان هذا مفيدا لك. هذا هو الرمز:

<style type="text/css">
        #images{ overflow:auto; }
        .current{ display:inline; }
        .hidden{ display:none; }            
</style>

<script type="text/javascript" >

    function doFade(current){

        var speed = 500;
        next = $("#"+(parseInt(current.attr("id")) + 1));
        if(next.length <= 0) next = $("#1");
        current.fadeOut(speed, 
            function fadeNextIn(){
                current.attr("class", "hidden");
                next.fadeIn(speed, 
                    function afterFadeNextIn(){
                        next.attr("class","current");
                    }
                );
            }
        );
    }

    $(document).ready(
        function () {
            $("#btnNext").click( 
                function(){ 
                    doFade($("#images .current"));
                }
            );
        }
    );

</script>

<div id="images">

    <img id="1" title="image 1" alt="image 1" src="1.jpg" class="current" />
    <img id="2" title="image 2" alt="image 2" src="2.jpg" class="hidden" />
    <img id="3" title="image 3" alt="image 3" src="3.jpg" class="hidden"/>
    <img id="4" title="image 4" alt="image 4" src="4.jpg" class="hidden"/>

</div>

<input id="btnNext" type="button" value="next" />