一、安徽龙禧
定时器就是右按钮点击事件
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 });
关注VX公众号“icketang” 免费领取项目实战视频教程
网友评论