wp next_post分页幻灯片效果

发布于 2024-10-08 12:50:27 字数 1199 浏览 0 评论 0原文

首先,我不擅长 jQuery 和编码。

我正在尝试实现类似 this one< 的幻灯片效果/a> 但与 jQuery 水平。 我在 Wordpress 下,当用户单击 next_posts_link 和 previous_posts_link 时,我会使用 ajax 一次加载 15 个帖子(仅缩略​​图和标题)。我使用淡入淡出效果让它工作,但我无法像上面的网站那样使用幻灯片效果工作。

我使用 jQueryUI 得到了一些工作,但基本上我遇到了两个问题:

  • 当我“隐藏”第一个 div 并将其向左滑动时,第二个 div 一段时间后就会出现(我认为是加载时间)。我想提供更多的“推”效果,显示下一个 div 在第一个 div 出去时进入。也许这可以通过某种预加载来完成。

  • 我只能在一个方向上执行此操作(第一个 div 隐藏在左侧,第二个 div 从右侧进入)。当我单击“下一个”或“上一个”按钮时,我需要正确的方向。

这是我正在使用的JS:

 <script type="text/javascript" charset="utf-8">
                jQuery(document).ready(function(){ 
                    jQuery('#nav-above a').live('click', function(e){e.preventDefault();var link = jQuery(this).attr('href');
                    jQuery('#nav-above').load(link + ' #nav-above');jQuery('#container-home').hide("slide", { direction : "left" }, 200).load(link + ' #content', function(){ jQuery('#container-home').show("slide", { direction: "right" }, 200);
                    }); 
                });
            });
</script>

first of all, I'm not good with jQuery and coding.

I'm trying to achieve a slide effect like this one but horizontal with jQuery.
I am under Wordpress and I'm loading 15 posts at a time (only thumbnail and title) with ajax when a user clicks on next_posts_link and previous_posts_link. I got it working using a fade effect but i can't get it working with a slide effect like in the website above.

I got something working using jQueryUI, but basically I had 2 problems:

  • when I "hide" the first div, sliding it to the left, the second is coming out after some time (I think is loading time). I'd like to give more the "push" effect showing the next div coming in as the first is going out. Maybe this could be done with some sort of preloading.

  • I can do this only in one direction (first div hiding on left side, second div coming in from right side). I need the right direction as I click on "next" or "prev" button.

This is the JS I'm using:

 <script type="text/javascript" charset="utf-8">
                jQuery(document).ready(function(){ 
                    jQuery('#nav-above a').live('click', function(e){e.preventDefault();var link = jQuery(this).attr('href');
                    jQuery('#nav-above').load(link + ' #nav-above');jQuery('#container-home').hide("slide", { direction : "left" }, 200).load(link + ' #content', function(){ jQuery('#container-home').show("slide", { direction: "right" }, 200);
                    }); 
                });
            });
</script>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

梦中楼上月下 2024-10-15 12:50:27

我想你需要像 Cycle 的scrollRight 这样的东西。

看看吧,如果需要帮助,尽管说。

http://jquery.malsup.com/cycle/

I suppose you need something like Cycle's scrollRight.

Check it out, if you need any help, just say it.

http://jquery.malsup.com/cycle/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文