javascript 滚动到 jcarousel 的第一项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4589893/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scroll to first item of jcarousel
提问by Chris
I have multiple instances of jcarousel on a page within a tabbed interface. I need to be able to scroll to the first item of each carousel when the relevant tab is clicked and am unsure how to do this. I've looked at the static controls example (http://sorgalla.com/projects/jcarousel/examples/static_controls.html) but cannot fathom how to get this working for multiple carousels.
我在选项卡式界面中的页面上有多个 jcarousel 实例。单击相关选项卡时，我需要能够滚动到每个轮播的第一项，但我不确定如何执行此操作。我查看了静态控件示例 ( http://sorgalla.com/projects/jcarousel/examples/static_controls.html)，但无法理解如何使其适用于多个轮播。
Any help would be greatlyappreciated. My work-in-progress is here: http://www.brainsdesign.com/client/Lab/14512/style.html
任何帮助将大大赞赏。我正在进行的工作在这里：http: //www.brainsdesign.com/client/Lab/14512/style.html
Many thanks,
非常感谢，
Chris
克里斯
回答by Larry Hipp
You can use something like:
你可以使用类似的东西：
jQuery('#myCarousel')
.jcarousel('scroll',position);
Where position is the start of your jcarousel or the index you want to get to.
其中 position 是您的 jcarousel 的开始或您想要到达的索引。
This is from the jquery.jcarousel.js source file:
这是来自 jquery.jcarousel.js 源文件：
/**
* Scrolls the carousel to a certain position.
*
* @method scroll
* @return undefined
* @param i {Number} The index of the element to scoll to.
* @param a {Boolean} Flag indicating whether to perform animation.
*/
scroll: function(i, a) {
if (this.locked || this.animating) {
return;
}
this.pauseAuto();
this.animate(this.pos(i), a);
},
回答by user56reinstatemonica8
To scroll to a specific arbitrary position in jCarousel...
要滚动到 jCarousel 中的特定任意位置...
- Get the jcarousel instance object. It's in the jQuery .data() of the element that .jcarousel() was called on (side note: in Drupal views jcarousel module, that's the
ul.jcarousel) - Call
.scroll()on it.
- 获取 jcarousel 实例对象。它在调用 .jcarousel() 的元素的 jQuery .data() 中（旁注：在 Drupal 视图 jcarousel 模块中，这就是
ul.jcarousel） - 打电话
.scroll()给它。
In code:
在代码中：
// Create it
$('.posts').jcarousel( someSettings );
// Get it
var jcarousel = $('.posts').data( 'jcarousel' );
// Scroll it
var scrollTo = 1;
var animateScrolling = true;
jcarousel.scroll( scrollTo - 1, animateScrolling );
If ever want to look up a specific element using jQuery selectors, then, scroll tothat element (scrolling a jCarousel by element not by position). It's easy: each jCarousel element has an attribute, jcarouselindex. Look it up with var position = $('#some-element').attr('jcarouselindex');.
如果想使用 jQuery 选择器查找特定元素，则滚动到该元素（按元素而不是位置滚动 jCarousel）。很简单：每个 jCarousel 元素都有一个属性 jcarouselindex。用 查一下var position = $('#some-element').attr('jcarouselindex');。
Sample:
样本：
// Get jcarousel
var jcarousel = $('#menu').data('jcarousel');
var scrollTo = menuOption.parent().attr("jcarouselindex");
var animateScrolling = true;
// Scroll it
jcarousel.scroll(scrollTo - 1, animateScrolling);
where menuOptionis an anchor <a>like this one:
像这样menuOption的锚在哪里<a>：
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-8 jcarousel-item-8-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="8">
<a title="Educa??o de Pacientes e Familiares" data-chapterid="16" data-acronym="PFE" href="">
</li>
Note: it's important to use scrollTo - 1because index is 0 based.
注意：使用很重要，scrollTo - 1因为索引是基于 0 的。
回答by Enayet
Here is the solution, managed it to work form
这是解决方案，管理它以工作形式
http://sorgalla.com/projects/jcarousel/examples/static_controls.html
http://sorgalla.com/projects/jcarousel/examples/static_controls.html
I have a tabbed interface like:
我有一个选项卡式界面，如：
<div class="navTabs">
<ul class="tabs">
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</div>
And each tab contains jcarousel slider.
每个选项卡都包含 jcarousel 滑块。
jQuery(document).ready(
function($)
{
jQuery('.posts').jcarousel({
scroll: 4,
visible:4,
//this.scroll(1, 0);
initCallback: mycarousel_initCallback
});
});
function mycarousel_initCallback(carousel) {
jQuery('.navTabs a').bind('click', function() {
carousel.scroll(1,0);
//return false;
});
};
I have checked your site...so thinking you should be able to get the code from here.
我检查了您的网站...所以认为您应该能够从这里获取代码。
In the jCarousel call a function by initCallBack and trigger the custom function when the tab is clicked do go general scroll to position 1 to reset!
在 jCarousel 中，通过 initCallBack 调用一个函数，并在单击选项卡时触发自定义函数，请执行一般滚动到位置 1 以重置！
Thats it.
而已。
Thanks, Enayet
谢谢，伊纳耶
