0

我正在尝试使用 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>
4

0 回答 0