slideロジック

5484 ワード

//     slide   :
var
len = $('.huge-benefit-09 ul li').length; var oLiWidth = $('.huge-benefit-09 ul li').css('width'); // for(var i=1; i<len; i++){ $('.huge-benefit-09 ul li').eq(i).css('left',parseInt(oLiWidth)); } // li var iNow = 0; // li var onOff = true; // 。。。 $('.arrow_left').click(function(){ // , if(onOff){ onOffChange(); if(iNow>=len-1){ $('.huge-benefit-09 ul li').eq(iNow).animate({left:-parseInt(oLiWidth)},1000,moveRight); // iNow = 0; } else{ $('.huge-benefit-09 ul li').eq(iNow).animate({left:-parseInt(oLiWidth)},1000); iNow++; } $('.huge-benefit-09 ul li').eq(iNow).css('left',parseInt(oLiWidth)); $('.huge-benefit-09 ul li').eq(iNow).animate({left:0},1000,onOffChange); } }) $('.arrow_right').click(function(){ // , if (onOff) { onOffChange(); if(iNow<=0){ $('.huge-benefit-09 ul li').eq(iNow).animate({left:parseInt(oLiWidth)},1000,moveLeft); // iNow = len-1; } else{ $('.huge-benefit-09 ul li').eq(iNow).animate({left:parseInt(oLiWidth)},1000); iNow--; } $('.huge-benefit-09 ul li').eq(iNow).css('left',-parseInt(oLiWidth)); $('.huge-benefit-09 ul li').eq(iNow).animate({left:0},1000,onOffChange); // }; }) function moveRight(){ for(var j=1;j<len;j++){ $('.huge-benefit-09 ul li').eq(j).css('left',parseInt(oLiWidth)); } } function moveLeft(){ for(var j=0;j<len-1;j++){ $('.huge-benefit-09 ul li').eq(j).css('left',-parseInt(oLiWidth)); } } function onOffChange(){ onOff = !onOff; } $('.huge-benefit-08 .zt-con a').click(function(){ if($(this).index()==iNow) return; else if($(this).index()<iNow){ $('.huge-benefit-09 ul li').eq(iNow).animate({left:parseInt(oLiWidth)},1000); $('.huge-benefit-09 ul li').eq($(this).index()).css('left',-parseInt(oLiWidth)); } else{ $('.huge-benefit-09 ul li').eq(iNow).animate({left:-parseInt(oLiWidth)},1000) $('.huge-benefit-09 ul li').eq($(this).index()).css('left',parseInt(oLiWidth)); } iNow = $(this).index(); $('.huge-benefit-09 ul li').eq($(this).index()).animate({left:0},1000) })

注記:単純なslideの論理:
1.liの個数と表示領域の幅を取得する
2.moveLeft,moveRightの2つの臨界は左に帰し、右に帰す.
3.クリック進行時の2つのliの動作と、現在のiNow下付きの判断;