JQuery 幻灯片仅适用于最近的帖子.需要它来处理主页上的最新帖子
JQuery Slideshow only works on the most recent post. Need it to work on most recent posts on homepage
在这里完成新手。
我需要以下幻灯片来适用于主页(wordpress)上的所有最新帖子。目前,它仅适用于最新的帖子(最新帖子)。
这是我的内容代码.php:
<div id="textslider">
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
<?php echo get_field('slide1'); ?>
</p>
</div>
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
<?php echo get_field('slide2'); ?>
</p>
</div>
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
<?php echo get_field('slide3'); ?>
</p>
</div>
</div>
这是我在标头中的js代码.php(Jonathan Snook的代码):
<script src="http://code.jquery.com/jquery-latest.min.js">
<script>
$('#textslider > div:gt(0)').hide();
setInterval(function() {
$('#textslider > div:first').fadeOut(500)
.next()
.fadeIn(1000)
.end()
.appendTo('#textslider');
}, 3000);
</script>
PS:我知道Snook在同一页面版本上有多个幻灯片,但我根本无法使其工作。对于上述内容,将文本滑块从 ID 更改为类会使幻灯片根本不循环。请帮忙。
谢谢
更新:@Reddy 谢谢你回复我。这是主页的样子:
尤利乌斯主页
测试帖子 12 的文本幻灯片效果很好(幻灯片:"1"、"2"、"3")。Test Post 10 还有一个文本幻灯片(幻灯片:"一些文本 1"、"一些文本 2"、"一些文本 3"),但它不起作用,正如你所看到的,单词堆叠在一起。
这是TEST POST 12(最新帖子)的代码:
<article id="post-78" class="post-78 post type-post status-publish format-standard hentry category-uncategorized post-grid">
<style type="text/css">
.post-78 { background-color: #000000 !important; }
</style>
<div class="post-cover post-cover-78 stag-image--none"></div>
<a href="http://myweb.com/test-post-12/" class="post-cover-link"></a>
<div class="post-content">
<header class="entry-header">
<h1 class="entry-title">
<a href="http://myweb.com/test-post-12/" rel="bookmark">
<span class="entry-title-primary">test post 12</span> <span class="entry-subtitle">subtitle bottom</span> </a>
<p class="entry-content">subtitle top</p>
<div id="textslider">
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
1
</p>
</div>
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
2
</p>
</div>
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
3
</p>
</div>
</div>
</h1>
</header><!-- .entry-header -->
<footer class="entry-meta">
<span class="posted-on"><a href="http://myweb.com/test-post- 12/" title="4:06 pm" rel="bookmark"><time class="entry-date published" datetime="2016-03-02T16:06:39+00:00">March 2, 2016</time><time class="updated" datetime="2016-03-03T16:00:26+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>
这是 Test Post 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>
<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>
这是Test POST 10的代码(这个也有幻灯片,但如您所见,文本堆叠在一起,幻灯片根本不起作用):
<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;">
"the coolest of all cakes!!!"
</p>
</div>
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
"super good"
</p>
</div>
<div style="position: absolute; left: 50%;">
<p style="position: relative; left: -50%; border: none;">
"unbelievable"
</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>
这是测试后 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>
<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>
再次感谢。很抱歉帖子 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);
});
我的网页(divs...
<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>
它们都同时"动画化"。
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- keyup事件处理程序更改焦点不适用于快速键入
- 如何使用jquery处理php循环通过元素
- angular.js没有'无法在PhoneGap中处理视图标记
- Webpack/Rect:遵循egghead.io教程,但出现错误:您可能需要一个合适的加载程序来处理此文件类型
- 提示使用服务器端事件处理程序激活JavaScript
- javascript:如何在antlr生成的Lexer中进行错误处理
- 如何编写一个具有公共标头的批处理
- 在同一个服务工作者中处理service-worker.js有任何影响吗
- 如何处理node.js节点mongodb中的连接和查询队列
- 通过命令行/批处理文件打开页面时,将javascript代码注入Google Chrome
- 如何处理10页以上的静态页眉/页脚
- 将事件处理程序绑定到任何可能的事件
- 当浏览器上的后退按钮到达主页时,我需要删除Class
- 通过ajax将坐标传递到php服务器端,并在处理后检索到javascript
- python到“;流“;字典处理
- 使用javascript进行实时图像处理
- 导入jQuery脚本获胜'我不处理html文件
- Javascript无法处理表单提交
- JQuery 幻灯片仅适用于最近的帖子.需要它来处理主页上的最新帖子