基于jquery实现的仿优酷图片轮播特效代码

2020-05-29 06:59:29易采站长站整理

if(nowimg < 8){
nowimg ++;
}else{
nowimg = 0;
}

如果不是最后一张,点击一下 “右按钮”, 则 nowImg值加1, 如果是最后一张,则nowImg从0开始。

2-2)点击一下 “右按钮”, 关于分页指示器的处理:


$(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur");

将当前显示的图片对应的指示器按钮高亮显示,兄弟节点普通显示。
2-3)交换图片位置:


//先交换位置
$(".no1").animate(json0,sudu);
$(".no2").animate(json1,sudu);
$(".no3").animate(json2,sudu);
$(".no4").animate(json3,sudu);
$(".no0").css(json4);

前面四句话,会动画执行图片移动的效果。静止状态的时候是三张图片显示在我们眼前;运动的时候,可以想象得出最多有四张图片显示在我们眼前,上面四句代码执行过程中,剖析图如下:

即在动画执行的过程中,”no1″ 的图片渐渐离开屏幕可视范围,与此同时, “no4” 的图片渐渐显示在屏幕可视范围。

而在动画执行的过程中,”no0″ 的这张图片早就定位到 “no4” 的位置(此时在可视范围之外,因为这里的animate动画是异步执行的,不会延迟$(.no0).css(json4)这句代码的执行。当这一组代码执行完毕后,剖析图如下:

此时,我们再将那些 处于 “waiting” 状态的图片考虑进来,则此时的剖析图如下:

2-4)以上流程执行完毕后,是完成了一次轮播效果,但是此时各个图片的牌号顺序已经被打乱,为了使得轮播继续下去,我们应该将牌号再 “恢复” 过来。所以我们可以添加以下代码:


//再交换身份
$(".no0").attr("class","waiting");
$(".no1").attr("class","no0");
$(".no2").attr("class","no1");
$(".no3").attr("class","no2");
$(".no4").attr("class","no3");

上面的代码执行后,意味着将 上图中 “no0” 这张图片拉入到 “waiting” 区域,而其他四个的编号则依次往前推算。执行完毕后,剖析图如下:

正如上图所示,”活跃”状态的5张图片,最后一张现在也变成了 “waiting” 状态,所以需要有人替补上去,才能继续动画的执行。很显然,应该拿 “waiting” 列表的第一张,也就是 “活跃” 状态的后面一张图片 “顶替” 上去;如果后面没有 “waiting” 状态的图片了, 说明这些 “waiting” 状态的图片全部 “跑到”  class 为 tuul所有列表的前面去了,那就抓取这些列表的第一张作为 “顶替者”。代码如下: