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