极简的焦点图

所属分类:-

 27832  308  查看评论 (14)
分享到微信朋友圈
X
极简的焦点图 ie兼容8

====以下内容由 青青子矜/ty 提供===========

1、引入文件

<link href="css/flickerplate.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/modernizr-custom-v2.7.1.min.js"></script>
<script src="js/jquery-finger-v0.1.0.min.js"></script>
<script src="js/flickerplate.min.js"></script>

2、HTML

<div class="flicker-example">
    <ul>
        <li data-background="img/field.jpg">
            <div class="flick-title">Flickerplate</div>
            <div class="flick-sub-text">——小巧的jQuery幻灯片插件</div>
        </li>
        <li data-background="img/forest.jpg">
            <div class="flick-title">可修改 Javascript 或 CSS</div>
            <div class="flick-sub-text">查看参数,看看如何修改成你需要的效果</div>
        </li>
        <li data-background="img/frozen-water.jpg">
            <div class="flick-title">触摸事件</div>
            <div class="flick-sub-text">引入 jQuery Finger 插件可支持移动设备触摸事件</div>
        </li>
    </ul>
</div>

除了 jQuery 必引用外,Modernizr(modernizr-custom-v2.7.1.min.js)也是必须的,Modernizr 是一个 HTML5/CSS3 功能检测库。jQuery.Finger(jquery-finger-v0.1.0.min.js)是一个触摸事件插件,如果不需要支持移动设备,可去掉。

3、JavaScript

$(function(){
    $('.flicker-example').flicker({
        arrows: true,
        arrows_constraint: false,
        auto_flick: true,
        auto_flick_delay: 10,
        block_text: true,
        dot_navigation: true,
        dot_alignment: 'center',
        flick_animation: 'transition-slide',
        flick_position: 1,
        inner_width: false,
        theme: 'light'
    });
});

3、配置

arrows布尔值true显示左右箭头控制
arrows_constraint布尔值false左右到头了禁止点击
auto_flick布尔值true自动播放
auto_flick_delay整数10自动播放间隔,以秒为单位
block_text布尔值true文字显示背景阴影
dot_navigation布尔值true显示圆点导航
dot_alignment字符串center圆点导航位置
flick_animation字符串transition-slide动画切换方式,可选 transition-slide、transform-slide、jquery-slide、scroller-slide 4种
flick_position整数1
inner_width布尔值false
theme字符串light设置主题,可选 light、dark 2种
相关插件-

超棒的jQuery旋钮插件

漂亮旋钮(knob)的jQuery插件
 
 22526  269

渐变动态动画

渐变地形动画,使用anime.js来制作动画
 
 19196  323

最好用的拼音查询,全拼,简拼,汉字查询

支持全拼,简拼,汉字查询。
 
 39762  308

ichartjs-基于html5的图表组件

ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。是WEB/APP图表展示方面的解决方案 。如果你正在开发HTML5的应用,ichartjs正好适合您。 ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。
 
 51379  359

讨论这个项目(14)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    zhao33699 0
    2017/9/6 17:38:54

    为什么下载不让下  说jq 币不够

    回复
    ?傀儡娃娃┵千 0
    2017/4/1 13:01:01

    特别好用

        Acey??0
        2017/5/8 17:19:22

        特别好用

    回复
    llllllllllllllllllllllll 0
    2016/6/30 17:06:22
     谢谢分享, 我收下了。 回复
    呃、似水流年 0
    2016/4/28 17:04:03
    有BUG !!!  鼠标只有放在图片最边上才出来左右两个导航按钮............................................................
        落雪飞花0
        2016/5/9 20:05:04
        应该是故意这么设置的~~
        青漪??舞梦0
        2017/9/8 10:07:44

        这个是为了界面美观专门设置的效果

    回复
    ⊙?⊙ 0
    2015/12/6 15:12:42

    哇~好棒的效果啊!

        ?傀儡娃娃┵千0
        2017/2/21 14:29:53
        特别棒的效果
        Alisa show0
        2017/4/20 13:26:17

        分享下呗

    回复
    Smilér 0
    2015/9/15 16:09:28

    很好,想要拿下来

    回复
    战天使·逆弓 0
    2015/8/15 17:08:09

    下来看看正在找合适的

    回复
    爱情公寓4第四季 0
    2015/3/27 16:18:35
    Jevirs的QQ 0
    2015/1/21 13:34:26
    看了这么多,只有这个最方便二次开发啦 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复