一、 间歇模型
我们想让轮播图显示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 }); |
关注微信公众号“icketang”，获取最新前端资讯，学习资料
完整笔记、web前端视频教程，请添加微信“haomei0452”免费领取
B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战
