zoukankan      html  css  js  c++  java
  • 轮播图插件myFocus使用

    myFocus官网下载源码,本文是v2.0.1版,解压后如下

    将js包内文件拷入工程

    在工程内引入

    <script src="js/myfocus-2.0.1.min.js" type="text/javascript"></script>
        <script src="js/mf-pattern/mF_taobao2010.js" type="text/javascript"></script>
        <link rel="stylesheet" href="js/mf-pattern/mF_taobao2010.css" type="text/css">

    后两者可以自行挑选样式,是配对的即可。

    <div class="ad" id="picBox">
                <dic class="pic">
                    <ul>
                        <li><img src="images/ad2.jpg" alt=""></li>
                        <li><img src="images/ad3.jpg" alt=""></li>
                        <li><img src="images/ad4.jpg" alt=""></li>
                    </ul>
                </dic>
            </div>

    其中ul必须通过一个div class="pic"包裹

    然后js初始化

    <script>
            myFocus.set({
                id:'picBox'
            })
        </script>
    //你可以简单的调用---只设置它的盒子id,其它参数全部默认设置:
    <script type="text/javascript">
    myFocus.set({id:'boxID'});
    </script>
    
    //或详细一点的参数调用:
    <script type="text/javascript">
    myFocus.set({
        id:'boxID',//焦点图盒子ID
        pattern:'mF_fancy',//风格应用的名称
        time:3,//切换时间间隔(秒)
        trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)
        450,//设置图片区域宽度(像素)
        height:296,//设置图片区域高度(像素)
        txtHeight:'default'//文字层高度设置(像素),'default'为默认高度,0为隐藏
    });
    </script>
    为防止加载过久可以加入loading图
    <div class="ad" id="picBox">
                <div class="loading">
                    <img src="images/loading.gif" alt="图片加载中"/>
                </div>
                <dic class="pic">
                    <ul>
                        <li><img src="images/ad2.jpg" alt=""></li>
                        <li><img src="images/ad3.jpg" alt=""></li>
                        <li><img src="images/ad4.jpg" alt=""></li>
                    </ul>
                </dic>
            </div>
  • 相关阅读:
    JAVA多线程实现和应用总结
    大话程序猿眼里的高并发
    重写Dijkstra
    再做一遍floyed
    优美的二分模型
    ACwing : 798. 差分矩阵
    ACwing_789. 数的范围
    快速排序超级强的模板
    1829:【02NOIP提高组】自由落体
    【02NOIP提高组】均分纸牌
  • 原文地址:https://www.cnblogs.com/tuifeideyouran/p/5427007.html
Copyright © 2011-2022 走看看