分类分类
2015-10-07 11:12作者：fang
本文实例讲述了JS实现的文字与图片定时切换效果代码。分享给大家供大家参考。具体如下：
这是近来门户们都喜欢用的特效，左侧是一个大图片，右侧是对应文字，鼠标移动时，对应行的文字会变化，图片也相应的切换，如果没有鼠标动作时，它会自己播放，播放时间可调整，个人感觉挺不错的导航效果。
具体代码如下：
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>文字与图片切换</title>
<style>*{margin:0;padding:0;border:0;list-style:none}
.focusPic{width:500px;margin:0auto;clear:both;text-align:center;border:1pxsolid#ccc;}
.focusPic.focusTitle{width:240px;float:right;font-size:14px;text-align:left;}
.focusPic.focusTitleli{height:28px;line-height:28px;cursor:pointer;font-size:12px;padding-left:10px;}
.focusPic.focusTitlelia,.focusPic.focusTitlelia:visited{color:#000;}
.focusPic.focusTitlelia:hover{color:#bc2931;}
.focusPic.focusTitle.currenta,.focusPic.focusTitle.currenta:visited{color:#bc2931;}
.focusPic.focusTitle.currenta:hover{color:#bc2931;}
.focusPic#focusMenuli.current{background:#efefef;font-weight:bold;color:#bc2931;}
.focusPic#focusLeft{width:250px;overflow:hidden;float:left;background:#efefef;font-size:14px;line-height:100px;font-weight:bold;height:168px;}
.focusPic#focusLeftli{display:none;}
.focusPic#focusLeftli.current{display:block;}
</style>
</head>
<body>
<divclass="focusPic">
<ulid="focusLeft">
<liclass="current">VB在线出题考试系统</li>
<li>jQuery仿iGoogle主页模块拖动</li>
<li>jQueryUI官方实例集</li>
<li>VB在线出题考试系统</li>
<li>小妖ASP投票调查系统v4.0</li>
<li>jQuery带动画的日期选择插件</li>
</ul>
<divclass="focusTitle">
<ulid="focusMenu">
<liclass="current"><ahref="#">VB在线出题考试系统</a></li>
<li><ahref="#"target="_blank">jQuery仿iGoogle主页模块拖动</a></li>
<li><ahref="#"target="_blank">jQueryUI官方实例集</a></li>
<li><ahref="#"target="_blank">VB在线出题考试系统（MSSQL）</a></li>
<li><ahref="#"target="_blank">小妖ASP投票调查系统v4.0</a></li>
<li><ahref="#"target="_blank">jQuery带动画的日期选择插件</a></li>
</ul>
</div>
<divclass="clear"></div>
</div>
<scriptlanguage="javascript"type="text/javascript">
//<![CDATA[
var$=function(id){
returndocument.getElementById(id);
};
Function.prototype.bind=function(){
if(arguments.length<2&&arguments[0]==null){
returnthis;
}
var__method=this,args=$A(arguments),object=args.shift();
returnfunction(){return__method.apply(object,args.concat($A(arguments)));
};
};
varisArray=function(testVar){
returnArray==testVar.constructor?1:String!=testVar.constructor&&null!=testVar.length&&!testVar.alert&&!testVar.nodeType?2:0;};
var$A=function(variable){
switch(isArray(variable)){
case1:
returnvariable;
case2:
vararr=[],i=-1,len=variable.length;
while(++i<len){
arr[i]=variable[i];
}
returnarr;
default:
return[variable];
}
};
varaddClass=function(elem,className){
if((""+elem.className+"").indexOf(""+className+"")==-1){
if(elem.className==""){
elem.className=className;
}else{elem.className+=(""+className);
}
}
};
varremoveClass=function(elem,className){
varnewClass=(""+elem.className+"").replace(""+className+"","");
elem.className=newClass.substr(1,newClass.length-2);
};
varaddEvent=function(elem,eventName,handler){
if(elem.addEventListener){
elem.addEventListener(eventName,handler,false);
}elseif(elem.attachEvent){
elem.attachEvent("on"+eventName,handler);
}
};
functionSlide(menus,contents,css,eventName,interval){
varcurSeq=0,length=contents.length,timerIds=[],isStopped;
if(menus&&length!=menus.length){
thrownewError("theamountofmenusandcontentsisnotequal");
}
varhide=function(seq){
removeClass(contents[seq],css);
if(menus){
removeClass(menus[seq],css);
}
};
varshow=function(seq){
addClass(contents[seq],css);
if(menus){
addClass(menus[seq],css);
}
curSeq=seq;
};
this.showNext=function(){
varnext=curSeq+1;
if(next>=length){
next=0;
}
vari=length;
while(--i>=0){
if(i!=next){
hide(i);
}else{show(i);
}
}
};
this.change=function(event){
if(this!=menus[curSeq]){
vari=length;
while(--i>=0){
if(menus[i]!=this){
hide(i);
}else{
show(i);
}
}
}
e=window.event||event;
e.cancelBubble=true;
};
this.play=function(speed){
isStopped=false;
timerIds.push(setInterval(this.showNext.bind(this),speed));
};
this.pause=function(){
isStopped=true;
vari=length;
while(--i>=0){
clearInterval(timerIds[i]);
timerIds.splice(i,1);
}
};
vari=length;
while(--i>=0){
addEvent(menus[i],eventName,this.change.bind(menus[i]));
if(interval>0){
addEvent(menus[i],"mouseover",this.pause);
addEvent(menus[i],"mouseout",this.play.bind(this,interval));
}
}
if(interval>0){
this.play(interval);
}
}
varfocusImg=newSlide($("focusMenu").getElementsByTagName("li"),$("focusLeft").getElementsByTagName("li"),"current","mouseover",3000);
//]]>
</script>
</body>
希望本文所述对大家的JavaScript程序设计有所帮助。
相关