jQuery轮播自动滚动文本和图像 [英] jquery carousel auto scroll with text and image

问题描述

我正在使用jquery轮播，并且图片在此处自动旋转( http://jsbin.com/unoce/2 )，所以我遇到的问题是左侧的内容不会自动旋转与"图像，并且箭头选择也不会.仅当我单击左侧的内容，然后右侧的图像以及箭头一起适当移动时，此功能才有效.

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
  });
}); 

这是一个演示，您也可以编辑此演示: http://jsbin.com/unoce/2

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

谢谢

埃文

推荐答案

看看这个:

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

• 您正在使用旧版本的jQuery(1.3.2).当前为1.4.2，因此我在jsBin中将其切换为使用Google的jQuery托管版本.

• 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.

这不是问题的一部分，但是我合并了一些代码.您有多个呼叫$(document).ready().这还不错，但也没有必要.我将代码合并为一个ready()调用.

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.

您正在分配2个点击处理程序.同样，这很好，但不必要.我将两者的代码都放入了initCallback属性的回调中.

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.

initCallback在开始时仅被调用一次.这就是current类在自动更新时没有得到更新的原因.

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还有很多其他回调选项.一种叫做itemVisibleInCallback.实际上，它需要一个可以接受两个回调的对象:

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
}

那是我负责删除和添加current类的地方.

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

这些回调可以具有四个参数:轮播，项目，idx，状态

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

我必须使用idx参数来引用#features-nav下的适当项目，因为item参数似乎是指正在滚动的项目.

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.

这篇关于jQuery轮播自动滚动文本和图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！