图像过渡jQuery

时间:2013-04-13 07:31:20

标签: jquery image transition

我正在尝试使用jQuery模仿主页上的潜在客户的图片幻灯片。我只是想让图像顺利过渡。 image0.jpg ... imagen.jpg。请注意,javascript中的单引号是因为标记包含在标记内。

JAVASCRIPT:             

        <script type="text/javascript">

            function swapImages()
            {
                  var $active = $(\'#myGallery .active\');
                  var $next = ($(\'#myGallery .active\').next().length > 0) ? $(\'#myGallery .active\').next() : $(\'#myGallery img:first\');
                  $active.fadeOut(function(){
                  $active.removeClass(\'active\');
                  $next.fadeIn().addClass(\'active\');
                  });
            }

            $(document).ready(function(){
                // Run our swapImages() function every 5secs
                setInterval(\'swapImages()\', 5000);
            }

        </script>

CSS:

        <style type="text/css">
        .clear
        {
            clear:left;
        }

        /* transition effects */
        #myGallery
        {
            position:relative;
            width:1000px; /* Set your image width */
            height:400px; /* Set your image height */
        }
        #myGallery img
        {
            display:none;
            position:absolute;
            top:0;
            left:0;
        }
        #myGallery img.active
        {
            display:block;
        }
        </style>

HTML:

                <div id="myGallery">
                    <img src="'.$baseLink.'/images/slide/0.jpg" alt="Wholesalers" class="active" />
                    <img src="'.$baseLink.'/images/slide/1.jpg" alt="Premier eShop Software" />
                    <img src="'.$baseLink.'/images/slide/2.jpg" alt="Team Work" />
                </div>

0 个答案:

没有答案