一、安徽龙禧
定时器就是右按钮点击事件
1 // 右按钮点击事件函数 2 function rightBtnFun(){ 3 // 防流氓 4 // 当图片在运动时什么都不做 5 if($imgList.is(":animated")){ 6 return; 7 } 8 // 老图消失 9 $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右按钮的点击事件
当老图完全淡出之后新图再淡入。使用回调函数。
1 // 右按钮点击事件 2 function rightBtnFun(){ 3 // 放流氓 4 if($imgList.is(":animated")){ 5 return; 6 } 7 // 老图消失 8 $imgList.eq(idx).fadeOut(400,function(){ 9 // 信号量改变 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 左按钮的点击事件
1 // 左按钮点击事件 2 $leftBtn.click(function(){ 3 // 放流氓 4 if($imgList.is(":animated")){ 5 return; 6 } 7 // 老图消失 8 $imgList.eq(idx).fadeOut(400,function(){ 9 // 信号量改变 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 定时器
相当于上帝之手点击右按钮。
1 // 页面加载完毕开始计时 2 var timer = setInterval(rightBtnFun, 3000); 3 // 鼠标进入轮播图停止定时器 4 $carousel.mouseenter(function(){ 5 // 关闭定时器 6 clearInterval(timer); 7 }); 8 9 // 鼠标离开重新开启定时器 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> |
火车法很简单，核心语句：
//信号量，表示当前第几张图片。0、1、2、3、4 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”，获取最新前端资讯，学习资料
完整笔记、web前端视频教程，请添加微信“haomei0452”免费领取
B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战
