2015年12月10日 星期四

[jQuery Plugin] 背景幻燈片- VEGAS



最近因為需求需要找背景幻燈片,找到這個很功能完整而且很漂亮的 plugin,有需求的可以試試這個 Vegas Background SlideShow

簡單引入就可以使用了。

  1. <link rel="stylesheet" href="/js/vegas/vegas.min.css">  
  2. <script src="/js/vegas/vegas.min.js"></script>  


  1. $("#example").vegas({   
  2.     slides: [   
  3.         { src: "/img/slide1.jpg" },   
  4.         { src: "/img/slide2.jpg" },   
  5.         { src: "/img/slide3.jpg" },   
  6.         { src: "/img/slide4.jpg" }   
  7.     ]   
  8. });  

預設轉場是淡入淡出,要自訂轉場效果也可以參考文件選擇。

  1. $elmt.vegas({   
  2.     slides: [   
  3.         { src: '/img/slide1.jpg' },   
  4.         { src: '/img/slide2.jpg' },   
  5.         { src: '/img/slide3.jpg' }   
  6.     ],   
  7.     transition: 'fade'  
  8. });  

也可以個別設定。

  1. $elmt.vegas({   
  2.     slides: [   
  3.         { src: '/img/slide1.jpg' },   
  4.         { src: '/img/slide2.jpg' },   
  5.         { src: '/img/slide3.jpg' }   
  6.     ],   
  7.     transition: [ 'fade''zoomOut''swirlLeft' ]   
  8. });  


其他設定可以參考這邊的文件

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...