Javascript JQuery幻灯片仅适用于最近发布的文章。需要它来处理主页上的最新帖子吗

完全是新手

我需要下面的幻灯片工作，为所有最近的帖子在主页（wordpress）。目前，它只适用于最新的帖子（最新帖子）

下面是我在content.php中的代码：

下面是我在header.php中的js代码（Jonathan Snook的代码）：

$（'#textslider>div:gt（0）'）.hide（）；
setInterval（函数（）{
$（'#textslider>div:first'）。淡出（500）
.next（）
法丹先生（1000）
(完)
.appendTo（“#文本滑块”）；
},  3000);

PS：我知道Snook在同一个页面版本上有多个幻灯片，但我根本无法让它工作。对于以上内容，将textslider从ID更改为class不会使幻灯片显示循环。请帮忙

谢谢

更新： @雷迪，谢谢你回复我。这是主页的外观：

测试帖12的文本幻灯片效果很好（幻灯片：“1”、“2”、“3”）。测试帖子10也有一个文本幻灯片（幻灯片：“一些文本1”，“一些文本2”，“一些文本3”），但它不起作用，正如你所看到的，单词堆叠在另一个上面

这是测试职位12（最近职位）的代码：

字幕顶部

1.


2.


3.

1分钟阅读

这是测试桩11的代码：

     <article id="post-65" class="post-65 post type-post status-publish format-standard hentry category-uncategorized post-grid">

