Question

我有一张幻灯片，几乎可以完美地满足我的需求。我只需要改变一些事情：

如果只有一张图片，幻灯片不应淡入淡出。
加载页面时幻灯片不应淡入。

谢谢！

我的代码在这里：

$(window).load(function() { //start after HTML, images have loaded

var InfiniteRotator = {
    init: function() {
        //initial fade-in time (in milliseconds)
        var initialFadeIn = 1000;

        //interval between items (in milliseconds)
        var itemInterval = 5000;

        //cross-fade time (in milliseconds)
        var fadeTime = 2500;

        //count number of items
        var numberOfItems = $('.rotating-item').length;

        //set current item
        var currentItem = 0;

        //show first item
        $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

        //loop through the items        
        var infiniteLoop = setInterval(function() {
            $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

            if (currentItem == numberOfItems - 1) {
                currentItem = 0;
            } else {
                currentItem++;
            }
            $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

        }, itemInterval);
    }
};

InfiniteRotator.init();

});

Html代码：

<div id="rotating-item-wrapper">
<img src="images/slider/1.jpg" class="rotating-item" />
<img src="images/slider/2.jpg" class="rotating-item" />
<img src="images/slider/3.jpg" class="rotating-item" />
</div>

Answer 1

如果只有一张图片，幻灯片不应淡入淡出。

您可以使用

获取img的数量

if($('.rotating-item-wrapper .rotating-item').length > 1){
  // run slider
}else{
  // just one image don't slide
}

加载页面时，幻灯片不应淡入。

你已经用过了

$(window).load();

使代码更容易控制..使用infiniteLoop作为函数

 var infiniteLoop = function() {
            $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

            if (currentItem == numberOfItems - 1) {
                currentItem = 0;
            } else {
                currentItem++;
            }
            $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

        });

然后setInterval

if($('.rotating-item-wrapper .rotating-item').length > 1){
      // run slider
      setInterval(infiniteLoop , itemInterval);
    }else{
      // just one image don't slide
    }

完整代码看起来像这样

 $(document).ready(function() { //start after HTML, images have loaded
    var InfiniteRotator = {
        init: function() {
            //initial fade-in time (in milliseconds)
            var initialFadeIn = 1000;

            //interval between items (in milliseconds)
            var itemInterval = 5000;

            //cross-fade time (in milliseconds)
            var fadeTime = 2500;

            //count number of items
            var numberOfItems = $('.rotating-item').length;

            //set current item
            var currentItem = 0;

            //show first item
            $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
            if(numberOfItems > 1){
                //loop through the items        
                var infiniteLoop = setInterval(function() {
                    $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

                    if (currentItem == numberOfItems - 1) {
                        currentItem = 0;
                    } else {
                        currentItem++;
                    }
                    $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

                }, itemInterval);
            }
        }
    }

      InfiniteRotator.init();

    });

JSFIDDLE

Answer 2

我认为它必须是这样的：

var InfiniteRotator = {
init: function() {
    //initial fade-in time (in milliseconds)
    var initialFadeIn = 1000;

    //interval between items (in milliseconds)
    var itemInterval = 5000;

    //cross-fade time (in milliseconds)
    var fadeTime = 2500;

    //count number of items
    var numberOfItems = $('.rotating-item').length;

    //set current item
    var currentItem = 0;

    //show first item

// We want the first slide without fade

    $('.rotating-item').eq(currentItem).fadeIn(0);

    //loop through the items        

//dont slide if there's no more than 1 item
if(numberOfItems < 1){
        var infiniteLoop = setInterval(function() {
            $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

            if (currentItem == numberOfItems - 1) {
                currentItem = 0;
            } else {
                currentItem++;
            }
            $('.rotating-item').eq(currentItem).fadeIn(fadeTime);



           }, itemInterval);
}
        }
    }

如果只有一个图像+幻灯片加载时停止淡出第一个图像，则停止循环播放幻灯片

2 个答案: