使用javascript每隔3秒替换一次div的内容
[英]Alternate content of a div every 3 seconds with javascript
问题描述
I would like to alternate the contents of a div (or swap in a new div if better) every few seconds, with a fade in/out. 
我想每隔几秒交替一个div的内容（或换一个新的div，如果更好），淡入/淡出。 Jquery prefered, or pure js fine too. Jquery首选，或纯js罚款。
Based on Arun's solution, I have added the Jquery below, and it works perfectly... but how do I make it repeat? 基于Arun的解决方案，我在下面添加了Jquery，它完美地工作......但是如何让它重复？
HTML: HTML：
<div class="wrapper" style="height:100px">
<div id="quote1">I am a quote</div>
<div id="quote2">I am another quote</div>
<div id="quote3">I am yet another quote</div>
</div>
Javascript: (as per Arun in the comments) Javascript :(根据评论中的Arun）
jQuery(function () {
var $els = $('div[id^=quote]'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(function () {
$els.eq(++i % len).fadeIn();
})
}, 2500)
})
7 个解决方案
解决方案1
7 已采纳 2014-05-12 00:30:25
解决方案2
1 2017-01-18 14:13:43
Here is a working example: 这是一个工作示例：
jQuery(function () {
var $els = $('div[id^=quote]'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(function () {
i = (i + 1) % len
$els.eq(i).fadeIn();
})
}, 2500)
})
解决方案3
0 2014-05-11 03:26:53
this sounds like a job for...a slider. 这听起来像是一个滑块的工作。 There are a ton of jQuery plugin options out there, I've always been a fan of Malsup 有很多jQuery插件选项，我一直是Malsup的粉丝
jQuery plugins by malsup malsup的jQuery插件
he even has responsive ones ready to go. 他甚至还有准备好的响应者。 Google "jQuery slider" to be overwhelmed with options. 谷歌“jQuery滑块”被选项所淹没。
解决方案4
0 2014-05-11 04:03:19
This will do it if you set your second and third divs to hidden : 如果您将第二个和第三个div设置为hidden ，则可以执行此操作：
window.setInterval(function(){
window.setTimeout(function(){
$('#quote1').fadeIn('slow').delay(3000).fadeOut('fast').delay(6000);
}, 0);
window.setTimeout(function(){
$('#quote2').fadeIn('slow').delay(3000).fadeOut('fast').delay(6000);
}, 3000);
window.setTimeout(function(){
$('#quote3').fadeIn('slow').delay(3000).fadeOut('fast').delay(6000);
}, 6000);
}, 3000);
It's not going to do exactly what you want because fading takes time, so two divs will be onscreen at the same time. 它不会完全按照你想要的那样做，因为衰落需要时间，所以两个div同时会在屏幕上显示。 I tried to remedy this by having them fadeIn() slowly and fadeOut() quickly, but I'd recommend taking out the fading altogether and just hiding them. 我试图通过慢慢地让fadeIn()慢慢地和fadeOut()来解决这个问题，但我建议完全消除衰落并隐藏它们。
Also, @ArunPJohny has a solution here that is a bit difficult to understand but does get rid of the fading delay problem. 此外，@ ArunPJohny 在这里有一个解决方案，有点难以理解，但确实摆脱了衰落延迟问题。 Alternatively, here's my no-fading solution . 或者，这是我不褪色的解决方案 。
解决方案5
0 2014-05-11 04:50:02
Use a slider plugin there are lots on the internet. 使用滑块插件有很多在互联网上。 This is a simple snippet I wrote that works with any number of elements without having to change the javascript. 这是我编写的一个简单片段，可以使用任意数量的元素而无需更改javascript。
It's very easy to change. 这很容易改变。
http://jsfiddle.net/Ux9cD/39/ http://jsfiddle.net/Ux9cD/39/
var count = 0;
$('.wrapper div').css('opacity', '0');
var varName = setInterval(function() {
//hide all the divs or set opacity to 0
$('.wrapper div').css('opacity', '0');
//get length
var length = $('.wrapper div').length;
//get first child:
var start = $('.wrapper div').eq(count);
if (count < length) {
animateThis(start,length,count);
count++;
} else {
console.log('end of list');
//restore back to hidden
//set count back to 0
$('.wrapper div').css('opacity', '0');
count = 0;
}
}, 2000);
varName;
function animateThis(start,length,count)
{
$( start ).animate({
opacity: 1
}, 1000, "linear", function() {
//return count++;
});
}
解决方案6
-1 2014-05-11 03:39:30
Here is something you can try if you can do without fade in and fadeout. 如果你可以做到没有淡入和淡出，你可以试试这里。 Just a simple few lines of java script no need to add any plugins etc. 只需简单的几行java脚本就不需要添加任何插件等。
Also look at this link Jquery delay it has sample with delay and fade in fadeout. 另外看看这个链接Jquery延迟它有延迟和淡入淡出的样本。 May be you can tailor it to your needs. 也许你可以根据自己的需要量身定制。
Try in your browser 试试你的浏览器
<html>
<head>
<script type="text/javascript">
function swapDiv(){
var firstString = document.getElementById("quote1").innerHTML;
var secondString = document.getElementById("quote2").innerHTML;
document.getElementById("quote1").innerHTML = secondString;
document.getElementById("quote2").innerHTML = firstString;
setTimeout(swapDiv, 3000);
}
setTimeout(swapDiv, 3000);
</script>
</head>
<body>
<div id="quote1">I am another quote</div><span>
<div id="quote2">I am yet another quote</div><span>
</body>
</html>
解决方案7
-1 2014-05-11 05:46:12
HTML HTML
<div id="div1">quote 1</div>
<div id="div2" style="display:none">quote 2</div>
JavaScript JavaScript的
i=0;
setInterval(function(){
if(i%2 == 0)
$('#div1').fadeOut('slow', function(){
$('#div2').fadeIn('slow')
})
else
$('#div2').fadeOut('slow', function(){
$('#div1').fadeIn('slow')
})
i++;
}, 2000)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.