Question

您好我是初学者jQuery用户，我正在尝试创建一个交叉淡入淡出效果，但似乎我似乎无法选择corect元素。这是我的代码：

<ul id="slideimage">
    <li ><img src="img/slider/pic/slide01.jpg" alt="img" class="active"/></li>
    <li><img src="img/slider/pic/slide02.jpg" alt="img" /></li>
    <li><img src="img/slider/pic/slide03.jpg" alt="img"/></li>
    <li><img src="img/slider/pic/slide04.jpg" alt="img"/></li>
    <li><img src="img/slider/pic/slide05.jpg" alt="img"/></li>
    <li><img src="img/slider/pic/slide06.jpg" alt="img"/></li>
</ul>

ul#slideimage li img{
          position: absolute;
          width:100%;
          height: 500px;
          z-index: 0;
            }
ul#slideimage li img.active{
          z-index: 10;
            }

(function(){
      setInterval("slideshow()" , 2000);
})();   

function slideshow(){
             var $first = $('ul#slideimage li img:first');
             var $active = $('ul#slideimage  li img.active');
             var $next = $active.next('ul#slideimage li img').length ? $active.next('ul#slideimage li img'): $first;
                        console.log($next);

                        $active.animate({'opacity':'0'},1000,function(){
                            $(this).removeClass('active').css({'opacity':'1'});
                        });
                        $next.addClass('active');
                    }

代码有什么问题，它会逐渐淡出第一张图像，然后让它再次出现。我想我无法正确定位下一个元素，但我一直试图在过去的3个小时内执行此操作没有成功。一些帮助将不胜感激。

Answer 1

您提供的代码结构中存在相当多的语法错误，但请参见下文：

    <style>
    ul#slideimage li img{
        position: absolute;
        width:100%;
        height: 500px;
        z-index: 0;
    }
    ul#slideimage li img.active{
        z-index: 10;
    }
    </style>
    <script type="text/javascript">
        var counter=0;
        function slideshow(){
            var total = $('ul#slideimage li img').size();
            var $active= $('ul#slideimage li img');
            $active.filter(function(index){return index== counter % total})
            .animate({'opacity':'0'},1000,function(){
                $(this).css({'opacity':'1'});
            });
            counter++;
        }


        $(function() {                  
            slideshow();                
            setInterval(slideshow, 2000);
        });
    </script>

jQuery交叉淡入淡出幻灯片无法正常工作

1 个答案: