Question

我已按照本教程构建了一个简单的图像推子：http://www.mustbebuilt.co.uk/jquery-introduction/building-a-simple-image-fader/

但由于某些原因，我的bxslider无法无限循环......在最后/第三张图像消失后，它会停止。如果我再添加一个图像（第4个），那很好。如果我删除了bxslider调用，它就可以了。有什么想法吗？

这是我的测试页面：

HTML：

        <ul class="rotating-images">
            <li><img src="img/girl1.jpg"></li>
            <li><img src="img/girl2.jpg"></li>
            <li><img src="img/girl3.jpg"></li>
        </ul>

JS：

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

var fadeDuration=2000;
var displayTime=4000;
var currentIndex=1;
var nextIndex=1;
    $(document).ready(function() {      
        $('ul.rotating-images li').css({opacity: 0.0});
        $("'ul.rotating-images li:nth-child("+nextIndex+")'").addClass('show').animate({opacity: 1.0},fadeDuration);
        /* setInterval("nextSlide()",displayTime);*/
        var timer = setInterval('nextSlide()',displayTime);
    });
    function nextSlide(){
        nextIndex = currentIndex+1;
        if(nextIndex> $('ul.rotating-images li').length)
        {
         nextIndex =1;
        }
        $("'ul.rotating-images li:nth-child("+nextIndex+")'").addClass('show').animate({opacity: 1.0},fadeDuration);
        $("'ul.rotating-images li:nth-child("+currentIndex+")'").animate({opacity: 0.0},fadeDuration).removeClass('show');
        currentIndex = nextIndex;
    };

CSS：

.rotating-images{
    padding:0;
    margin:0;
    list-style: none;
    position:relative;  
}
ul.rotating-images li {
    position:absolute;
    left:0px;
    top:0px;
    display:inline;
    width: 343px;
    height: 479px;
}
ul.rotating-images li.show {
    z-index:500;    
}

谢谢！

Answer 1

你在选择器周围有额外的引号（'）。删除它们，它将工作。

变化

$("'ul.rotating-images li:nth-child("+nextIndex+")'")
$("'ul.rotating-images li:nth-child("+currentIndex+")'")

到

 $("ul.rotating-images li:nth-child("+nextIndex+")")
 $("ul.rotating-images li:nth-child("+currentIndex+")")

工作示例：https://jsfiddle.net/DinoMyte/6x80vabm/2/

如何在bxslider中连续制作这个图像淡入淡出循环？

1 个答案: