Question

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

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

问题2： 我需要在页面加载时随机化滑块＃2（引号）上的幻灯片。我找到了一种随机化li（Randomize a sequence of div elements with jQuery）的方法，但滑块停止工作并仅滑动首先加载的引号。

非常感谢任何帮助。谢谢！

Answer 1

我遇到问题＃1并找到了一个我想分享的解决方案。循环jcarousels的问题在于，“liindex”在重新计算所有可用列表元素之后不会从1开始计数，而是继续向上计数（如果你添加警报（'liindex'），你会注意到在高亮功能内。

因此，如果您在循环自动轮播中有3个列表元素，一旦您完成第一次滚动并从第1项开始，jcarousel会在第4项看到它，而不是第1项。

这是我的解决方案（基于this），使用总项目的模块和当前项目计算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>

Answer 2

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

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

jQuery jCarousel - 外部控件高亮显示（换行：循环）+随机化幻灯片

2 个答案: