首先非常感谢网友高琦的无私分享，此作品是他把jquery特效改成原生javascript的特效，实现三图并列焦点图特效，里面的功能都写有注释，主要包括了图片滚动、鼠标悬浮、文字描述显示、图片自动播放、焦点图等功能，这是最初版，还存在点问题，等网友们去发现吧，下次修正之后会覆盖的。。。。
核心代码如下：
function startMove(obj,json,fnEnd){
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
var oStop=true;
var iCurr=0;
for(var attr in json)
{
if(attr=="opacity")
{
iCurr=Math.round(parseFloat(getCSS(obj,attr))*100);
}else
{
iCurr=parseInt(getCSS(obj,attr));
}
if(isNaN(iCurr)){iCurr=0;}
var iSpeed=(json[attr]-iCurr)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(iCurr!=json[attr])
{
oStop=false;
if(attr=="opacity")
{
obj.style.filter="alpha(opacity="+iCurr+iSpeed+")";
obj.style.opacity=(iCurr+iSpeed)/100;
}else
{
obj.style[attr]=iCurr+iSpeed+'px';
}
}
}
if(oStop)
{
clearInterval(obj.timer);
if(fnEnd) fnEnd();
}
},30);
}
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友高琦 滚动特效 图片特效 幻灯片 滑动插件 图片滚动 图片轮播 Jquery焦点图 三图并列焦点图