Saturday, May 24, 2014

jquery using image slide show with opacity animate

css

#topCarousel .slideshow {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}
#topCarousel .slideshow li {
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    width: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
}
#topCarousel .slideshow li.ishow {   
    position: relative;
    z-index:500;
}
#topCarousel .slideshow li img {
    display: block;
    line-height: 1;
    width: 100%;
}

html

<div id="topCarousel">
            <ul class="slideshow">
                <?php
                $count_for = 0;
                foreach ($static_top_banners as $static_top_banner):
                    $originalurl = $this->thumbmanager->thumb_url($static_top_banner);
                    ?>
                    <li class="<?php echo $count_for === 0 ? 'ishow' : ''; ?>">
                        <img src="<?php echo $originalurl; ?>" alt=""/>
                    </li>
                    <?php
                    $count_for++;
                endforeach;
                ?>
            </ul>
            <div class="clear: both;"></div>
        </div><!-- /.carousel -->

        <script type="text/javascript">
            $(function() {
                h2o.imgsViewer($('#topCarousel .slideshow'));
            });
        </script>

js

imgsViewer: function(obj) {
        var fadeDuration = 2000, slideDuration = 4000, currentIndex = 1, nextIndex = 1,
                nextSlide = function() {
                    nextIndex = currentIndex + 1;
                    if (nextIndex > $(obj).children().size()) {
                        nextIndex = 1;
                    }
                    var next = $(obj).find('li:nth-child(' + nextIndex + ')');
                    var curr = $(obj).find('li:nth-child(' + currentIndex + ')');

                    next.addClass('ishow').animate({opacity: 1.0}, fadeDuration);

                    curr.removeClass('ishow').animate({opacity: 0.0}, fadeDuration);

                    currentIndex = nextIndex;

                    setTimeout(nextSlide, slideDuration);
                };
               
        $(obj).find('li').css({opacity: 0.0});
        $(obj).find('li:nth-child(' + nextIndex + ')')
                .addClass('ishow').animate({opacity: 1.0}, fadeDuration);
        setTimeout(nextSlide, slideDuration);
        return this;
    }

No comments: