jquery carousel auto scroll with text and image

问题

I'm using the jquery carousel and I have the image auto rotating here ( http://jsbin.com/unoce/2), so the issue I'm having is the content on the left is not AUTO rotating "with" the image and the arrow selection is not either. It only works when I click the content on the left and then the image on the right along with the arrow move appropriately together.

Can someone provide support so I may get the text and the arrow to "auto" rotate with the image?

This code below would only rotate the image and nothing else...

jQuery(document).ready(function() {
  jQuery("#features").jcarousel({
    scroll: 1,
    auto:2,
    wrap: 'both',
    initCallback: mycarousel_initCallback,
    buttonNextHTML: null,
    buttonPrevHTML: null
  });
});

Here's a demo and you can edit this demo too: http://jsbin.com/unoce/2

Thank you,

Evan

回答1:

Take a look at this:

http://jsbin.com/unoce/7/edit

You're using an old version of jQuery (1.3.2). The current is 1.4.2, so I switched it in the jsBin to use Google's hosted version of jQuery.
This wasn't part of the issue, but I consolidated some code. You had several calls to $(document).ready(). This isn't bad, but it isn't necessary either. I consolidated the code into one ready() call.
You were assigning 2 click handlers. Again, this is fine, but unnecessary. I put the code from both into the callback for the initCallback property.
The initCallback only gets called once, at the beginning. That is why the current class wasn't getting updated when it would auto update.

jCarousel has a lot of other callback options. One is called itemVisibleInCallback. It actually takes an object that can take two callbacks:

itemVisibleInCallback: {
      // This one is called before new item is displayed
  onBeforeAnimation: mycarousel_itemVisibleBefore,

      // This one is called after new item is displayed
  onAfterAnimation: mycarousel_itemVisibleAfter
}

That is where I took care of removing and adding the current class.

Those callbacks can have four parameters: carousel, item, idx, state

I had to use the idx parameter to refer to the proper item under #features-nav because the item parameter seemed to refer to the item being scrolled.

Anyway, hope this helps.

来源：https://stackoverflow.com/questions/3012154/jquery-carousel-auto-scroll-with-text-and-image

标签

javascript

jquery

carousel