下面把代码贴出来,想用的友友拿去用吧~ 现在流行拿来主义哒,资源共享
封装好的 show.js 文件:
- //ff支持
- function isIE(){ //ie?
- if (window.navigator.userAgent.toLowerCase().indexOf("msie")>=1)
- return true;
- else
- return false;
- }
- var Lantern={
- onChange:[],
- oInterval:[],
- otimeOut:[],
- opacityNum:101,
- cycNum:0,
- showNum:0,
- width:426,//整体宽度
- navyCtr:[],//2维: 0.原长 1.目标长 2.speed
- navyTime:10,//navy动画时间
- picMoveSpeed:22,//图片移动速度
- timeOut_time:7000,//停滞时间
- info ://0.图片url 1.名称 2.链接地址
- [],
- init: function(){
- Lantern.onChange=false;
- for(var i=0;i<Lantern.info.length;i++){
- var picDiv
- var picTemp
- picDiv=document.createElement('div');
- picTemp=document.createElement('img');
- picDiv.id ="LanternImg"+i;
- picDiv.name=i;
- picTemp.src = Lantern.info[i][0];
- picTemp.style.width = "426px";
- picDiv.style.position ="absolute";
- picDiv.style.left =Lantern.width+"px";
- picDiv.οnclick=function(){window.open(Lantern.info[this.name][2]);};
- picDiv.appendChild(picTemp);
- document.getElementById("lanternImg").appendChild(picDiv);
- var divTemp
- divTemp=document.createElement('div');
- divTemp.id ="LanternN"+i;
- divTemp.name=i;
- divTemp.innerHTML="<strong>"+(i+1)+"</strong><span id=/"lanternNc"+i+"/" style=/"display:none/"> "+Lantern.info[i][1]+"</span>";
- if(i==0){
- divTemp.className ="div_off1";
- }else if(i==Lantern.info.length-1){
- divTemp.className ="div_off3";
- }else{
- divTemp.className ="div_off2";
- }
- //divTemp.className="div_off";
- if(i==0)
- divTemp.οnclick=function(){window.open(Lantern.info[this.name][2]);};
- else
- divTemp.οnclick=function(){if(!Lantern.onChange){Lantern.onChange=true;Lantern.setNavy(this.name);}};
- document.getElementById("lanternNavy").appendChild(divTemp);
- }
- Lantern.initNany();
- },
- initNany:function(){
- navyCtr=new Array();
- for(var k=0;k<Lantern.info.length;k++)
- Lantern.navyCtr[k]=[];
- document.getElementById("lanternNc0").style.display ="";
- document.getElementById("LanternN0").className ="div_on1";
- var onLength,offLength
- onLength=document.getElementById("LanternN0").offsetWidth
- offLength=(Lantern.width-onLength)/(Lantern.info.length-1)
- var numtemp=0;
- for(var j=0;j<Lantern.info.length;j++){
- if(j!=0){//未选
- Lantern.navyCtr[j][1]=offLength;
- document.getElementById("lanternNc"+j).style.display ="none";
- if(j==Lantern.info.length-1){
- document.getElementById("LanternN"+j).className ="div_off3";
- }else{
- document.getElementById("LanternN"+j).className ="div_off2";
- }
- document.getElementById("LanternN"+j).style.width=offLength+"px";
- if(j==Lantern.info.length-1){
- document.getElementById("LanternN"+j).style.width=(Lantern.width-onLength-numtemp)+"px";
- }else{
- numtemp+=offLength;
- }
- }else{//已选
- Lantern.navyCtr[j][1]=onLength;
- }
- }
- if(isIE())
- document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN0").offsetLeft+10)+"px";
- else
- document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN0").offsetLeft-document.getElementById("lantern").offsetLeft+10)+"px";
- document.getElementById("LanternImg0").style.display ="";
- document.getElementById("LanternImg0").style.left ="0px";
- Lantern.otimeOut=setTimeout("Lantern.cycLantern()",Lantern.timeOut_time);
- },
- setNavy:function(i){
- if(i==Lantern.info.length-1)
- document.getElementById("lanternNavy").style.backgroundColor ="#CC3300";
- else
- document.getElementById("lanternNavy").style.backgroundColor ="#BBBBBB";
- document.getElementById("lanternNc"+i).style.display ="";
- if(i==0){
- document.getElementById("LanternN"+i).className ="div_on1";
- }else if(i==Lantern.info.length-1){
- document.getElementById("LanternN"+i).className ="div_on3";
- }else{
- document.getElementById("LanternN"+i).className ="div_on2";
- }
- //document.getElementById("LanternN"+i).className ="div_on";
- document.getElementById("LanternN"+i).style.width=null;
- var onLength,offLength
- onLength=document.getElementById("LanternN"+i).offsetWidth
- offLength=(Lantern.width-onLength)/(Lantern.info.length-1)
- var numtemp=0;
- for(var j=0;j<Lantern.info.length;j++){
- Lantern.navyCtr[j][0]=Lantern.navyCtr[j][1];
- if(i!=j){//未选
- Lantern.navyCtr[j][1]=offLength;
- document.getElementById("lanternNc"+j).style.display ="none";
- if(j==Lantern.info.length-1){
- document.getElementById("LanternN"+j).className ="div_off3";
- }else{
- document.getElementById("LanternN"+j).className ="div_off2";
- }
- if(j==Lantern.info.length-1) {
- document.getElementById("LanternN"+j).style.width=(Lantern.width-onLength-numtemp)+"px";
- }else{
- numtemp+=offLength
- }
- document.getElementById("LanternN"+j).style.width=Lantern.navyCtr[j][0]+"px";
- Lantern.navyCtr[j][2]=(Lantern.navyCtr[j][1]-Lantern.navyCtr[j][0])/Lantern.navyTime ;
- }else{//已选
- Lantern.navyCtr[j][1]=onLength-34;
- document.getElementById("LanternN"+j).style.width=(Lantern.navyCtr[j][0]-34)+"px";
- Lantern.navyCtr[j][2]=(Lantern.navyCtr[j][1]-Lantern.navyCtr[j][0])/Lantern.navyTime ;
- }
- }
- document.getElementById("LanternImg"+i).style.display ="";
- if(Lantern.onChange){
- document.getElementById("LanternN"+i).οnclick=function(){window.open(Lantern.info[this.name][2]);};
- document.getElementById("LanternN"+Lantern.showNum).οnclick=function(){
- if(!Lantern.onChange){
- Lantern.onChange=true;Lantern.setNavy(this.name);
- }
- };
- document.getElementById("LanternImg"+i).style.zIndex=0;
- document.getElementById("LanternImg"+Lantern.showNum).style.zIndex=-1;
- Lantern.oInterval=setInterval('Lantern.changeLantern('+i+')',10);
- }
- },
- imgMoveOver:false,
- navyMoveOver:false,
- changeLantern:function(i){
- if(Lantern.otimeOut!=null)
- clearTimeout(Lantern.otimeOut)
- //移动
- if(!Lantern.navyMoveOver)
- Lantern.moveNavy(i);
- if(!Lantern.imgMoveOver){
- Lantern.moveImg(i);
- }else{
- Lantern.flashImg(i);
- }
- },
- moveNavy:function(select){
- var breaktime=0;
- for(var i=0;i<Lantern.info.length;i++){
- if((Lantern.navyCtr[i][2]>0&&document.getElementById("LanternN"+i).offsetWidth<Lantern.navyCtr[i][1])||(Lantern.navyCtr[i][2]<0&&document.getElementById("LanternN"+i).offsetWidth>Lantern.navyCtr[i][1])){
- if(i==select){
- document.getElementById("LanternN"+i).style.width=(document.getElementById("LanternN"+i).offsetWidth+Lantern.navyCtr[i][2]-34)+"px";
- }else{
- document.getElementById("LanternN"+i).style.width=(document.getElementById("LanternN"+i).offsetWidth+Lantern.navyCtr[i][2])+"px";
- }
- }else{
- if(i==select){
- for(var j=0;j<Lantern.info.length;j++){
- document.getElementById("LanternN"+j).style.width=Lantern.navyCtr[j][1]+"px";
- }
- if(isIE())
- document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN"+select).offsetLeft+10)+"px";
- else
- document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN"+select).offsetLeft-document.getElementById("lantern").offsetLeft+10)+"px";
- Lantern.navyMoveOver=true;
- break;
- }
- }
- if(i==select){
- if(isIE())
- document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN"+select).offsetLeft+10)+"px";
- else
- document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN"+select).offsetLeft-document.getElementById("lantern").offsetLeft+10)+"px";
- }
- }
- },
- moveImg:function(i){
- if(document.getElementById("LanternImg"+i).offsetLeft>0){
- document.getElementById("LanternImg"+i).style.left=(document.getElementById("LanternImg"+i).offsetLeft-Lantern.picMoveSpeed)+"px";
- }else{
- document.getElementById("LanternImg"+i).style.left="0px";
- document.getElementById("LanternImg"+Lantern.showNum).style.left=Lantern.width+"px";
- Lantern.imgMoveOver=true;
- }
- },
- flashImg:function(i){
- document.getElementById("LanternImg"+i).style.opacity="100";
- Lantern.showNum=i;
- Lantern.imgMoveOver=false;
- Lantern.navyMoveOver=false;
- Lantern.opacityNum=101;
- Lantern.cycNum=i;
- clearInterval(Lantern.oInterval);
- Lantern.otimeOut=setTimeout("Lantern.otimeOut=Lantern.cycLantern()",Lantern.timeOut_time);
- Lantern.onChange=false;
- },
- cycLantern:function(){
- if(!Lantern.onChange){
- Lantern.onChange=true;
- if(Lantern.cycNum==Lantern.info.length-1)
- Lantern.cycNum=0;
- else
- Lantern.cycNum++;
- Lantern.setNavy(Lantern.cycNum)
- }
- }
- }
封装好的style.css CSS样式表:
- BODY {
- PADDING-RIGHT: 0px;
- PADDING-LEFT: 0px;
- FONT-SIZE: 12px;
- BACKGROUND: #e2e2e2;
- PADDING-BOTTOM: 0px;
- MARGIN: 0px;
- CURSOR: default;
- COLOR: #666;
- WORD-BREAK: break-all;
- LINE-HEIGHT: 20px;
- PADDING-TOP: 0px;
- FONT-FAMILY: 宋体,Arial,Helvetica,sans-serif;
- TEXT-ALIGN: center
- }
- DIV {
- PADDING-RIGHT: 0px;
- PADDING-LEFT: 0px;
- PADDING-BOTTOM: 0px;
- MARGIN: 0px;
- PADDING-TOP: 0px;
- TEXT-ALIGN: left
- }
- #lantern {
- BORDER-RIGHT: #ffffff 1px solid;
- BORDER-TOP: #ffffff 1px solid;
- OVERFLOW: hidden;
- BORDER-LEFT: #ffffff 1px solid;
- WIDTH: 426px;
- CURSOR: pointer;
- BORDER-BOTTOM: #ffffff 1px solid;
- HEIGHT: 240px
- }
- #lanternMain {
- WIDTH: 426px;
- HEIGHT: 224px;
- BACKGROUND-COLOR: #ffffff
- }
- #lanternNavy {
- FONT-SIZE: 12px;
- FLOAT: left;
- OVERFLOW: hidden;
- WIDTH: 1000px;
- COLOR: #ffffff;
- HEIGHT: 16px;
- TEXT-ALIGN: center
- }
- #lanternNavy .div_off1 {
- FLOAT: left;
- BORDER-LEFT: #ffcc00 0px solid;
- BORDER-BOTTOM: #ffffff 1px solid;
- HEIGHT: 16px;
- BACKGROUND-COLOR: #bbbbbb;
- TEXT-ALIGN: center
- }
- #lanternNavy .div_on1 {
- PADDING-RIGHT: 24px;
- PADDING-LEFT: 10px;
- FLOAT: left;
- BORDER-LEFT: #ffcc00 0px solid;
- BORDER-BOTTOM: #ffffff 1px solid;
- HEIGHT: 16px;
- BACKGROUND-COLOR: #cc3300
- }
- #lanternNavy .div_off2 {
- FLOAT: left;
- BORDER-LEFT: #ffcc00 1px solid;
- BORDER-BOTTOM: #ffffff 1px solid;
- HEIGHT: 16px;
- BACKGROUND-COLOR: #bbbbbb;
- TEXT-ALIGN: center
- }
- #lanternNavy .div_on2 {
- PADDING-RIGHT: 24px;
- PADDING-LEFT: 10px;
- FLOAT: left;
- BORDER-LEFT: #ffcc00 1px solid;
- BORDER-BOTTOM: #ffffff 1px solid;
- HEIGHT: 16px;
- BACKGROUND-COLOR: #cc3300
- }
- #lanternNavy .div_off3 {
- BORDER-RIGHT: #ffcc00 2px solid;
- FLOAT: left;
- BORDER-LEFT: #ffcc00 1px solid;
- BORDER-BOTTOM: #ffffff 1px solid;
- HEIGHT: 16px;
- BACKGROUND-COLOR: #bbbbbb;
- TEXT-ALIGN: center
- }
- #lanternNavy .div_on3 {
- BORDER-RIGHT: #ffcc00 2px solid;
- PADDING-RIGHT: 24px;
- PADDING-LEFT: 10px;
- FLOAT: left;
- BORDER-LEFT: #ffcc00 1px solid;
- BORDER-BOTTOM: #ffffff 1px solid;
- HEIGHT: 16px;
- BACKGROUND-COLOR: #cc3300
- }
- #lanternImg {
- OVERFLOW: hidden;
- WIDTH: 426px;
- POSITION: absolute;
- HEIGHT: 224px
- }
页面文件:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><!--这段代码必须要有-->
- <HTML>
- <HEAD>
- <LINK href="style.css" type=text/css rel=stylesheet>
- <SCRIPT src="show.js" type=text/javascript></SCRIPT>
- </HEAD>
- <BODY id=body1>
- <DIV id=lantern>
- <DIV id=lanternMain>
- <DIV id=lanternImg>
- <DIV style="Z-INDEX: 100; WIDTH: 426px; BORDER-BOTTOM: #ffffff 1px solid; POSITION: absolute; TOP: 221px; HEIGHT: 2px">
- <IMG id=lanternPoint style="POSITION: absolute" src="point.gif"><!--这里的图片是小标签指向图片的小三角形脚标,不要也罢,但是不好看-->
- </DIV>
- </DIV>
- </DIV>
- <DIV id=lanternNavy></DIV>
- <SCRIPT type=text/javascript>
- Lantern.info=new Array();
- Lantern.info=[['E:/01.png','测试1','#'],['E:/19.png','测试2','#'],['E:/41.png','测试3','#'],['E:/1.png','测试4','#'],['E:/2.png','测试5','#']];
- Lantern.init();
- </SCRIPT>
- </DIV>
- </BODY>
- </HTML>