我有一个包含横幅图片的列表。
<ul id="banners">
<li><img src="image1.png" /></li>
<li><img src="image2.png" /></li>
<li><img src="image3.png" /></li>
</ul>
使用jquery,如何让它们每隔几秒显示一次?
答案 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);
})();
答案 1 :(得分:2)
$(function(){
setInterval(function(){
var $el = $(".s");
$el.removeClass("s")
.next("li")
.addClass("s")
.closest("ul")
.append($el);
},500);
});
答案 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>