Question

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

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

之前的编码器正在使用索引为幻灯片下的小方块（以及许多其他位和bob）制作动画。

代码中的摘录如下所示：

$(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/

我努力工作的部分是最底层的，我们的承诺。

很抱歉这里有很多代码，其中很多可能都不需要，因为我说链接中提供了所有内容。

任何帮助都将非常感谢。卢克

修改现有的jQuery以动画滑块幻灯片下方的按钮

0 个答案: