Question

我想每隔几秒换一次div的内容（或换一个新的div，如果更好），淡入/淡出。 Jquery首选，或纯js罚款。

基于Arun的解决方案，我在下面添加了Jquery，它运行得很完美......但是如何让它重复？

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 :(根据评论中的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)
})

Answer 1

尝试

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)
})

演示：Fiddle

Answer 2

这是一个有效的例子：

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)
})

Answer 3

这听起来像是一个滑块的工作。那里有大量的jQuery插件选项，我一直都是Malsup的粉丝

jQuery plugins by malsup

他甚至准备好了响应的人。谷歌＆＃34; jQuery滑块＆＃34;不知所措。

Answer 4

如果您将第二个和第三个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);

由于衰落需要时间，因此不会完全按照您的要求进行操作，因此同时会在屏幕上显示两个div。我试图通过让fadeIn()慢慢地fadeOut()和{{1}}快速解决这个问题来解决这个问题，但我建议完全取消褪色并隐藏它们。

请参阅demo。

另外，@ ArunPJohny有一个解决方案here有点难以理解，但确实摆脱了衰落延迟问题。或者，这是no-fading solution。

Answer 5

使用滑块插件，互联网上有很多。这是我编写的一个简单片段，可以使用任意数量的元素而无需更改javascript。

很容易改变。

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++;

});


}

Answer 6

如果你没有淡入淡出和淡出，你可以试试这里。只需简单的几行java脚本就不需要添加任何插件等。

另请看这个链接Jquery delay它有延迟的样本和淡出的淡入淡出。也许你可以根据自己的需要量身定做。

在浏览器中试用

<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>

Answer 7

HTML

<div id="div1">quote 1</div>
<div id="div2" style="display:none">quote 2</div>

的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)

Fiddle

使用javascript每隔3秒替换一次div的内容

7 个答案:

HTML

的JavaScript