分享焦点图制作的一些经验及如何基于myFocus库制作焦点图

最新推荐文章于 2023-07-24 11:42:30 发布

xuxujian

最新推荐文章于 2023-07-24 11:42:30 发布

阅读量3.9k

点赞数

分类专栏： Javascript 文章标签： function xhtml class javascript border html

Javascript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用原生JavaScript实现一个简单的焦点图轮播效果，并进一步完善其功能，如添加暂停功能和导航按钮。此外，还介绍了如何利用myFocus库简化焦点图的开发过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>

在这里简单的分享一下，主要是基于常规的思路，即原生javascript的思路。

大多数人都知道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.οnmοuseοver=function(){clearInterval(auto)};//鼠标悬停暂停播放
box.οnmοuseοut=function(){auto=setInterval(show,2000)};//鼠标离开后恢复播放
</script>
</body>
</html>

接着是按钮，我们的目的是要点击哪个按钮就显示到那个图片，并且改变它的CSS样式以区分其他的按钮，这样按钮就需要增加一个onclick事件。

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){//增加一个可传递按钮点击的参数n
	for(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;//当有参数传递时，播放传递的参数n
	pic[next].style.display='';//只显示指定的next序号图片
	num[next].className='current';//为当前的按钮增加一个class
	index=next;//记录当前播放的index
}
show(index);//调用播放第一帧
var auto=setInterval(show,2000);//接着让播放函数以2秒一次的不停播放，完成循环。
//暂停绑定事件
box.οnmοuseοver=function(){clearInterval(auto)};//鼠标悬停暂停播放
box.οnmοuseοut=function(){auto=setInterval(show,2000)};//鼠标离开后恢复播放
//按钮绑定事件
for(var i=0,len=num.length;i<len;i++){
	num[i].n=i;//记录当前按钮序号
	num[i].οnclick=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>

可以看到它只需10行左右的代码即可完成了这个过程。

当然这个简单示例还不能完全展现出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.pattern参数，因为myFocus的extend函数默认是扩展到它的子类pattern里面：

代码:

myFocus.extend({
    mF_slider:function(par,F){}
})

这里讲解一下注册mF_slider函数的两个参数：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;//找到图片盒子、图片列表、数字按钮列表和总数目
    }
})

接下来是设置它的动态CSS样式(为什么要动态CSS？因为我们制作的焦点图是可改变大小的，并且会影响到它的css样式)

代码:

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：

复制内容到剪贴板

代码:

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;//找到图片盒子、图片列表、数字按钮列表和总数目
		//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';//后一个按钮的变化
		}))
		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>

2、淡入淡出焦点图

由于发帖字数有限制，这里就不再详细介绍了，不过步骤和前面那个是一样的，代码里面也有详细的注释，大家应该可以看的明白：）：

<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
		//PLAY
		eval(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文件都看一遍，你会发现制作焦点图真的是一件非常非常简单的事情！