jQuery Devrama Slider 幻燈片( 輪播式廣告 )

woff

Devrama Slider 是個圖像滑塊，帶有許多非常有趣的特性。

它不僅支持圖像還支持HTML 內容。響應式方便CSS3 轉換轉換效果進度條高級的預加載和延遲加載CSS 自定義用戶可以定義導航或者控制器

在線實例實例演示




如何使用

1. <div class="slide1" data-lazy-background="4247776023_81a3f048ca_b.png">
   
2. <h3 data-pos="['10%', '110%', '10%', '5%']" data-duration="700" data-effect="move">
   
3.   Responsive
   
4. </h3>
   
5. <div class="description" data-pos="['60%', '110%', '60%', '60%']" data-duration="300" data-effect="move">
   
6.   Automatically,
   
7. </div>
   
8. <div class="description" data-pos="['70%', '110%', '70%', '65%']" data-duration="300" data-effect="move">
   
9.   it resizes
   
10. </div>
    
11. <div class="description" data-pos="['80%', '110%', '80%', '70%']" data-duration="300" data-effect="move">
    
12.   with window size!!
    
13. </div>
    
14. </div>

複製代碼

1.   <script type="text/javascript">
   
2.     $(document).ready(function(){
   
3.       $('.front-demo').DrSlider({
   
4.         navigationType: 'circle',
   
5.         width: 1024, //圖片寬度
   
6.         height: 400, //圖片高度
   
7.         transition: 'slide-left', //方向
   
8.         duration: 5000 //輪播一張圖片時間
   
9.       });
   
10.     });
    
11.   </script>

複製代碼

範例圖片


來源：http://www.shouce.ren/api/view/a/11273