1

希望有人可以帮助解决这个问题。

我正在调整网站上的一些代码（我的 jQuery 知识相当初级）。

前面的编码器使用索引来为幻灯片下的小方块（以及许多其他的小方块）制作动画。

代码摘录如下所示：

$(document).ready(function(event){
SlideAreaData = [
// Our Commitment
    {
        Blurbs:[
            // 0 
            "We believe that businesses...",
            // 1
            "We can...",
            // 2
            "We will always..."
        ],
        SlideData:{// SlideNumber : [BlurbIndex,ListIndex,HighlightClass,SlideArrow]
            // Our Commitment landing
            0 :[0,0,'colour_blue','images/BlueArrow'],
            // Our Commitment
            1 :[1,1,'colour_blue','images/BlueArrow'],
            2 :[2,2,'colour_blue','images/BlueArrow']
        },
        Links:[[0,'background_blue'],[1,'background_blue'],[2,'background_blue'],[3,'']]// length of slides at end
    }
...

滑块功能

 $('.slidebox_window').each(function(i,e){
    /*ContentArea*/
    var Blurbs = SlideAreaData[i].Blurbs;
    var SlideData = SlideAreaData[i].SlideData;
    var LinkData = SlideAreaData[i].Links;

    var SlideView = 0;
    var SlideBlurb = 0;
    var SlideLinkIndex = 0;
    var SlideHighlight = 'colour_blue';
    var _Startup = true;

    var SlideWindow = $(e);
    var Slides = $(e).children('.slidebox_slide');
    var Navlist = $(e).parentsUntil('#ContentArea').find('.slidebox_list > li');
    var BlurbDiv = $(e).parentsUntil('#ContentArea').find('.slidebox_blurb');
    var Progress = $(e).parentsUntil('#ContentArea').find('.slidebox_progress');

    var ButtonLeftImg = SlideWindow.find('.slidebox_nextz>img').eq(0);
    var ButtonRightImg = SlideWindow.find('.slidebox_nextz>img').eq(1);

    Navlist.each(function(i,e){
        $(e).click(function(event){
            SkipToSlide(LinkData[i][0]);
        });
    });

    var SkipToSlide = function(next,direction){
        if(direction != 1)
            direction = -1;
        if(next==SlideView || Slides.is(':animated') || BlurbDiv.is(':animated'))
            return;
        Slides.eq(next).css({'left':direction*640});
        Slides.filter(':eq('+SlideView+'),:eq('+next+')').animate({left:(direction==1?'-':'+')+'=640'},500,'easeOutElastic')
        HighlightSlide(next);
    };

    var HighlightSlide = function(next){
        if(next == SlideView /*&& !_Startup*/)
            return;
        info = SlideData[next];// 0:BlurbIndex, 1:LinkIndex, 2:HighlightClass

        size = LinkData[info[1]+1][0] - LinkData[info[1]][0];
        current = next - LinkData[info[1]][0];
        highlight = LinkData[info[1]][1];
        if(info[1] != SlideLinkIndex || _Startup){
            // Highlight active link
            Navlist.eq(SlideLinkIndex).removeClass(SlideHighlight);
            Navlist.eq(info[1]).addClass(info[2]);
            // Manage progress display
            if(size > 1){
                Progress.html(Array(size+1).join('<div></div>'));
                Progress.children().each(function(i,e){
                    $(e).on('click',function(){
                        SkipToSlide(LinkData[info[1]][0]+i);
                    }).css('cursor','pointer');
                });
            }else{
                Progress.html('');
            }
            SlideHighlight = info[2];
            SlideLinkIndex = info[1];
        }
        //SlideWindow.find('.slidebox_nextz>img').attr('src',info[3]);
        ButtonLeftImg.attr('src',info[3]+'L.png');
        ButtonRightImg.attr('src',info[3]+'R.png');
        Progress.children().removeClass(highlight).eq(current).addClass(highlight);

        if(SlideBlurb != info[0] /*|| _Startup*/){
            text = Blurbs[info[0]];
            test = BlurbDiv.clone().appendTo('#TestArea');//$('#TestArea').
            test.html(text).css({'height':'auto','width':BlurbDiv.outerWidth(true)});

            BlurbDiv.animate({opacity:0},250,function(){
                BlurbDiv.animate({height:test.height()},250,function(){
                    BlurbDiv.html(text);
                    BlurbDiv.animate({opacity:1},250,function(){
                        test.remove();
                    });
                });
            });
            SlideBlurb = info[0];
        }

        SlideView = next;
    };
    Highlighters[i] = HighlightSlide;

然后每张幻灯片下的html是：

 <div style="top:-3px;position:relative;left:206px;height:57px;width:212px;text-align:center;" class="slidebox_progress">
        <div></div>
        <div></div>
        <div></div>
    </div>

我已经尝试了索引的所有可能变化，以尝试让我的部分正常工作。只是无法解决。

所有代码都可在http://www.leanproductions.co.uk/dev/

我正在努力工作的部分在底部，我们的承诺。

抱歉，这里有这么多代码，其中大部分可能不需要，正如我所说的那样，链接中的所有内容都可用。

任何帮助都将不胜感激。卢克

4

0 回答 0