slide逻辑

//一个简单的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 两种临界归左,归右

3.点击进行时的两个li的动作,和当前iNow下标的判断;

原文地址:https://www.cnblogs.com/hanbingljw/p/4652001.html