jquery jcarousel如何添加控制按钮

我目前正在开发一个使用Sorgilla jquery jcarousel的网站，有两个滑块一起工作。

var carousel_2; jQuery(document).ready(function() { jQuery('#right-carousel').jcarousel({ start: 1, // Configuration goes here wrap: "circular", scroll: 1, auto:3, vertical:true, itemFirstInCallback: { onBeforeAnimation: function(carousel, item, index, action) { if (carousel_2) { carousel_2[action](); } } } }); }); jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ start: 3, // Configuration goes here wrap: "circular", scroll: 1, auto:3, vertical:false, buttonNextHTML: null, buttonPrevHTML: null, initCallback: function(c) { carousel_2 = c; } }); 

}）;

这应该工作，但我想知道是否可以添加外部控件与我正在使用的设置。 不幸的是我对jquery很新，所以还在学习。

我想要做的是在旋转木马下面添加按钮，行为就像分页一样，这里有一个例子…… http://truelogic.org/multicarousel.php或http://www.skyports.com

这是我工作的网站http://hartyinternational.hailstormcommerce.com/

理想情况下，如果我能让那些分页按钮与上面的工作类似，那就太好了。

我把这个css设置在旋转木马下面。

 .jcarousel-pagination { width:100px; height:40px; position:absolute; right:100px; bottom:0px; background:#000; } .jcarousel-pagination a { font-size: 75%; text-decoration: none; padding: 0 5px; margin: 0 0 5px 0; border: 1px solid #fff; color: #eee; background-color: #4088b8; font-weight: bold; } 

这是一些文档…… http://sorgalla.com/projects/jcarousel/

我正在考虑将此代码添加到initCallback:的函数中initCallback:但不确定如何使其工作或如何告诉它什么按钮代表什么幻灯片…

  jQuery('.jcarousel-pagination a').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); return false; }); 

任何帮助都会很棒，我知道这是一个普遍的问题，但我不知道从哪里开始谢谢。

Answer 1

将以下代码复制/粘贴到临时网页上，确保Javascript指向您所在文件夹的页面，这应该有效。

                 
 
 1 2 3 4 5 6 7 8 9 10 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 « Prev  Scroll 1 item per click Scroll 2 items per click Scroll 3 items per click Scroll 4 items per click Scroll 5 items per click  Next » 
 
 
   
 
 1 2 3 4 5 6 7 8 9 10 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 « Prev  Scroll 1 item per click Scroll 2 items per click Scroll 3 items per click Scroll 4 items per click Scroll 5 items per click  Next » 
 
 
    

Answer 2

实际上他们使用这个function来旋转

  jQuery(document).ready(function() { $('.lnkDot').click(function(){alert(1) var img = jQuery(this).attr('id'); var id = img.substring(img.length-1); var currId = currentDot; var i = 0; var start= 0; var stop = 0; if (parseInt(currId) < parseInt(id)) { start = currId; stop = id; } else { start= id; stop = currId; } for (i = start; i<= stop; i++) { actionFromDot = true; var carousel = jQuery('#mycarousel').data('jcarousel'); carousel.next(); } currentDot = id; return false; }); }); 

他们所做的是，当他们点击分页时，他们获取当前元素的id并获取数字（var id = img.substring（img.length-1）;）。

一旦他们得到数字，他们将有旋转的起始位置和end位置（他们从全局变量currentDot计算起始位置）。

之后make clicked id是currentDot

像这样更改您的分页链接。