此次自己做一次js逻辑造作的练习，效果是仿照youku电视剧频道的焦点图，优酷原效果地址：http://tv.youku.com/
今天练习结果上代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 7 <script> 8 (function(){ 9 $(function(){ 10 //初始值 11 var btnLeft=$('.btnLeft');//左边按钮 12 var btnRight=$('.btnRight');//右边按钮 13 var arrUl=$('#arrLi'); 14 var arrLi=$('#arrLi>li'); 15 var btnLi=$('#btnLi>li'); 16 var arrSort=[]; 17 var kai=true;//开关 18 //始终显示三张图片，数组的第2位是大图所在位置，俩侧一次递减 19 var pos=[ 20 {'430px',height:'182px',left:'-430px',top:'55px',zindex:1,opacity:0}, 21 {'530px',height:'224px',left:'0px',top:'22px',zindex:2,opacity:1}, 22 {'640px',height:'270px',left:'275px',top:'0px',zindex:4,opacity:1}, 23 {'530px',height:'224px',left:'660px',top:'22px',zindex:2,opacity:1}, 24 {'430px',height:'182px',left:'1190px',top:'55px',zindex:1,opacity:0}, 25 ] 26 /*初始化图片位置，然后把所有li记录到arrSort里*/ 27 for(var i=0;i<5;i++){ 28 $(arrLi[i]).css({ 29 'width':pos[i].width, 30 'height':pos[i].height, 31 'left':pos[i].left, 32 'top':pos[i].top, 33 'z-index':pos[i].zindex, 34 'opacity':pos[i].opacity 35 }); 36 } 37 var oPath=parseInt(arrLi.eq(2).attr('data-num')); 38 moveClass(oPath); 39 for(var i=0;i<5;i++){ 40 arrSort.push(arrLi[i]) 41 } 42 //左按钮点击 43 btnRight.on('click',function(){ 44 //点击进来的时候检测上一个动画是否执行完了，没执行之前，不可以再进行下一步动画操作 45 if(kai){ 46 kai=false; 47 48 doPrev(); 49 setTimeout(function(){kai=true;},500); 50 //上方的setTimeout必须有， 51 //不然会出bug,不信可以试试 52 } 53 54 }); 55 //右按钮点击 56 btnLeft.on('click',function(){ 57 //点击进来的时候检测上一个动画是否执行完了，没执行之前，不可以再进行下一步动画操作 58 if(kai){ 59 60 kai=false; 61 doNext(); 62 63 setTimeout(function(){kai=true;},500) 64 } 65 66 }); 67 //btn点击 68 btnLi.on('click',function(){ 69 70 var _index=$(this).index(); 71 var _imgIndex=addCenter(_index);//返回当前按钮点击后 ，对应的图片的真实index值，后续进行arrSort操作 72 switch(_imgIndex){ 73 case 0: 74 for(var i=0;i<2;i++){ 75 doNext(); 76 } 77 break; 78 case 1: 79 doNext(); 80 break; 81 case 2: 82 return; 83 break; 84 case 3: 85 doPrev(); 86 break; 87 case 4: 88 for(var i=0;i<2;i++){ 89 doPrev(); 90 } 91 break; 92 93 94 } 95 }); 96 //数组造作 上一个依次排序 97 function doPrev(){ 98 99 arrSort.push(arrSort.shift()); 100 doMove(); 101 }; 102 //数组造作 下一个依次排序 103 function doNext(){ 104 105 arrSort.unshift(arrSort.pop()); 106 doMove(); 107 108 }; 109 //根据排序,计算元素新的位置，然后animate 110 function doMove(){ 111 arrUl.append(arrSort); 112 for(var i=0;i<5;i++){ 113 $(arrSort[i]).css('z-index',pos[i].zindex); 114 $(arrSort[i]).stop().animate({ 115 'width':pos[i].width, 116 'height':pos[i].height, 117 'left':pos[i].left, 118 'top':pos[i].top, 119 'opacity':pos[i].opacity, 120 },500); 121 } 122 var _index=parseInt($(arrSort[2]).attr('data-num')); 123 moveClass(_index); 124 } 125 //给当前btn加减class 126 function moveClass(oindex){ 127 btnLi.removeClass('active'); 128 btnLi.eq(oindex).addClass('active'); 129 } 130 //把当前按钮点击的元素，增加到中间位置去 131 function addCenter(index){ 132 var _imgIndex=0; 133 arrLi.each(function(){ 134 var num=$(this).attr('data-num'); 135 if(num==index){ 136 _imgIndex=$(this).index(); 137 } 138 139 }); 140 return _imgIndex; 141 } 142 }); 143 })() 144 </script> 145 </head> 146 <style> 147 *{margin:0;padding:0;} 148 li{list-style:none;} 149 .container{width:1190px;height:310px;margin:10px auto;position:relative;overflow:hidden;} 150 .btnLeft{width:275px;height:225px;position:absolute;left:0px;top:22px;z-index:3;background:url(http://res.mfs.ykimg.com/0510000051AD63E96714C04A1400547A) no-repeat 7px 89px; 151 cursor:pointer;z-index:6;} 152 .btnRight{width:275px;height:225px;position:absolute;right:0px;top:22px;z-index:3;background:url(http://res.mfs.ykimg.com/0510000051AD63F56714C04A1305CFEF) no-repeat 219px 89px; 153 cursor:pointer;z-index:6;} 154 .container ul{width:100%;height:270px;position:relative;} 155 .container ul li{position:absolute;width:0px;height:0px;left:595px;top:135px;overflow:hidden;box-shadow:1px 5px 3px #ccc;} 156 .container ul li img{width:100%;height:auto;} 157 .container ol{padding-left:552px;margin-top:10px;} 158 .container ol li{width:10px;height:10px;display:block;background:#ccc;border-radius:6px;margin:0px 3px;text-indent:-9999px;float:left;cursor:pointer;} 159 .container ol .active{background:#69aaec;} 160 </style> 161 <body> 162 <div class="container"> 163 <span class="btnLeft"></span> 164 <span class="btnRight"></span> 165 166 <ul id="arrLi"> 167 <li data-num="3"><a href="#"><img src="http://r4.ykimg.com/051000005458453B6737B36F870BBE71"/></a></li> 168 <li data-num="4"><a href="#"><img src="http://r3.ykimg.com/05100000544490016737B35A220433C1"/></a></li> 169 <li data-num="0"><a href="#"><img src="http://r1.ykimg.com/051000005469ACA06737B359A40BCB53"/></a></li> 170 <li data-num="1"><a href="#"><img src="http://r1.ykimg.com/05100000546022E46737B35DAC0A11F8"/></a></li> 171 <li data-num="2"><a href="#"><img src="http://r1.ykimg.com/051000005434B8006737B371DF016067"/></a></li> 172 </ul> 173 <ol id="btnLi"> 174 <li class="active">0</li> 175 <li>1</li> 176 <li>2</li> 177 <li>3</li> 178 <li>4</li> 179 </ol> 180 </div> 181 </body> 182 </html>