jQuery Devrama Slider 幻燈片( 輪播式廣告 )
Devrama Slider 是個圖像滑塊,帶有許多非常有趣的特性。它不僅支持圖像還支持HTML 內容。響應式方便CSS3 轉換轉換效果進度條高級的預加載和延遲加載CSS 自定義用戶可以定義導航或者控制器在線實例實例演示
如何使用<div class="slide1" data-lazy-background="4247776023_81a3f048ca_b.png">
<h3 data-pos="['10%', '110%', '10%', '5%']" data-duration="700" data-effect="move">
Responsive
</h3>
<div class="description" data-pos="['60%', '110%', '60%', '60%']" data-duration="300" data-effect="move">
Automatically,
</div>
<div class="description" data-pos="['70%', '110%', '70%', '65%']" data-duration="300" data-effect="move">
it resizes
</div>
<div class="description" data-pos="['80%', '110%', '80%', '70%']" data-duration="300" data-effect="move">
with window size!!
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.front-demo').DrSlider({
navigationType: 'circle',
width: 1024, //圖片寬度
height: 400, //圖片高度
transition: 'slide-left', //方向
duration: 5000 //輪播一張圖片時間
});
});
</script>
範例圖片
來源:http://www.shouce.ren/api/view/a/11273
頁:
[1]