jQuery Devrama Slider 幻灯片 博客分类: jQuery jQueryDevrama Slider幻灯片
程序员文章站
2024-03-25 23:29:40
...
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>
复制
上一篇: ResponsiveSlides.js 幻灯片实例演示 博客分类: jQuery ResponsiveSlides.js幻灯片实例演示
下一篇: CentOS7安装IBUS-Rime过程(未成功)仅作参考 博客分类: Linux centosrime中州韵
推荐阅读
-
ResponsiveSlides.js 幻灯片实例演示 博客分类: jQuery ResponsiveSlides.js幻灯片实例演示
-
jQuery Devrama Slider 幻灯片 博客分类: jQuery jQueryDevrama Slider幻灯片
-
jQuery siteslider 动画幻灯片 博客分类: jQuery jQuerysiteslider动画幻灯片
-
jQuery Flickerplate 幻灯片 博客分类: jQuery jQueryFlickerplate幻灯片
-
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)的介绍
-
jQuery Devrama Slider 幻灯片
-
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)的介绍