jQuery jCarousel - 外部控件突出显示（换行：圆形）+随机幻灯片

Question

我在实现 jQuery 的 jCarousel 插件时遇到了一些问题。 我正在使用的代码可在 http://projects.klavina.com/stackoverflow /index-slider.html

问题1： 我需要突出显示滑块 #1 上的活动外部控件。我在 http://heidzir.com/blog/?p=21 找到了解决方案，但正如评论中已经指出的那样 - 当滑块进入第二个循环时，它会停止工作。

问题2： 我需要在页面加载时随机化滑块#2（引号）上的幻灯片。我找到了一种随机化 li 的方法（随机化 div 元素序列jQuery），但滑块停止工作并仅滑动首先加载的报价。

任何帮助将不胜感激。谢谢你！

Answer 1

将 teasersize 设置为您拥有的列表项的数量

var teasersize = 4; // if you have 4 list items

Answer 2

我遇到了问题#1，并找到了一个我想分享的解决方案。循环 jcarousels 的问题在于，“liindex”在遍历所有可用列表元素后不会从 1 开始计数，而是继续向上计数（如果您添加一个alert('liindex')，您会注意到这一点） 因此，如果您在

圆形自动轮播中有 3 个列表元素，那么一旦您完成第一次滚动并从第 1 项开始，jcarousel 就会在第 4 项而不是第 1 项处看到它

。关于这个），使用总项目和当前项目的模来计算 liindex，

            var totalitems = 3; // number of total items in your carousel, you can probably detect it with jquery and replace this 

            function mycarousel_initCallback(carousel) {
                    jQuery('#external ul li a').bind('click', function() {
                            carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
                            return false;
                    });
                    carousel.clip.hover(function() {
                            carousel.stopAuto();
                    }, function() {
                            carousel.startAuto();
                    });
            };
            function highlight(carousel,objectli,liindex,listate){
                    actindex = teasersize - (liindex % teasersize); // calculate which item this corresponds to after first scroll
                    jQuery('#external a').removeAttr("class","active");
                    jQuery('#external a#link'+ actindex).attr("class","active");
            };
            function removehighlight(carousel,objectli,liindex,listate){
                    actindex = teasersize - (liindex % teasersize);
                    jQuery('#external a#link'+ actindex).removeAttr("class","active");
            };
            jQuery(document).ready(function() {
                    jQuery("#mycarousel").jcarousel({
                            initCallback: mycarousel_initCallback,
                            wrap: 'circular',
                            scroll: 1,
                            size: totalitems, // previously set in var
                            auto: 7,
                            itemVisibleInCallback:  highlight,
                            itemVisibleOutCallback: removehighlight,
                            buttonNextHTML: null,
                            buttonPrevHTML: null
                    });
            });

这就是基于 js 的外部导航应该是什么样子的：

            <ul id="external">
                <li><a href="#carouselitem1" id="link1">1</a></li>
                <li><a href="#carouselitem2" id="link2">2</a></li>
                <li><a href="#carouselitem3" id="link3">3</a></li>              </ul>