此次自己做一次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 {width:'430px',height:'182px',left:'-430px',top:'55px',zindex:1,opacity:0}, 21 {width:'530px',height:'224px',left:'0px',top:'22px',zindex:2,opacity:1}, 22 {width:'640px',height:'270px',left:'275px',top:'0px',zindex:4,opacity:1}, 23 {width:'530px',height:'224px',left:'660px',top:'22px',zindex:2,opacity:1}, 24 {width:'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 //根据排序,计算元素新的位置，然后animate110 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加减class126 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>
联系客服