<style type="text/css">
            .post-65 { background-color: #000000 !important; }

</style>

yoohoo






1分钟阅读

这是第10篇测试文章的代码（这篇文章也有幻灯片，但正如你所看到的，文本堆叠在一起，幻灯片根本不起作用）：

我很酷

“所有蛋糕中最酷的！！！”


“非常好”


“难以置信”

1分钟阅读

这是测试桩9的代码：

     <article id="post-60" class="post-60 post type-post status-publish format-standard hentry category-uncategorized post-grid">

<style type="text/css">
            .post-60 { background-color: #000000 !important; }

</style>

1分钟阅读

再次感谢。很抱歉，文章11、10和9的代码块被拆分，不太确定如何修复。

编辑：

$('.textslider').each(function(){
    $(this).children('div:gt(0)').hide();
}); 

$('.textslider').each(function(){
    var parentDiv = $(this);
    //alert(parentDiv);
    setInterval(function() {    
        parentDiv.children('div:first').fadeOut(500)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo(parentDiv);
    },  3000, parentDiv);
});

我不确定这是你想要的但是。。。希望它能帮助你了解这个问题：

$('#textslider > div').each(function(){
    $(this).children('p:gt(0)').hide();
}); 

$('#textslider > div').each(function(){
    var parentDiv = $(this);
    //alert(parentDiv);
    setInterval(function() {    
        parentDiv.children('p:first').fadeOut(500)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo(parentDiv);
    },  3000, parentDiv);
});

我的html（divs…）

文本1

文本2

文本3

文本4

文本5

texta

textb

textc

短信

短信

t1

t2

t3

t4

t5

---

它们都同时“动画化”。

您的

所有最近发布的帖子

与“最近发布的帖子”之间的区别是什么？最近发布的帖子位于主页的最顶部，占据了整个视口的宽度。最近的帖子就在下面。其中一些占视口宽度的50%，其他占100%。但是我写的代码都是我自己写的，它们不是主题的一部分。以下是主题视频：。我打算在所有文章标题下添加一个文本幻灯片，结果就像我在开篇文章中解释的那样。好的，明白了，你能发布你所有最近的div和最近的div的HTML吗。谢谢你的回答。我要找的是可以驱动一组DIV conta的javascript或jquery

<a href="http://myweb.com/test-post-11/" class="post-cover-link"></a>

<div class="post-content">
    <header class="entry-header">
        <h1 class="entry-title">

            <a href="http://myweb.com/test-post-11/" rel="bookmark">
            <span class="entry-title-primary">test post 11</span> <span class="entry-subtitle">"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</span>                               </a>

            <p class="entry-content">yoohoo</p>

            <div id="textslider"> 

            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 

                </p>
            </div>

            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 

                </p>
            </div>

            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 

                </p>

            </div>

            </div> 
        </h1>

    </header><!-- .entry-header -->

    <footer class="entry-meta">
        <span class="posted-on"><a href="http://myweb.com/test-post-11/" title="3:12 pm" rel="bookmark"><time class="entry-date published" datetime="2016-03-01T15:12:55+00:00">March 1, 2016</time><time class="updated" datetime="2016-03-02T15:41:23+00:00">March 2, 2016</time></a></span><span class="reading-time">1 minute read</span><span class="byline">by <span class="author vcard"><a class="url fn n" href="http://myweb.com/author/yulius/">yulius</a></span></span>                 </footer><!-- .entry-meta -->


        </div>
    </article>

     <article id="post-63" class="post-63 post type-post status-publish format-standard hentry category-uncategorized post-grid">

<style type="text/css">
            .post-63 { background-color: #000000 !important; }

</style>

<a href="http://myweb.com/test-post-10/" class="post-cover-link"></a>

<div class="post-content">
    <header class="entry-header">
        <h1 class="entry-title">

            <a href="http:/myweb.com/test-post-10/" rel="bookmark">
            <span class="entry-title-primary">test post 10</span> <span class="entry-subtitle">am super cool</span>                             </a>

            <p class="entry-content">i am cool</p>

            <div id="textslider"> 

            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                    &quot;the coolest of all cakes!!!&quot; 
                </p>
            </div>

            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                    &quot;super good&quot; 
                </p>
            </div>

            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                    &quot;unbelievable&quot; 
                </p>

            </div>

            </div> 
        </h1>

    </header><!-- .entry-header -->

    <footer class="entry-meta">
        <span class="posted-on"><a href="http://myweb.com/test-post-10/" title="3:12 pm" rel="bookmark"><time class="entry-date published" datetime="2016-03-01T15:12:19+00:00">March 1, 2016</time><time class="updated" datetime="2016-03-03T18:02:40+00:00">March 3, 2016</time></a></span><span class="reading-time">1 minute read</span><span class="byline">by <span class="author vcard"><a class="url fn n" href="http://myweb.com/author/yulius/">yulius</a></span></span>                 </footer><!-- .entry-meta -->


        </div>
    </article>

     <article id="post-60" class="post-60 post type-post status-publish format-standard hentry category-uncategorized post-grid">

<style type="text/css">
            .post-60 { background-color: #000000 !important; }

</style>

<a href="http://myweb.com/test-post-9/" class="post-cover-link"></a>

<div class="post-content">
    <header class="entry-header">
        <h1 class="entry-title">

            <a href="http://myweb.com/test-post-9/" rel="bookmark">
            <span class="entry-title-primary">test post 9</span> <span class="entry-subtitle">oblique is Cool</span>                                </a>

            <p class="entry-content"></p>

            <div id="textslider"> 

            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 

                </p>
            </div>

            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 

                </p>
            </div>

            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 

                </p>

            </div>

            </div> 
        </h1>

    </header><!-- .entry-header -->

    <footer class="entry-meta">
        <span class="posted-on"><a href="http://myweb.com/test-post-9/" title="3:11 pm" rel="bookmark"><time class="entry-date published" datetime="2016-03-01T15:11:49+00:00">March 1, 2016</time><time class="updated" datetime="2016-03-02T14:42:36+00:00">March 2, 2016</time></a></span><span class="reading-time">1 minute read</span><span class="byline">by <span class="author vcard"><a class="url fn n" href="http://myweb.com/author/yulius/">yulius</a></span></span>                  </footer><!-- .entry-meta -->


        </div>
    </article>

$('.textslider').each(function(){
    $(this).children('div:gt(0)').hide();
}); 

$('.textslider').each(function(){
    var parentDiv = $(this);
    //alert(parentDiv);
    setInterval(function() {    
        parentDiv.children('div:first').fadeOut(500)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo(parentDiv);
    },  3000, parentDiv);
});

$('#textslider > div').each(function(){
    $(this).children('p:gt(0)').hide();
}); 

$('#textslider > div').each(function(){
    var parentDiv = $(this);
    //alert(parentDiv);
    setInterval(function() {    
        parentDiv.children('p:first').fadeOut(500)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo(parentDiv);
    },  3000, parentDiv);
});

      <div id="textslider">
            <div>
                <p>text1</p>
                <p>text2</p>
                <p>text3</p>
                <p>text4</p>
                <p>text5</p>
            </div>
            <div>
                <p>texta</p>
                <p>textb</p>
                <p>textc</p>
                <p>textd</p>
                <p>texte</p>
            </div>
            <div>
                <p>t1</p>
                <p>t2</p>
                <p>t3</p>
                <p>t4</p>
                <p>t5</p>
            </div>
        </div>