duanmao2650 2011-08-23 06:00
浏览 46
已采纳

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

layout

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

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.

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.

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

Clicking the right arrow will ...

  1. Begin loading the new content offscreen via xajax,
  2. Cause the old content to slide left (from onscreen to offscreen) flush with the new content also sliding left (from offscreen to onscreen).

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:

  • What's the best approach for this?
  • Do I use PHP to pre-populate ALL empty hidden article DIVs?
  • Do I use jQuery to append/prepend/remove article DIVs with each arrow click?
  • What would the jQuery "scrollLeft" offset look like? The content DIV is static width, but would I be better off with jQuery scrollTo?

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

  • 写回答

2条回答 默认 最新

  • dtrb96410 2011-08-23 12:57
    关注

    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!

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 MATLAB动图的问题
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名