分享焦点图制作的一些经验及如何基于myFocus库制作焦点图
来源：互联网 发布：淘宝售后制度 编辑：程序博客网 时间：2024/06/05 18:06
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><base href="http://www.cosmissy.com/myfocus/" /><style>*{margin:0;padding:0;list-style:none;border:0;}body{padding:20px;background:#fff;font:12px/20px Verdana, Geneva, sans-serif;}#myFocus{width:450px;height:296px;position:relative;border:1px solid #666;}#myFocus .pic li{position:absolute;top:0;left:0;}</style></head><body><div id="myFocus"><!--焦点图盒子--> <ul class="pic"><!--内容列表--> <li><a href="#"><img src="img/1.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="img/2.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="img/3.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="img/4.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="img/5.jpg" thumb="" alt="" text="" /></a></li> </ul></div><script>var box=document.getElementById('myFocus'),//焦点图盒子pics=box.getElementsByTagName('ul')[0],//图片的盒子pic=pics.getElementsByTagName('li'),//图片列表index=0;//从0(即第一帧)开始显示function show(){//播放函数for(var i=0,len=pic.length;i<len;i++) pic[i].style.display='none';//先隐藏所有图片列表pic[index].style.display='';//只显示指定的index序号图片index=index==len-1?0:index+1;//焦点图的循环判断：如果播放到了最后一帧(index=len-1)，那么让它的序号index回复为0，否则接着播放下一帧}show();//调用播放第一帧var auto=setInterval(show,2000);//接着让播放函数以2秒一次的不停播放，完成循环。</script></body></html>
大多数人都知道JS焦点图之所以可以动起来，主要是因为它有setTimeout()和setInterval()的方法，所以如果你想制作焦点图轮换，那么必须要熟悉这两个方法或其中之一，这是基础。事实上如果你掌握了上面两个方法或其中一个，那么你就可以制作出一款很简单的焦点图轮换了，如下例：
首先来个简单的--让它暂停。我们知道setTimeout()/setInterval()都有一个相对应的clearTimeout()/clearInterval()，它们都是清除计时器的作用，这时我们就可以派它上用场了。假如我们把鼠标悬停到图片上焦点图就暂停切换，那代码应该是这样子的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><base href="http://www.cosmissy.com/myfocus/" /><style>*{margin:0;padding:0;list-style:none;border:0;}body{padding:20px;background:#fff;font:12px/20px Verdana, Geneva, sans-serif;}#myFocus{width:450px;height:296px;position:relative;border:1px solid #666;}#myFocus .pic li{position:absolute;top:0;left:0;}</style></head><body><div id="myFocus"><!--焦点图盒子--> <ul class="pic"><!--内容列表--> <li><a href="#"><img src="img/1.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="img/2.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="img/3.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="img/4.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="img/5.jpg" thumb="" alt="" text="" /></a></li> </ul></div><script>var box=document.getElementById('myFocus'),//焦点图盒子pics=box.getElementsByTagName('ul')[0],//图片的盒子pic=pics.getElementsByTagName('li'),//图片列表index=0;//从0(即第一帧)开始显示function show(){//播放函数for(var i=0,len=pic.length;i<len;i++) pic[i].style.display='none';//先隐藏所有图片列表pic[index].style.display='';//只显示指定的index序号图片index=index==len-1?0:index+1;//焦点图的循环判断：如果播放到了最后一帧(index=len-1)，那么让它的序号index回复为0，否则接着播放下一帧}show();//调用播放第一帧var auto=setInterval(show,2000);//接着让播放函数以2秒一次的不停播放，完成循环。box.onmouseover=function(){clearInterval(auto)};//鼠标悬停暂停播放box.onmouseout=function(){auto=setInterval(show,2000)};//鼠标离开后恢复播放</script></body></html>onclick触发哪个函数呢？我们可以再写一个handle函数处理点击，例如让所有图片隐藏，再让点击序号的那个图片显示，但为了最大的代码复用率，我们应该进一步改进利用原来的show函数，因为它也一样可以为我们实现相同的效果，最终的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><base href="http://www.cosmissy.com/myfocus/" /><style>*{margin:0;padding:0;list-style:none;border:0;}body{padding:20px;background:#fff;font:12px/20px Verdana, Geneva, sans-serif;}#myFocus{width:450px;height:296px;position:relative;border:1px solid #666;}#myFocus .pic li{position:absolute;top:0;left:0;}#myFocus .num{position:absolute;bottom:6px;right:6px;z-index:2;}#myFocus .num li{width:20px;height:20px;line-height:20px;border:1px solid #333;background:#ccc;float:left;margin-right:2px;text-align:center;cursor:pointer;}#myFocus .num li.current{background:#fff;}</style></head><body><div id="myFocus"> <!--焦点图盒子--> <ul class="pic"> <!--内容列表--> <li><a href="#"><img src="img/1.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="img/2.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="img/3.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="img/4.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="img/5.jpg" thumb="" alt="" text="" /></a></li> </ul> <ul class="num"> <!--焦点图按钮--> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul></div><script>var box=document.getElementById('myFocus'),//焦点图盒子pics=box.getElementsByTagName('ul')[0],//图片的盒子pic=pics.getElementsByTagName('li'),//图片列表nums=box.getElementsByTagName('ul')[1],//按钮的盒子num=nums.getElementsByTagName('li');//按钮列表index=0;//从0(即第一帧)开始显示function show(n){//增加一个可传递按钮点击的参数nfor(var i=0,len=pic.length;i<len;i++) pic[i].style.display='none',num[i].className='';//先隐藏所有图片列表,并且按钮class复原为空if(n==undefined) var next=index==len-1?0:index+1;//当无参数传递时焦点图的循环判断：如果播放到了最后一帧(index=len-1)，那么让它的序号index回复为0，否则接着播放下一帧else var next=n;//当有参数传递时，播放传递的参数npic[next].style.display='';//只显示指定的next序号图片num[next].className='current';//为当前的按钮增加一个classindex=next;//记录当前播放的index}show(index);//调用播放第一帧var auto=setInterval(show,2000);//接着让播放函数以2秒一次的不停播放，完成循环。//暂停绑定事件box.onmouseover=function(){clearInterval(auto)};//鼠标悬停暂停播放box.onmouseout=function(){auto=setInterval(show,2000)};//鼠标离开后恢复播放//按钮绑定事件for(var i=0,len=num.length;i<len;i++){num[i].n=i;//记录当前按钮序号num[i].onclick=function(){show(this.n);}//播放点击的按钮序号}</script></body></html>=========下面是关于myFocus焦点图的原理及其制作==========
myFocus焦点图基本也是按照上面的原理制作的，只不过封装了很多常用的方法，例如生成数字按钮、绑定按钮事件、循环切换的判断等等，当然它也集成了一个运动库的函数，让它可以轻松的实现各种各样的滑动/渐隐效果。有了这些，使得myFocus库制作焦点图变得异常的简单。
上面的例子如果是基于myFocus库制作，那应该是怎么样的呢？代码说话：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><base href="http://www.cosmissy.com/myfocus/" /><title>myFocus v1.0</title><script type="text/javascript" src="http://www.cosmissy.com/myfocus/js/myfocus-1.1.1.min.js"></script><!--引入myFocus库--><style type="text/css">* { margin:0; padding:0; border:0; list-style:none; }body { background:#fff; padding:20px;}/*=========mF_demo========*/#myFocus{width:450px;height:296px;position:relative;border:1px solid #666;}#myFocus .pic li{position:absolute;top:0;left:0;display:none;}#myFocus .num{position:absolute;bottom:6px;right:6px;z-index:2;}#myFocus .num li{width:20px;height:20px;line-height:20px;border:1px solid #333;background:#ccc;float:left;margin-right:2px;text-align:center;cursor:pointer;}#myFocus .num li.current{background:#fff;}</style><script type="text/javascript">myFocus.extend({mF_demo:function(par,F){var box=F.$(par.id);//焦点图盒子F.addList(box,['num']);//添加数字按钮列表var pic=F.$li('pic',box),num=F.$li('num',box),n=pic.length;//找到图片列表、数字按钮列表和总数目eval(F.switchMF(function(){pic[index].style.display='none';//前一个图片的变化num[index].className='';//前一个按钮的变化},function(){pic[next].style.display='block';//后一个图片的变化num[next].className='current';//后一个按钮的变化}))eval(F.bind('num','par.trigger',par.delay));//为按钮绑定与焦点图的交互事件}})myFocus.set({id:'myFocus',pattern:'mF_demo',time:3});</script></head><body><h2>论坛demo需刷新多一次才看到效果</h2><div id="myFocus"><!--焦点图盒子--> <ul class="pic"><!--内容列表--> <li><a href="#"><img src="img/1.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="img/2.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="img/3.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="img/4.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="img/5.jpg" thumb="" alt="" text="" /></a></li> </ul></div></body></html>当然这个简单示例还不能完全展现出myFocus库的优势，只是稍显一点眉目。不过在这里你应该可以清晰的看到，myFocus是基于前一帧(index)和后一帧(next)的概念来制作焦点图的，这才是myFocus的核心原理。
下面以两个常见的焦点图制作为例子，希望能让大家对这些概念及如何基于myFocus库制作有更深一步的了解。
（下面的例子会用到myFocus库的一些方法，如果你想详细的了解这些方法请查看myFocus的开发文档API：http://www.cosmissy.com/myfocus/api.html）
1、滑动焦点图
在制作之前，我们先要为它起一个名字，就叫mF_slider吧，同时把它注册到myFocus库的pattern子类里面：
代码:
myFocus.extend( myFocus.pattern,{
mF_slider:function(par,F){}
})代码:
myFocus.extend({
mF_slider:function(par,F){}
})par是传递用户设置的参数集(对象)，例如par.id是获得用户设置的id值；F则是代表myFocus（对象），那么F.$()即是它的一个方法。它们都可以随意命名，例如可以把F改成mf，随便你吧，你觉得方便就行。
在javascript的世界里，似乎一切的操作都是以获得DOM节点为开始的，例如jQuery中的$()方法一定令大家印象深刻吧，那么myFocus焦点图制作的第一步也是：获得所有与焦点图有关的dom元素(包括创建dom元素)：
代码:
myFocus.extend({
mF_slider:function(par,F){
var box=F.$(par.id);//焦点图盒子
F.addList(box,['num']);//添加数字按钮列表
var pics=F.$c('pic',box),pic=F.$li('pic',box),num=F.$li('num',box),n=pic.length;//找到图片盒子、图片列表、数字按钮列表和总数目
}
})代码:
myFocus.extend({
mF_slider:function(par,F){
var box=F.$(par.id);//焦点图盒子
F.addList(box,['num']);//添加数字按钮列表
var pics=F.$c('pic',box),pic=F.$li('pic',box),num=F.$li('num',box),n=pic.length;//找到图片盒子、图片列表、数字按钮列表和总数目
//CSS
pics.style.height=par.height*n+'px';//设置图片盒子ul的总高度，为了让它可以有足够的高度可以滑动
for(var i=0;i<n;i++) pic[i].style.height=par.height+'px';//固定图片li的高度，为了让它们之间不出现空隙
}
})复制内容到剪贴板
最后再上一些按钮的交互事件，到此，一个完整的、可无限扩展性的焦点图就此诞生了！^_^代码:
myFocus.extend({
mF_slider:function(par,F){
var box=F.$(par.id);//焦点图盒子
F.addList(box,['num']);//添加数字按钮列表
var pics=F.$c('pic',box),pic=F.$li('pic',box),num=F.$li('num',box),n=pic.length;//找到图片盒子、图片列表、数字按钮列表和总数目
//CSS
pics.style.height=par.height*n+'px';//设置图片盒子ul的总高度，为了让它可以有足够的高度可以滑动
for(var i=0;i<n;i++) pic[i].style.height=par.height+'px';//固定图片li的高度，为了让它们之间不出现空隙
//PLAY
eval(F.switchMF(function(){
num[index].className='';//前一个按钮的变化
},function(){
F.slide(pics,{top:-par.height*next});//图片盒子ul的滑动(改变它的top值)
num[next].className='current';//后一个按钮的变化
}))
}
})<script type="text/javascript" src="http://www.cosmissy.com/myfocus/js/myfocus-1.1.1.min.js"></script><!--引入myFocus库--><style type="text/css">* { margin:0; padding:0; border:0; list-style:none; }body { background:#fff; padding:20px;}/*=========mF_demo========*/#myFocus{position:relative;border:1px solid #666;}#myFocus .pic{position:absolute;}#myFocus .pic li{float:left;overflow:hidden;}#myFocus .num{position:absolute;bottom:6px;right:6px;z-index:2;}#myFocus .num li{width:20px;height:20px;line-height:20px;border:1px solid #333;background:#ccc;float:left;margin-right:2px;text-align:center;cursor:pointer;}#myFocus .num li.current{background:#fff;}</style><script type="text/javascript">myFocus.extend({mF_slider:function(par,F){var box=F.$(par.id);//焦点图盒子F.addList(box,['num']);//添加数字按钮列表var pics=F.$c('pic',box),pic=F.$li('pic',box),num=F.$li('num',box),n=pic.length;//找到图片盒子、图片列表、数字按钮列表和总数目//CSSpics.style.height=par.height*n+'px';//设置图片盒子ul的总高度，为了让它可以有足够的高度可以滑动for(var i=0;i<n;i++) pic[i].style.height=par.height+'px';//固定图片li的高度，为了让它们之间不出现空隙//PLAYeval(F.switchMF(function(){num[index].className='';//前一个按钮的变化},function(){F.slide(pics,{top:-par.height*next});//图片盒子ul的滑动(改变它的top值,每次改变一个高度的大小)num[next].className='current';//后一个按钮的变化}))eval(F.bind('num','par.trigger',par.delay));//为按钮绑定与焦点图的交互事件}})myFocus.set({id:'myFocus',pattern:'mF_slider',time:3,width:450,height:296});</script><h2>论坛demo需刷新多一次才看到效果</h2><div id="myFocus"><!--焦点图盒子--> <ul class="pic"><!--内容列表--> <li><a href="#"><img src="http://www.cosmissy.com/myfocus/img/1.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="http://www.cosmissy.com/myfocus/img/2.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="http://www.cosmissy.com/myfocus/img/3.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="http://www.cosmissy.com/myfocus/img/4.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="http://www.cosmissy.com/myfocus/img/5.jpg" thumb="" alt="" text="" /></a></li> </ul></div>由于发帖字数有限制，这里就不再详细介绍了，不过步骤和前面那个是一样的，代码里面也有详细的注释，大家应该可以看的明白：）：
<script type="text/javascript" src="http://www.cosmissy.com/myfocus/js/myfocus-1.1.1.min.js"></script><!--引入myFocus库--><style type="text/css">* { margin:0; padding:0; border:0; list-style:none; }body { background:#fff; padding:20px;}/*=========mF_demo========*/#myFocus{position:relative;border:1px solid #666;}#myFocus .pic li{position:absolute;top:0;left:0;display:none;}#myFocus .num{position:absolute;bottom:6px;right:6px;z-index:2;}#myFocus .num li{width:20px;height:20px;line-height:20px;border:1px solid #333;background:#ccc;float:left;margin-right:2px;text-align:center;cursor:pointer;}#myFocus .num li.current{background:#fff;}</style><script type="text/javascript">myFocus.extend({mF_fader:function(par,F){var box=F.$(par.id);//焦点图盒子F.addList(box,['num']);//添加数字按钮列表var pic=F.$li('pic',box),num=F.$li('num',box),n=pic.length;//找到图片列表、数字按钮列表和总数目//CSS//这个风格不需要动态生成CSS//PLAYeval(F.switchMF(function(){F.fadeOut(pic[index]);//前一幅图片的淡入num[index].className='';//前一个按钮的变化},function(){F.fadeIn(pic[next]);//后一幅图片的淡出num[next].className='current';//后一个按钮的变化}))eval(F.bind('num','par.trigger',par.delay));//为按钮绑定与焦点图的交互事件}})myFocus.set({id:'myFocus',pattern:'mF_fader',time:3,width:450,height:296});</script><h2>论坛demo需刷新多一次才看到效果</h2><div id="myFocus"><!--焦点图盒子--> <ul class="pic"><!--内容列表--> <li><a href="#"><img src="http://www.cosmissy.com/myfocus/img/1.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="http://www.cosmissy.com/myfocus/img/2.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="http://www.cosmissy.com/myfocus/img/3.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="http://www.cosmissy.com/myfocus/img/4.jpg" thumb="" alt="" text="" /></a></li> <li><a href="#"><img src="http://www.cosmissy.com/myfocus/img/5.jpg" thumb="" alt="" text="" /></a></li> </ul></div>另外建议那些想开发myFocus焦点图的同学 把myFocus demo中的风格js文件都看一遍，你会发现制作焦点图真的是一件非常非常简单的事情！
- 分享焦点图制作的一些经验及如何基于myFocus库制作焦点图
- myFocus实现焦点图制作
- myfocus - 网站焦点图制作
- myFocus是一个专注于焦点图/轮换图制作的JS库
- myFocus制作网页焦点图 实现图片轮播效果
- 轻量级焦点图库制作-myfocus
- myFocus插件制作焦点轮播图
- 焦点图插件myFocus的使用
- myFocus.js——焦点图
- 焦点图插件myFocus使用心得
- 焦点轮播图的制作
- js简单制作图片焦点图
- jquery 制作无缝轮播的焦点图
- [Web]如何制作网站首页 变换的 焦点 新闻 广告
- JS焦点 myFocus
- JS焦点图库 myFocus
- 【myfocus】一款好用的焦点图轮播插件
- 学myFocus焦点图JS插件，一篇文章就够了
- WireShark 过滤语法
- 网络抓包工具Wireshark Capture Filter 技巧
- unix下的多路复用（select）
- 学汇编语言入门体会
- linux select函数用法
- 分享焦点图制作的一些经验及如何基于myFocus库制作焦点图
- [RedHat学习笔记]总结现学的所有命令（RH033）,以及相关概念。
- Garbled character in Vim
- 好兄弟
- sgu 345-Revolution
- 13. Actions speak loader than words. 事实胜于雄辩
- Android开发之短信发送
- ASP.NET Ajax用户名注册验证
- 1400 遍历
