Javascript / JQuery: ищет сценарий исчезновения изображения - PullRequest
Новая
       24

Javascript / JQuery: ищет сценарий исчезновения изображения

0 голосов
/ 05 августа 2010

Я ищу легкий скрипт (предпочтительнее чистый javascript) - он должен быть для плавного затухания последовательности изображений друг в друге (= image-carousel). также должно быть возможно запустить несколько экземпляров (так что это должен быть скрипт-прототип), как например: - баннер сайта: исчезают 3 изображения друг за другом - основной контент: 3 галереи, каждая из которых увядает 3-5 изображений

какие-либо рекомендации, какой сценарий использовать для этой цели?

спасибо!

Ответы [ 2 ]

2 голосов
/ 24 мая 2011

Привет, я написал простой скрипт, который использует методы 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" />
1 голос
/ 05 августа 2010

Я использовал плагин jQuery CrossSlide , и он хорошо работает.

...