求12图轮播代码附图（下方小图两边有箭头大图随鼠标指向小图变化）HTML的

 我来答

1个回答

#热议# 为什么有人显老，有人显年轻？

whiteamoon
2012-11-18 · TA获得超过251个赞

知道小有建树答主

回答量：199

采纳率：0%

帮助的人：170万

我也去答题访问个人页

关注

展开全部

熟悉JAVASCRIPT吗？原理就是下面的代码，细节还需要调试很多，希望能帮到你。
<HTML>
<HEAD>
<TITLE>WHITEAMOON</TITLE>
<meta http-equiv="content-type"content="text/html; charset=GB2312"/>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function whiteamoon(){
var me=this;
var frm_box=null,frm_big=null,frm_left=null,frm_right=null,frm_mid=null;
var b=25,ww=338,hh=200;
var num=12;
var idx=0;
var timer;
this.start=function(){ autoColor();timer=setTimeout(me.start,1000); };
this.stop=function(){ clearTimeout(timer); };
init();
function init(){
frm_box=document.createElement('div');with(frm_box.style){position='absolute'; width=ww+'px';height=hh+'px'; border='gray 1px solid';}
document.body.appendChild(frm_box);
frm_big=document.createElement('div');
with(frm_big.style){position='absolute'; top='2px'; left='2px'; width=(ww-6)+'px'; height=(hh-b-8)+'px'; border='gray 1px solid';}
frm_box.appendChild(frm_big);
frm_left=document.createElement('div');
with(frm_left.style){ position='absolute'; top=(hh-b-4)+'px'; left='2px'; width=b+'px'; height=b+'px'; border='gray 1px solid';}
frm_left.onclick=function(){if(idx>0){idx--;chgColor(idx);} me.stop();};
frm_box.appendChild(frm_left);
frm_right=document.createElement('div');
with(frm_right.style){ position='absolute'; top=(hh-b-4)+'px'; right='2px'; width=b+'px'; height=b+'px'; border='gray 1px solid';}
frm_right.onclick=function(){if(idx<11){idx++;chgColor(idx);} me.stop();};
frm_box.appendChild(frm_right);
frm_mid=document.createElement('div');
with(frm_mid.style){ position='absolute'; top=(hh-b-4)+'px'; left=(2+b+2)+'px'; width=(ww-b*2-10)+'px'; height=b+'px'; border='gray 1px solid'; overflow='hidden';}
frm_box.appendChild(frm_mid);
for(var i=0;i<num;i++){
var e=document.createElement('div');with(e.style){ position='absolute'; top=0; left=(i*(b-2))+'px'; width=height=(b-2)+'px'; backgroundColor=getRandomColor();}
e.setAttribute('idx',i);
e.onclick=function(){frm_big.style.backgroundColor=this.style.backgroundColor;idx=this.getAttribute('idx'); me.stop();};
frm_mid.appendChild(e);
}
chgColor(idx);
}
function autoColor(){ idx++; if(idx>11){idx=0;} chgColor(idx); }
function chgColor(_idx){frm_big.style.backgroundColor=frm_mid.children[_idx].style.backgroundColor;}
function getRandomColor(){ return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6); };
}
var jimmy=new whiteamoon();
jimmy.start();
</SCRIPT>
</BODY>
</HTML>

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

求12图轮播代码附图（下方小图两边有箭头 大图随鼠标指向小图变化）HTML的

其他类似问题

为你推荐：

求12图轮播代码附图（下方小图两边有箭头大图随鼠标指向小图变化）HTML的