实现三图并列焦点图特效,里面的功能都写有注释,主要包括了图片滚动、鼠标悬浮、文字描述显示、图片自动播放、焦点图等功能,。
首先引用文件
<link href="css/zsucai.css" rel="stylesheet" type="text/css">
核心代码如下:
function Figure(id)
{
_this=this;
this.oDiv=typeof id?document.getElementById(id):id;
this.oUl1=this.oDiv.getElementsByTagName('ul')[0];
this.oUl2 = this.oDiv.getElementsByTagName('ul')[1];
this.aLi1=this.oUl1.getElementsByTagName('li');
this.aLi2=this.oUl2.getElementsByTagName('li');
this.num=0;
this.timerr=setInterval(function()
{
_this.fnNext(this);
},2000);
this.oUl1.onmouseover=function()
{
clearInterval(_this.timerr);
}
this.oUl1.onmouseout=function()
{
_this.timerr=setInterval(function()
{
_this.fnNext(_this);
},2000);
}
}
/*自动滚动函数*/
Figure.prototype.fnNext=function()
{
this.num++;
if(this.num==this.aLi2.length)
{
this.num=0;
}
this.fndong(this.aLi2[this.num]);
}
/*点击小按钮函数*/
Figure.prototype.fnShuffLing=function()
{
_this=this;
for(var i=0;i<this.aLi2.length;i++)
{
this.aLi2[i].index=i;
this.aLi2[i].onclick=function()
{
_this.fndong(this);
}
}
}
Figure.prototype.fndong=function(curobj)
{
this.num=curobj.index;
for(var i=0;i<this.aLi2.length;i++)
{
this.aLi2[i].className="";
}
curobj.className='info-cur';
startMove(this.oUl1,{left:-(curobj.index*720)});
}
/*移入小图函数*/
Figure.prototype.fnDoaLi=function()
{
_this=this;
for(var i=0;i<this.aLi1.length;i++)
{
this.aLi1[i].onmouseover=function()
{
_this.fnMonover(this);
}
this.aLi1[i].onmouseout=function()
{
_this.fnMonout(this);
}
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791