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

时间:2015-10-17 23:12:22

标签: javascript jquery html

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

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

使用,如何让它们每隔几秒显示一次?

5 个答案:

答案 0 :(得分:3)

这里有一个以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/

答案 1 :(得分:2)

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

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

JSBIN

答案 2 :(得分:1)

这是一个小功能,可以切换每个子<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

的演示版

答案 3 :(得分:0)

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

答案 4 :(得分:0)

尝试使用.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>