首页>>焦点图>>支持键盘控制的左右切换立体式图片轮播效果(2014-08-05)

支持键盘控制的左右切换立体式图片轮播效果

支持键盘控制的左右切换立体式图片轮播效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="wrapper">  
  2.   <div id="slider-one">  
  3.     <div> <img src="images/img1.jpg" />  
  4.       <p> one hundred<br />  
  5.       </p>  
  6.     </div>  
  7.     <div> <img src="images/img2.jpg" />  
  8.       <p> math problem<br />  
  9.       </p>  
  10.     </div>  
  11.     <div> <img src="images/img3.jpg" />  
  12.       <p> better than i deserve<br />  
  13.      </p>  
  14.     </div>  
  15.     <div> <img src="images/img4.jpg" />  
  16.       <p> seven days a week<br />  
  17.         </p>  
  18.     </div>  
  19.     <div> <img src="images/img5.jpg" />  
  20.       <p> path to nowhere<br />  
  21.        </p>  
  22.     </div>  
  23.     <div> <img src="images/img6.jpg" />  
  24.       <p> and then i woke up<br />  
  25.        </p>  
  26.     </div>  
  27.     <div> <img src="images/img7.jpg" />  
  28.       <p> it's about time<br />  
  29.        </p>  
  30.     </div>  
  31.     <div> <img src="images/img8.jpg" />  
  32.       <p> two are better than one<br />  
  33.        </p>  
  34.     </div>  
  35.     <div> <img src="images/img9.jpg" />  
  36.       <p> lowercase<br />  
  37.       </p>  
  38.     </div>  
  39.   </div>  
  40. </div>  

 

JavaScript Code
  1. <script>  
  2.         $(document).ready(function () {  
  3.             $("a.pop1").fancybox();  
  4.   
  5.             $("a.pop2").fancybox({  
  6.                 'overlayShow': false,  
  7.                 'transitionIn': 'elastic',  
  8.                 'transitionOut': 'elastic'  
  9.             });  
  10.   
  11.             $("a.pop3").fancybox({  
  12.                 'transitionIn': 'none',  
  13.                 'transitionOut': 'none',  
  14.                 'overlayColor': '#000',  
  15.                 'overlayOpacity': 0.7  
  16.             });  
  17.   
  18.             $("a.pop4").fancybox({  
  19.                 'opacity': true,  
  20.                 'overlayShow': false,  
  21.                 'transitionIn': 'elastic',  
  22.                 'transitionOut': 'none'  
  23.             });  
  24.   
  25.             $("a.pop5").fancybox();  
  26.   
  27.             $("a#example6").fancybox({  
  28.                 'titlePosition': 'outside',  
  29.                 'overlayColor': '#000',  
  30.                 'overlayOpacity': 0.9  
  31.             });  
  32.   
  33.             $("a.pop6").fancybox({  
  34.                 'titlePosition': 'inside'  
  35.             });  
  36.   
  37.             $("a.pop7").fancybox({  
  38.                 'titlePosition': 'over'  
  39.             });  
  40.   
  41.         });  
  42.     </script>  

 


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