一、 间歇模型
我们想让轮播图显示3张图片，我们的编程思路是使用定时器，我们想要使图片每2000ms更换一次，然后完成动画的时间是600ms，那么定时器的时间应该是它们的加和，所以应该是2600ms
var idx = 0;
setInterval(function(){
idx++;
$("#unit").animate({"top":-90 * idx},500);
},2500);
拉动的策略就是右按钮的策略：
setInterval(function(){
idx ++;
$unit.animate({"top": -90* idx} , 500,function(){
// 验证
if(idx > $unit.children().length / 3 - 2){
idx = 0;
$unit.css("top",0);
}
});
}, 2500);
二、 手风琴效果
分析：
我们定义手风琴图的宽为900px, 里面有5张图片，每一张的图片的间隔应该是180px
当鼠标移入图片的时候， 当前图片展开（560px）, 剩余的四张图片压缩，每一张图片的间隔应该是85px
DOM结构：
1 <div id="box">
2 <ul>
3 <li><img src="images/0.jpg" alt=""></li>
4 <li><img src="images/1.jpg" alt=""></li>
5 <li><img src="images/2.jpg" alt=""></li>
6 <li><img src="images/3.jpg" alt=""></li>
7 <li><img src="images/4.jpg" alt=""></li>
8 </ul>
9 </div>
1.1 普通效果
1 // 添加鼠标移入事件
2 $no0.mouseenter(function() {
3 // 防流氓
4 $("li").stop(true);
5 $no1.animate({"left": 560}, 500);
6 $no2.animate({"left": 560 + 85}, 500);
7 $no3.animate({"left": 560 + 85 * 2}, 500);
8 $no4.animate({"left": 560 + 85 * 3}, 500);
9 })
10
11 $no1.mouseenter(function() {
12 // 防流氓
13 $("li").stop(true);
14 $no1.animate({"left": 85}, 500);
15 $no2.animate({"left": 560 + 85}, 500);
16 $no3.animate({"left": 560 + 85 * 2}, 500);
17 $no4.animate({"left": 560 + 85 * 3}, 500);
18 })
19
20 // 添加鼠标离开事件
21 $box.mouseleave(function() {
22 // 防流氓
23 $("li").stop(true);
24 $no1.animate({"left": 180}, 500);
25 $no2.animate({"left": 180 * 2}, 500);
26 $no3.animate({"left": 180 * 3}, 500);
27 $no4.animate({"left": 180 * 4}, 500);
28 })
1.2 蒙版效果
布局：
29 <div id="carousel">
30 <ul>
31 <li>
32 <div></div>
33 <img src="images/0.jpg" alt="">
34 </li>
35 <li>
36 <div></div>
37 <img src="images/1.jpg" alt="">
38 </li>
39 <li>
40 <div></div>
41 <img src="images/2.jpg" alt="">
42 </li>
43 <li>
44 <div></div>
45 <img src="images/3.jpg" alt="">
46 </li>
47 <li>
48 <div></div>
49 <img src="images/4.jpg" alt="">
50 </li>
51 </ul>
52 </div>
53
交互效果：
54 // 获取元素
55 var $carousel = $("#carousel");
56 // 所有li添加鼠标进入事件
57 $("li").mouseenter(function(){
58 // 信号量保存触发事件的对象序号
59 var idx = $(this).index();
60 $("li").stop(true);
61
62 // 当图片小于等于idx。往左移动85 * n
63 $("li:lt(" + (idx + 1) + ")").each(function(i){
64 // console.log(i);
65 $(this).animate({"left" : 85 * i},500);
66 });
67
68 // 当图片序号大于idx,往右移动
69 $("li:gt(" + idx + ")").each(function(i){
70 // console.log(i);
71 $(this).animate({"left" : 560 + 85 * (idx + i)},500);
72 });
73
74 // 对应的蒙版消失
75 $(this).children(".mask").stop(true).fadeOut();
76 // 其他Li蒙版还存在
77 $(this).siblings().children(".mask").stop(true).fadeIn();
78 });
79
80 // 鼠标离开。所有元素恢复原状
81 $carousel.mouseleave(function(){
82 $("li").stop(true);
83 $("li").each(function(i){
84 $(this).animate({"left" : 180 * i},500);
85 });
86 // 所有添加蒙版
87 $(".mask").stop(true).fadeIn();
88 });
1.3、数组思维
将相同类型的元素或者对象存放在数组中，通过下标得到任何一项。
10 // 信号量
11 // 信号量表示哪一队加分A对应0 B对应1
12 var idx = 0;
13
14 // 将分数的数值保存在数组中
15 var scoreArr = [0,0];
16
17 // 将显示分数的对象保存在数组中
18 var h2Arr = [$("#fenshua"),$("#fenshub")];
19
20 // 判断是哪一队加分
21 $(".dui").click(function(){
22 idx = $(this).index();
23 });
24
25 // btn1点击事件
26 $("#btn1").click(function(){
27 // idx对应的scoreArr加分
28 scoreArr[idx] += 1;
29 // 将分数体现在元素身上
30 h2Arr[idx].html(scoreArr[idx]);
31 });
32
33 $("#btn2").click(function(){
34 scoreArr[idx] += 2;
35 h2Arr[idx].html(scoreArr[idx]);
36 });
关注VX公众号“icketang” 免费领取项目实战视频教程
网友评论