javascript - jQuery Cycle 插件不工作

Question

有一个网站，其中有一个部分我试图在 JSFiddle 中复制并使用它。

我遇到的一件事是：

在此处输入图像描述

这两个小<- ->按钮用于在推荐之间切换。这种切换是由jQuery Cycle Plugin完成的。

问题是我无法让这些按钮在 JSFiddle 中工作。

我导入了与原网站相同的jquery.cycle.all.2.74.pack.js文件，还添加了 jQuery。所以我不知道还缺少什么。

我的 JSFiddle 副本：http: //jsfiddle.net/ahmadka/FsSxd/

原文网址： http ://bit.ly/16447fr （避免搜索引擎索引）

<- ->这是在原始网站上使用这些按钮的地方：

在此处输入图像描述

score 0 · Accepted Answer

要使此功能正常运行，需要做一些事情。首先，你从来没有打电话cycle()：

$('.scrollable4 .items').cycle({
  timeout: 0, 
  next: '.next',
  prev: '.prev',
  fx: 'scrollRight',
  easing:  'easeInOutBack' 
})

其次，要模仿您正在寻找的效果，您需要 easing.js 插件（请参阅下面链接的 jsfiddle 中的外部资源）。

最后，在您的 CSS 中，您不能浮动元素，它们需要绝对定位并指定 100% 的高度。

#divleftcontent2 .scrollable4 .items {
  position: absolute;
  height: 100%;
}

还有其他方法可以解决高度问题，但这是一个不同的问题。

我已经更新了小提琴以显示我认为您正在寻找的最终版本：http: //jsfiddle.net/FsSxd/8/

1 回答 1