Question

我想创建一个flash新闻标题但我不知道问题出在哪里！ :(
（因为我在网页设计初学者：D）
所以...

我想创建一个标题的一部分，显示（淡入）一个标题并隐藏（fadeOut）延迟...
然后显示下一个标题...（在一个没有停止的循环中）！< / p>

PLZ帮助我学习如何创造......：D 这些是我写的代码：

<div id="flashNews">
    <div class="news">This is news title 1</div>
    <div class="news">This is news title 2</div>
    <div class="news">This is news title 3</div>
    <div class="news">This is news title 4</div>
    <div class="news">This is news title 5</div>
    <div class="news">This is news title 6</div>
    <div class="news">This is news title 7</div>
</div>

<script src="jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.news').each(function(index) {
            $(this).fadeIn('slow').delay(700).fadeOut('slow');
        });

    });
</script>

Answer 1

你可以试试这个。

这不是专业代码，但应该有用。

这是jsFiddle解决方案：

http://jsfiddle.net/migontech/sfUU6/

var news = $('.news')
current = 0;
news.hide();
Rotator();
function Rotator() {
    $(news[current]).fadeIn('slow').delay(500).fadeOut('slow');
    $(news[current]).queue(function() {
        current = current < news.length - 1 ? current + 1 : 0;
        Rotator();
        $(this).dequeue();
    });
}

修改

这是变量的声明。重要的是，你可以看到我在开始时选择了jQuery并将其分配给变量。原因是因为如果你要在你的代码的每一行使用这个选择器，你调用$（'。news'）。dosomthing（）然后$（'。news'）。dosomethingelse（），jQuery将搜索每次调用它时，这些元素的DOM都是。现在它将做一次。而且因为你正在使用一个类选择器，这是一个非常慢的选择器，你不必每次都这样做，赢得性能。你可能不会注意到它但仍然。：）

var news = $('.news') current = 0;

然后我们隐藏所有元素并开始第一次旋转。

news.hide(); Rotator();

现在你可能对Rotator（）函数有更多疑问。在这里你可以看到我保留了你原来的fadeIn和fadeOut代码，但是我把它放在一个函数中，只将它应用到当前选中的元素。我添加的是一个jQuery.queue（），它只会添加一个队列并等待上述所有效果完成后再执行代码。

然后我们只增加索引（'当前'变量）或者如果它高于所选元素的长度则重新设置为0，并再次为当前索引调用Rotator（）。并且不要忘记在末尾使用.dequeue（）来告诉队列可以被移除并继续。

function Rotator() { $(news[current]).fadeIn('slow').delay(500).fadeOut('slow'); $(news[current]).queue(function() { current = current < news.length - 1 ? current + 1 : 0; Rotator(); $(this).dequeue(); }); }

Answer 2

您为每个li设置相同的延迟。

尝试

$('.news').each(function(index,i)
{
    $(this).delay(index * 1001).fadeIn('slow').fadeOut('slow');
});

Demo

Answer 3

以下代码将轮播新闻......

<script src="jquery-1.8.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    var divIndex=0;
    function ShowHideDivs(){
      maxval=parseInt($("#maxval").html());
      $("#news"+divIndex).fadeIn('slow').delay(700).fadeOut('slow');
      divIndex=(divIndex+1) % maxval;
    }
    window.setTimeout("ShowHideDivs()",10);
    </script>

    <div id="flashNews">
        <div id="news1" class="news">This is news title 1</div>
        <div id="news2" class="news">This is news title 2</div>
        <div id="news3" class="news">This is news title 3</div>
        <div id="news4" class="news">This is news title 4</div>
        <div id="news5" class="news">This is news title 5</div>
        <div id="news6" class="news">This is news title 6</div>
        <div id="news7" class="news">This is news title 7</div>
        <div style="display:none" id="maxval">7</div>
    </div>

如何使用jquery逐个显示和隐藏每个div

3 个答案:

Demo