2


我想创建一个快讯标题。
但我不知道问题出在哪里！: (
（因为我是网页设计的初学者 :D）
所以...

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

请帮助我学习如何创建和创建...：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>
4

3 回答 3

5

你可以试试这个。

它不是那么专业的代码，但应该可以工作。

这是 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() 函数有更多疑问。在这里你可以看到我保留了你原来的淡入淡出和淡出代码，但我把它放在一个函数中，只应用到当前选定的元素。我添加的是一个 jQuery.queue() ，它只会添加一个队列并等待上述所有效果完成，然后在内部代码中执行。

在那里我们只是增加我们的索引（'current'变量），或者如果它高于所选元素的长度，则设置回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();
    });
}
于 2013-03-25T07:20:13.897 回答
1

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

尝试

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

演示

于 2013-03-25T06:48:53.583 回答
0

下面的代码将旋转新闻... 

<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>
于 2013-03-25T06:56:34.467 回答