具有动态上一个/下一个内容的 jQuery 滑块的最佳方法?

best approach for jQuery slider with dynamic prev/next content?(具有动态上一个/下一个内容的 jQuery 滑块的最佳方法?)

问题描述

这是一个有点复杂的谜题，我希望得到一些关于其他人如何解决这个问题的反馈.

Here's a somewhat complex puzzle, I'd love some feedback on how others would approach this.

这个网站基本上是一个免费的区域新闻博客.底部的图像展示了布局(忽略日期重叠故障).它是用 PHP、jQuery 和 xajax 编码的.

This site is basically a free regional news blog. The image at the bottom demonstrates the layout (ignore the date overlap glitch). It's coded in PHP, jQuery and xajax.

我的问题与动态内容加载有关.照原样，在页面加载时，我将箭头分配给上一篇/下一篇文章的 URL.没问题.网址很友好，页面会重新加载到下一篇文章，我可以整天循环浏览它们.

My question has to do with dynamic content loading. As is, on page-load, I assign the arrows to the URL of the prev/next articles. No prob. The URLs are friendly, the page reloads to the next article, and I can cycle through them all day long.

但是... 我想将箭头变成滑块(不是href)，具有以下行为:

But ... I'd like to turn the arrows into a slider (not an href) with the following behavior:

点击右箭头会...

1. 开始通过 xajax 在屏幕外加载新内容，
2. 使旧内容向左滑动(从屏幕上滑到屏幕外)与新内容齐平，也向左滑动(从屏幕外到屏幕上).

为什么?滑块很棒，我认为它看起来很专业.这是基本的滑块内容(例如 这个 jQuery scrollLeft 滑块)，除了单击箭头时动态加载内容，这引发了一些问题:

Why? Sliders are awesome, and I think it would look pro. And this is basic slider stuff (like this jQuery scrollLeft slider) except with content being dynamically loaded on click of the arrow, which raises some questions:

• 最好的方法是什么?
• 我是否使用 PHP 预填充所有空的隐藏文章 DIV?
• 我是否使用 jQuery 在每次单击箭头时附加/前置/删除文章 DIV?
• jQueryscrollLeft"偏移会是什么样子?内容 DIV 是静态宽度，但使用 jQuery scrollTo 会更好吗?

我希望我的问题很清楚......任何建议将不胜感激！

I hope my question is clear ... Any suggestions would be most appreciated!

推荐答案

这是我想出的解决方案.

Here's the solution I came up with.

http://jsfiddle.net/tXUwZ/

如果有人对如何清理或使其更紧有任何想法，请告诉我！

If anyone has ideas on how to clean it up or make it tighter, please let me know!

非常感谢@Jamie 朝着正确的方向前进！

Many thanks to @Jamie for the push in the right direction!

这篇关于具有动态上一个/下一个内容的 jQuery 滑块的最佳方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！