比jQuery更简单的方式开发焦点图

myFocus从v2.0版本开始，它的API就变成了类似jQuery的模式，即以DOM类为对象，进行链式操作。同时，它也集成了很多方便开发焦点图的方法，让你开发一款焦点图变成一件很简单很惬意的事情。

开发之前，建议你先熟悉一下myFocus的开发者API，当然不熟悉也没关系，如果你有一定的jquery/JS基础，你一样可以看的很轻松。

一个简单的例子

下面以“mF_pconline”这个简单实用的风格作为讲解。

建议在开发一款焦点图的时候，先定义好它的html结构和css。由于“mF_pconline”是属于“标准风格”，所以它的html结构已经定义好了：

<div id="boxID"><!--焦点图盒子-->
  <div class="loading"><img src="img/loading.gif" alt="请稍候..." /></div><!--载入画面-->
  <div class="pic"><!--图片-->
  	<ul>
        <li><a href="#"><img src="img/1.jpg" alt="标题1" /></a></li>
  	</ul>
  </div>
</div>

发现它只有图片“.pic”列表，并没有文字/按钮等html元素？Take it easy，myFocus会很方便的生成这些元素，不过为了配合css呈现最终的效果，我们可以先手工加上这些元素，删除loading层并在焦点图div加上对应的class（mF_pconline）：

<div id="boxID" class="mF_pconline"><!--焦点图盒子-->
  <div class="pic"><!--图片-->
  	<ul>
        <li><a href="#"><img src="img/1.jpg" alt="标题1" /></a></li>
  	</ul>
  </div>
  <div class="txt"><!--文字-->
  	<ul>
        <li><a href="#">标题1</a></li>
  	</ul>
  </div>
  <div class="num"><!--按钮-->
  	<ul>
        <li><a href="#">1</a></li>
  	</ul>
  </div>
</div>

接着定义好它的css：

/*=========mF_pconline========*/
.mF_pconline .pic li{width:100%;height:100%;overflow:hidden;position:absolute;top:0;left:0;}
.mF_pconline .txt li{position:absolute;z-index:2;bottom:0;height:28px;line-height:28px;background:#DBDBDB;display:none;}
.mF_pconline .txt li a{display:block;position:relative;z-index:1;color:#333;padding-left:10px;font-size:12px;font-weight:bold;text-decoration:none;}/*标题样式*/
.mF_pconline .num{position:absolute;z-index:3;bottom:5px;right:5px;}/*按钮样式*/
.mF_pconline .num li{float:left;}
.mF_pconline .num li a{color:#333;float:left;margin-left:3px;width:15px;height:15px;line-height:15px;*line-height:14px;overflow:hidden;border:1px solid #AEC1CC;text-align:center;cursor:pointer;background:#fff;text-decoration:none;}

通过这步，我们大概可以在浏览器中看到它最终的静态效果了。到这里我们可以删除那些我们手工添加的html代码（即还原到上面第一个html结构），因为我们可以方便的用js生成。这里，才是真正coding的开始。

------------------------------------------JS Coding华丽分割线--------------------------------------------------

先为myFocus的pattern类扩展一个名叫“mF_pconline”的风格：

myFocus.pattern.extend({//扩展pattern类
	'mF_pconline':function(settings,$){//函数带了2个参数“settings”和“$”
		//your code here...
	}
});

默认的pattern扩展函数带了2个参数，一个是调用时的参数集(settings),另一个是全局变量myFocus($)，当然你可以为它们取自己喜欢的名称，这看个人喜好了。

接下来，添加我们需要的html结构：

		var $focus=$(settings);//获得焦点图盒子及它的参数，为什么变量带$前缀？因为它不是一般对象而是myFocus对象，可以用它很多自己的方法和属性（类似jQuery对象）
		var $picList=$focus.find('.pic li');//找到图片列表（为下一步图片渐变做准备）
		var $txtList=$focus.addListTxt().find('li');//添加文字列表并用$txtList变量存起来
		var $numList=$focus.addListNum().find('li');//同上，添加按钮列表并存起来

在一些焦点图中，因为它的高和宽是可变的，所以相对应的css也是动态的，本例也有一个动态的css属性：焦点图的总高度，它等于设置的高度加上标题的高度。

//CSS
		var txtH=settings.txtHeight;
		$focus[0].style.height=settings.height+txtH+'px';//同jQuery对象类似，myFocus对象也是一个数组，直接索引（[0]）可以得到对应的DOM对象

当html和css一切就绪后，我们便可以轮播了，它的方法是play：

//PLAY
		$focus.play(function(i){//上一帧，参数i为它的索引值
			$picList[i].style.display='none';//对应图片消失
			$txtList[i].style.display='none';//对应文字消失
			$numList[i].className='';//对应按钮去掉class
		},function(i){//下一帧(当前帧)，参数i为它的索引值
			$picList.eq(i).fadeIn();//对应图片淡入
			$txtList[i].style.display='block';//对应文字显示
			$numList[i].className='current';//对应按钮加class
		});

最后一步，加上按钮控制：

//Control
		$focus.bindControl($numList);//为按钮列($numList)加上控制事件

最终的代码：

myFocus.pattern.extend({
	'mF_pconline':function(settings,$){
		var $focus=$(settings);
		var $picList=$focus.find('.pic li');
		var $txtList=$focus.addListTxt().find('li');
		var $numList=$focus.addListNum().find('li');
		//CSS
		var txtH=settings.txtHeight;
		$focus[0].style.height=settings.height+txtH+'px';
		//PLAY
		$focus.play(function(i){
			$picList[i].style.display='none';
			$txtList[i].style.display='none';
			$numList[i].className='';
		},function(i){
			$picList.eq(i).fadeIn();
			$txtList[i].style.display='block';
			$numList[i].className='current';
		});
		//Control
		$focus.bindControl($numList);
	}
});

猛击这里查看效果

最后说下，其实demo中每款风格都是一个很好的实例，值得开发者学习借鉴。如果你在开发焦点图过程中遇到问题困惑，欢迎给我来信讨论。