技术文章 | Technical articles

jQuery源码笔记(三、持续更新)

一、安徽龙禧

定时器就是右按钮点击事件

// 右按钮点击事件函数

function rightBtnFun(){

// 防流氓

// 当图片在运动时什么都不做

if($imgList.is(":animated")){

 return;

}

// 老图消失

$imgList.eq(idx).fadeOut();

10  // 信号量改变

11  idx ++;

12  if(idx > amount - 1){

13   idx = 0

14  }

15  // 新图淡入

16  $imgList.eq(idx).fadeIn();

17  // 小圆点事件

18  $circles.eq(idx).addClass("cur").siblings().removeClass("cur");

19 }

 

二、呼吸轮播变种

2.1右按钮的点击事件

当老图完全淡出之后新图再淡入。使用回调函数。

// 右按钮点击事件

function rightBtnFun(){

// 放流氓

if($imgList.is(":animated")){

 return;

}

// 老图消失

$imgList.eq(idx).fadeOut(400,function(){

 // 信号量改变

10   idx ++;

11   if(idx > amount - 1){

12    idx = 0;

13   }

14   // 新图淡入

15   $imgList.eq(idx).fadeIn(600);

16   // 小圆点改变

17   $circles.eq(idx).addClass("cur").siblings().removeClass("cur");

18  });

19 

20 }

 

 

2.2 左按钮的点击事件

// 左按钮点击事件

$leftBtn.click(function(){

// 放流氓

if($imgList.is(":animated")){

 return;

}

// 老图消失

$imgList.eq(idx).fadeOut(400,function(){

 // 信号量改变

10   idx --;

11   if(idx < 0){

12    idx = amount - 1;

13   }

14   // 新图淡入

15   $imgList.eq(idx).fadeIn(600);

16   // 小圆点改变

17   $circles.eq(idx).addClass("cur").siblings().removeClass("cur");

18  });

19 });

 

2.3 定时器

相当于上帝之手点击右按钮。

// 页面加载完毕开始计时

var timer = setInterval(rightBtnFun, 3000);

// 鼠标进入轮播图停止定时器

$carousel.mouseenter(function(){

// 关闭定时器

clearInterval(timer);

});

// 鼠标离开重新开启定时器

10 $carousel.mouseleave(function(){

11  // 设表先关

12  clearInterval(timer);

13  timer = setInterval(rightFun,3000);

14 });

 

 

 

 

三、滚动轮播图(传统轮播图)

只要看到图片连续滚动出现的就可以认为是传统轮播图。

传统轮播图的布局:

火车法:

三位置法:

3.1 火车法

 

<div>

<ul>   非常大的width,否则li不能浮动上来

<li><img src="images/0.jpg" alt="" /></li>   浮动

<li><img src="images/1.jpg" alt="" /></li>   浮动

<li><img src="images/2.jpg" alt="" /></li>   浮动

<li><img src="images/3.jpg" alt="" /></li>   浮动

<li><img src="images/4.jpg" alt="" /></li>   浮动

</ul>

15 </div>

 

火车法很简单,核心语句:

//信号量,表示当前第几张图片。01234

var idx = 0;

//右按钮的事件监听

$rightBtn.click(function(){

//信号量增加

idx++;

if(idx > amount - 1){

idx = 0;

}

$unit.animate({"left":-560 * idx},400);

});

信号量的倍数上拉,就刚好停在了下表为信号量的那张图片上。

最后一张图必须平滑过渡到第一张图。

我们采取的魔术手段就是克隆0图片,追加到队列最末端:

20 // 将第一张图片克隆然后追加到unit的最后

21 $unit.children("li:first").clone().appendTo($unit);

 

 

我们说一下右按钮的编程思维,叫做先拉动,后验证

//右按钮的事件监听

$rightBtn.click(function(){

   idx++;

$unit.animate({"left":idx * -560},400,function(){

if(idx > amount - 1){

idx = 0;

$unit.css("left",0);  //瞬间移动

}

});

});

 

 

 

左按钮的编程思想:叫做先验证,后拉动

20 // 编程思想先验证,后拉动

21 $leftBtn.click(function(){

22  // 图片运动时什么都不做

23  if($unit.is(":animated")){

24   return;

25  }

26  idx --;

27  // 先验证

28  if(idx < 0){

29   idx = amount - 1;

30   // 瞬移到猫腻图

31   $unit.css("left" , -560 * amount);

32  }

33  // 再拉动

34  $unit.animate({"left" : -560 * idx},400);

35  // 小圆点

36  $circles.eq(idx).addClass("cur").siblings().removeClass("cur");

37 

38 });


关注微信公众号“icketang”,获取最新前端资讯,学习资料  

微信个人号二维码.jpg
完整笔记、web前端视频教程
,请添加微信“haomei0452”免费领取 


B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战


QQ图片20190401143635.jpg


上一篇文章: jQuery源码笔记(二、持续更新)
下一篇文章: jQuery源码笔记(四、持续更新)

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>