1

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

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

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

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

4

2 回答 2

3

我遇到了问题 #1，并找到了我想分享的解决方案。循环 jcarousels 的问题在于，“liindex”在遍历所有可用列表元素后不会从 1 开始计数，而是继续向上计数（如果添加 alert('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>
于 2011-01-25T15:36:48.087 回答
1

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

var teasersize = 4; // if you have 4 list items
于 2011-04-01T00:32:47.090 回答