基於jQuery左右滑動切換特效 附源碼

標籤：java   javascrip   1年   css   var   htm   ref   cti   length   

html代碼：

 1 <div class="bodyCon08"><!--學員--> 2     <div class="students"> 3           4           <div id="four_flash"> 5             <div class="flashBg"> 6                 <ul class="mobile"> 7                     <li> 8                         <img src="images/senke_xy00.jpg" /> 9                         <dd>高同學</dd>10                         <p>2013年CPA暑期班學員，一年通過5門課程</p>11                         <a href=""></a>12                     </li>13                     <li>14                         <img src="images/senke_xy01.jpg" />15                         <dd>李同學</dd>16                         <p>2014年CPA周末旗艦班學員；1年通過4門課程</p>17                         <a href=""></a>18                     </li>19                     <li>20                         <img src="images/senke_xy02.jpg" />21                         <dd>丁同學</dd>22                         <p>現就職某會計師師事務所<br/>2012年CPA學員，3年通過6門課程</p>23                         <a href=""></a>24                     </li>25                     <li>26                         <img src="images/senke_xy03.jpg" />27                         <dd>宋同學</dd>28                         <p>2013年會計證、CPA長線周末班學員，2014年通過4門課程；</p>29                         <a href=""></a>30                     </li>31                     <li>32                         <img src="images/senke_xy04.jpg" />33                         <dd>戰同學</dd>34                         <p>2012年北京會計初級金榜，2014年會計中級高分一次通過</p>35                         <a href=""></a>36                     </li>37                     <li>38                         <img src="images/senke_xy05.jpg" />39                         <dd>於同學</dd>40                         <p>2014年會計中級學員，1次性通過中級全科</p>41                         <a href=""></a>42                     </li>43  44                 </ul>45             </div>46             <div class="but_left"><img src="images/qianxleft.png" /></div>47             <div class="but_right"><img src="images/qianxr.png" /></div>48           </div>49            50     </div>51 </div>

　　js代碼：

 1 //學員 2 var _index5=0; 3 $("#four_flash .but_right img").click(function(){ 4     _index5++; 5     var len=$(".flashBg ul.mobile li").length; 6     if(_index5+5>len){ 7         $("#four_flash .flashBg ul.mobile").stop().append($("ul.mobile").html()); 8     } 9     $("#four_flash .flashBg ul.mobile").stop().animate({left:-_index5*326},1000);10     });11  12      13 $("#four_flash .but_left img").click(function(){14     if(_index5==0){15         $("ul.mobile").prepend($("ul.mobile").html());16         $("ul.mobile").css("left","-1380px");17         _index5=618     }19     _index5--;20     $("#four_flash .flashBg ul.mobile").stop().animate({left:-_index5*326},1000);21     });

　　

 

基於jQuery左右滑動切換特效 附源碼