Question

我有一个包含横幅图片的列表。

<ul id="banners">
    <li><img src="image1.png" /></li>
    <li><img src="image2.png" /></li>
    <li><img src="image3.png" /></li>
</ul>

使用jquery，如何让它们每隔几秒显示一次？

Answer 1

这里有一个以1.5秒的间隔随机改变图像的例子：

HTML：

<ul id="banners">
    <li><img src="image1.png" /></li>
    <li><img src="image2.png" /></li>
    <li><img src="image3.png" /></li>
</ul>

使用Javascript：

(function() {
    var lis = document.querySelectorAll('#banners > li');

    var hideAllImages = function() {
        for(var i=0; i<lis.length; i++) {
            lis[i].setAttribute('style', 'display: none');
        }
    }

    var showImage = function(index) {
        lis[index].setAttribute('style', 'display: block');
    }

    var showRandomImage = function() {
        var index = Math.floor(Math.random() * lis.length);
        hideAllImages();
        showImage(index);
    }

    showRandomImage();

    setInterval(showRandomImage, 1500);

})();

工作示例：https://jsfiddle.net/5L5rvbb5/

Answer 2

如果这是个主意，像这样的东西将无限期地循环通过图像。这样它就不会在第三张图像之后结束。

$(function(){
  setInterval(function(){
    var $el = $(".s");
    $el.removeClass("s")
       .next("li")
       .addClass("s")
       .closest("ul")
       .append($el);
  },500);
});

JSBIN

Answer 3

这是一个小功能，可以切换每个子<li>元素的可见性 - 一次一个 - 每1秒

#banners li {
    display: none;
}

$('#banners li').each(function(index, value) {
    setTimeout(function() {
        $(value).show().siblings().hide();
    }, 1000 * (index + 1));
});

我删除了图片，因为我只是在这里展示了一个视觉演示 - 切换<li>元素。

JSFiddle Link - 简化演示

要循环播放，请注意以下内容，其中time是我们希望显示每个元素的时长...

var time = 1000; // 1s

function toggle() {
    $('#banners li').each(function(index, value) {
        setTimeout(function() {
            $(value).show().siblings().hide();
         }, time * (index + 1));
    });
}

toggle();

setInterval(toggle, $('#banners li').length * time);

JSFiddle Link - 包含setInterval

的演示版

Answer 4

我认为你可以使用jquery的hide和show方法。如果你想获得幻想，你可以做动画，如fadein或fadeout。我相信变化需要使用不是jquery，而只是简单的javascript。我不确定jquery是否有更短的方式，但我知道你肯定可以用javascript实现它，如果不是。你可能会考虑使用javascripts计时设备，以及一些分支来显示和隐藏不同的图像，这可能需要有特殊的类，如“活动图像”应用到你正在显示的任何一个。从你的代表的角度来看，你可能在一般情况下知识渊博，但我希望有所帮助。

Answer 5

尝试使用.toggle()，如果下一个元素存在，则递归调用complete回调，否则首先在父元素complete子项上调用li回调

$("#banners li:first").toggle(3000, function slide() {
  $(this).toggle(3000, function() {
    $(this.nextElementSibling || this.parentElement.firstElementChild)
    .toggle(3000, slide)
  })
})

#banners li {
  display: none;
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="banners">
  <li>
    <img src="http://lorempixel.com/100/100/cats" />
  </li>
  <li>
    <img src="http://lorempixel.com/100/100/nature" />
  </li>
  <li>
    <img src="http://lorempixel.com/100/100/technics" />
  </li>
</ul>

JQuery在列表中显示/隐藏图像

5 个答案: