Question

之前我在这个网站上找到了一个jquery幻灯片放映的解决方案，但它没有循环播放。我试图解决，但我需要一些帮助。

HTML：

            <div id="slideshow_header">
                 <ul class="slides_header">
                    <li>
                        <img src="<?php echo Yii::app()->baseUrl; ?>/images/slideshow/01.jpg">
                    </li>
                    <li>
                        <img src="<?php echo Yii::app()->baseUrl; ?>/images/slideshow/02.jpg">
                    </li>
                    <li>
                        <img src="<?php echo Yii::app()->baseUrl; ?>/images/slideshow/03.jpg">
                    </li>
                </ul>
            </div>

CSS：

div#slideshow_header {
    width: 100%;
    max-width: 1100px;
    position: relative;
    height: inherit;
}

ul.slides_header {
    width: 100%;
    height: inherit;
    margin: 0;
    position: relative;
    padding: 0;
    overflow: hidden;
}

ul.slides_header li {
    width: 100%;
    height: inherit;
    position: absolute;
}

ul.slides_header img {
    width: 100%;
    position: absolute;
    display: block;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.active {
    -webkit-animation: fadein 1s; /* Chrome, Safari, Opera */
    animation: fadein 1s;
}

@-webkit-keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}

JQUERY（在这里需要帮助，我想制作一个if语句来循环播放幻灯片）：

        $(function(){
        $('.slides_header li:first-child').addClass('active');
        $('.active').css({'z-index':'1'});
        });

        function slideSwitch() {                
            var $active = $('.slides_header li.active');
            var $next = $active.next();
            var $zindex = $active.css('z-index') + 1;

            // I'd like to make an if statement here to loop the slideshow
            console.log($next.length()); // <<< Tried to check if next not exists

            $next.addClass('active');
            $next.css({'z-index':$zindex});

            $active.removeClass('active');                  
            }

        $(function() {
            setInterval( "slideSwitch()", 5000 );
        });

Answer 1

您正在尝试检查$next的长度。

尝试类似：

if(!$next.length){
   $next = $('.slides_header li').first();
   // or
   $next = $active.siblings().first();
}

为jquery幻灯片创建循环

1 个答案: