首页>>焦点图>>左右滑动的个人名片焦点图 鼠标经过高亮显示(2017-06-07)

左右滑动的个人名片焦点图 鼠标经过高亮显示

左右滑动的个人名片焦点图 鼠标经过高亮显示
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="four_flash">  
  2.             <div class="flashBg">  
  3.                 <ul class="mobile">  
  4.                     <li>  
  5.                         <img src="images/senke_xy00.jpg" />  
  6.                         <dd>高同学</dd>  
  7.                         <p>2013年CPA暑期班学员，一年通过5门课程</p>  
  8.                         <a href=""></a>  
  9.                     </li>  
  10.                     <li>  
  11.                         <img src="images/senke_xy01.jpg" />  
  12.                         <dd>李同学</dd>  
  13.                         <p>2014年CPA周末旗舰班学员；1年通过4门课程</p>  
  14.                         <a href=""></a>  
  15.                     </li>  
  16.                     <li>  
  17.                         <img src="images/senke_xy02.jpg" />  
  18.                         <dd>丁同学</dd>  
  19.                         <p>现就职某会计师师事务所<br/>2012年CPA学员，3年通过6门课程</p>  
  20.                         <a href=""></a>  
  21.                     </li>  
  22.                     <li>  
  23.                         <img src="images/senke_xy03.jpg" />  
  24.                         <dd>宋同学</dd>  
  25.                         <p>2013年会计证、CPA长线周末班学员，2014年通过4门课程；</p>  
  26.                         <a href=""></a>  
  27.                     </li>  
  28.                     <li>  
  29.                         <img src="images/senke_xy04.jpg" />  
  30.                         <dd>战同学</dd>  
  31.                         <p>2012年北京会计初级金榜，2014年会计中级高分一次通过</p>  
  32.                         <a href=""></a>  
  33.                     </li>  
  34.                     <li>  
  35.                         <img src="images/senke_xy05.jpg" />  
  36.                         <dd>于同学</dd>  
  37.                         <p>2014年会计中级学员，1次性通过中级全科</p>  
  38.                         <a href=""></a>  
  39.                     </li>  
  40.   
  41.                 </ul>  
  42.             </div>  
  43.             <div class="but_left"><img src="images/qianxleft.png" /></div>  
  44.             <div class="but_right"><img src="images/qianxr.png" /></div>  
  45.           </div>  

 

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

 


原文地址:http://www.freejs.net/article_jiaodiantu_609.html