WEB前端开发人员交流社区

搜索
查看: 986|回复: 0

[jQuery] 适合移动触摸设备的全屏jquery图片轮播插件-jQuery插件分享

[复制链接]

94

主题

150

帖子

148

积分

管理员

会在前端的道路上一直走下去!

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

积分
148

社区QQ达人

发表于 2016-3-19 00:26:40 | 显示全部楼层 |阅读模式
Flickerplate是一个jquery图片轮播插件。使用时需要使用Modernizr来做触摸检测,所以必须引入jQuery和Modernizr。

引入必要的js文件和css文件

1、引入文件


[HTML] 纯文本查看 复制代码
<head>
    // Required javascript
    <script src="js/min/jquery-v1.10.2.min.js"></script>
    <script src="js/min/modernizr-custom-v2.7.1.min.js"></script>
    <script src="js/min/jquery-finger-v0.1.0.min.js"></script>
     
    // Flickerplate
    <script src="js/min/flickerplate.min.js"></script>
    <link href="css/flickerplate.css" rel="stylesheet" type="text/css">
</head>

2、HTML3、JavaScript
[HTML] 纯文本查看 复制代码
<div class="flicker-example">
    <ul>
        <li data-background="img/flicker-1.jpg">
            <div class="flick-title">
                Flickerplate Is Working
            </div>
            <div class="flick-sub-text">
                Heaven forbid this package you downloaded is broken. That wouldn't be
                embarrassing at all.
            </div>
        </li>
        <li data-background="img/flicker-2.jpg">
            <div class="flick-title">
                Editable via Javascript or CSS
            </div>
            <div class="flick-sub-text">
                Take a look at the extensive documentation to see how you can change the
                settings in multiple ways.
            </div>

3、JavaScript
[JavaScript] 纯文本查看 复制代码
<script>
        $(function(){
                $('.flicker-example').flickerplate(
                {
            auto_flick: true
            auto_flick_delay : 8
            flick_animation : 'transform-slide'
        });
        });
        </script>






相关帖子

WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



Archiver|手机版|小黑屋|前端开发技术交流

Copyright © 2009-2015 前端开发技术交流 http://www.fedte.cn 版权所有 All Rights Reserved.

免责声明: 本社区不承担任何由社区会员所提供的信息和工具所引起的争议和法律责任。

GMT+8, 2021-1-20 06:18

快速回复 返回顶部 返回列表