myFocus slide3D v1.1.0 简单用法

XHTML结构：

<div id="myFocus-wrap">
    <div id="myFocus">
        <!--焦点图盒子-->
        <div class="loading">
            <span>请稍候...</span></div>
        <!--载入画面-->
        <ul class="pic">
            <!--内容列表-->
            <li><a href="#">
                <img src="images/index/focus1.jpg" alt="图片1" /></a></li>
            <li><a href="#">
                <img src="images/index/focus2.jpg" alt="图片2" /></a></li>
            <li><a href="#">
                <img src="images/index/focus3.jpg" alt="图片3" /></a></li>
            <li><a href="#">
                <img src="images/index/focus4.jpg" alt="图片4" /></a></li>
        </ul>
    </div>
</div>

引入myFocus版本js，引入js的时候注意次序，因为这跟页面加载js的次序有关：

    <script src="js/flash/myfocus-1.0.4.full.js" type="text/javascript"></script>
    <script src="js/flash/mF_slide3D.js" type="text/javascript"></script>
    <link href="js/flash/mF_slide3D.css" rel="stylesheet" type="text/css" />

注：这里用到了slide3D效果 其他效果Demo可以查看官网：

http://www.cosmissy.com/myfocus/demo.html

Javascript：

    <script type="text/javascript">
        var mf = myFocus; //简称
        var param = {
            id: "myFocus",
            pattern: "mF_slide3D",

            time: 5,                   //切换时间间隔
            trigger: 'click',          //触发模式：click-点击 mouseover-悬停
            width: 960 / 1,         //区域宽度
            height: 465 / 1,        //区域高度
            txtHeight: 0 / 1,       //文字层高度(0为隐藏)
            //txtWidth: 62 / 1,     //为字段宽度(68-中等/82-较宽/32-较窄)
            auto: true,              //是否自动播放
            wrap: false,             //是否自带边框
            index: 0 / 1,            //开始显示的图片顺序(0表示第一张，不能大于总数)
            delay: 100 / 1,         //按钮悬停(mouseover)模式下的延迟时间，单位：毫秒（0-不延迟）

            //额外参数
            speed: 120,            //运动速度(数字越大，速度越慢)
            direction: 'left',       //运动方向：left top right bottom
            easing: 'easeInOut', //运动形式： easeOut-快出慢入  easeIn-慢出快入 easeInOut-慢出慢入 linear-匀速运动
            less: 1,                  //是否无缝  1-是 0-否
            //chip: 10,             //图切片数量（能被图高整除才有效）（8/10/16）
            type: 4,                //切片效果：1-甩头 2-甩尾 3-凝乱 4-随机效果
            gray: 0 / 1             //非当前图片是否变灰 1-是 0-否
        }
        myFocus.set(param, true);

        //屏蔽IE执行误差
        window.onerror = function () { return true };
    </script>

其他效果与文档可以查看官网博客：

http://www.cosmissy.com/myfocus/demo.html

最新版本 myFocus all v1.1.0(2010.12.15更新)