jQuery слайдер

Вот таким методом я исполнил слайдер контента jquery. Внутри блока несколько банеров для автоматического слайда.

<style type="text/css">
    div#rotator div { position:absolute;}
    div#rotator { height:207px;}
</style>
<script type="text/javascript">
    function theRotator() {
        $('div#rotator div').css({opacity: 0.0});
        $('div#rotator div:first').css({opacity: 1.0});
        setInterval('rotate()',4000);
    }
        
    function rotate() {
        var current = ($('div#rotator div.show')? $('div#rotator div.show') : $('div#rotator div:first'));
        var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator div:first') :current.next()) : $('div#rotator div:first'));
        next.css({opacity: 0.0})
        .addClass('show')
        .animate({opacity: 1.0}, 1000);
        current.animate({opacity: 0.0}, 1000)
        .removeClass('show');
    };
    $(document).ready(function() {
        theRotator();
    });
</script>

<div id="rotator">
    <div class="show"><a href="#"><img alt="" src="/images/new/head_banner_1.jpg" /></a></div>
    <div><a href="#"><img alt="" src="/images/new/head_banner_2.jpg" /></a></div>
    <div><a href="#"><img alt="" src="/images/new/head_banner_3.jpg" /></a></div>
</div>
Рубрики: Development, Статьи
Метки: , ,

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *