JavaScript / jQuery: ищет сценарий FADING Image

Question

Я ищу легкий скрипт (чистый JavaScript предпочтительный) - это должно быть плавно увядать последовательность изображений друг к другу (= изображение-карусель). Также должно быть возможно запустить несколько экземпляров (так что он должен быть прототипом сценарием), как, например, для примера: - Сайт Баннер: угасание 3 изображений после того, как друг друга - Основное содержимое: 3 галереи, каждое угасание 3-5 изображений

Любые рекомендации, которые используют для этой цели?

Спасибо!

Answer 1

Я использовал jQuery Плагин Cracksslide И это хорошо работает.

Answer 2

Привет, я написал простой скрипт, который использует методы jQuery .fadeout () и .fadein () вместе с несколькими строками HTML и CSS. С идентификаторами для элементов изображения пронумеровали 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" />