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>
  • 相关阅读:
    程序员应该看的书
    linux下grep命令详解
    apache基本配置
    shell脚本从windows下发送到linux下运行失败的问题
    nginx服务器的安装和配置基础
    linux下ps命令用法
    apache的python部署
    《我刀刻我心——关羽往事》新书发布会在京举行
    C++图书中的王者
    C++应用程序性能优化
  • 原文地址:https://www.cnblogs.com/tuifeideyouran/p/5427007.html
Copyright © 2011-2022 走看看