多种flash效果（纯js写）封装包

简单介绍：

1.引入对应的js文件与css文件（在js文件---pattern文件下）

2.引入对应的flash包

 

如下：

    <script src="js/myfocus-1.1.0.min.js" type="text/javascript"></script><!--对应的flash包-->
    <link href="js/pattern/mF_expo2010.css" rel="stylesheet" type="text/css" /><!--引入对应风格css包-->
    <script src="js/pattern/mF_expo2010.js" type="text/javascript"></script><!--引入对应风格js包-->

 

3.写js

 

写在

<script type="text/javascript">
    myFocus.set({
        id: 'boxID', //焦点图盒子ID
        pattern: 'mF_expo2010', //风格应用的名称
        time: 3, //切换时间间隔(秒)
        trigger: 'click', //触发切换模式:'click'(点击)/'mouseover'(悬停)
        width: 450, //设置图片区域宽度(像素)
        height: 296, //设置图片区域高度(像素)
        txtHeight: 'default'//文字层高度设置(像素),'default'为默认高度，0为隐藏
    });
</script>

 

注意红色字体 上面引入的包是：mF_expo2010

所以pattern改为mF_expo2010

 

 

<div id="boxID"><!--焦点图盒子-->
  <div class="loading"><span>请稍候...</span></div><!--载入画面(可删除)-->
  <ul class="pic"><!--内容列表-->
        <li><a href="#"><img src="img/1.jpg" thumb="" alt="标题1" text="详细描述1" /></a></li>
        <li><a href="#"><img src="img/2.jpg" thumb="" alt="标题2" text="详细描述2" /></a></li>
        <li><a href="#"><img src="img/3.jpg" thumb="" alt="标题3" text="详细描述3" /></a></li>
        <li><a href="#"><img src="img/4.jpg" thumb="" alt="标题4" text="详细描述4" /></a></li>
        <li><a href="#"><img src="img/5.jpg" thumb="" alt="标题5" text="详细描述5" /></a></li>
  </ul>
</div>