高手请进 请问下面的焦点图 还能用什么方法写去下面的效果

Question

/*焦点图*/
#jd1{ margin:0px; padding:0px; float:left; width:708px;}
#jd2{ margin:0px; padding:0px; float:left; width:267px; margin-left:5px;}
#lisst{ margin:0px; padding:0px; width:260px; border:#000000 1px solid; margin-top:2px; }
.tabbox {width:260px;height:250px;}
.tabmenu {width:260px;height:28px;}
.tabmenu ul {margin:0;padding:0;color:#FFFFFF;list-style-type: none;}
.tabmenu li { text-align:center; margin-left:2px; margin-top:2px;float:left; display:block; width:126px; height:27px; overflow:hidden; background-color: #050606; line-height:27px; display:inline; font-size:12px;}
.tabmenu .cli {text-align:center;float:left;display:block;width:126px; color:#000000;height:27px;overflow:hidden;background-color: #fff;line-height:27px;display:inline;font-size:12px; cursor:pointer;}
#tabcontent{width:260px;}
#tabcontent ul {margin:0;padding:5px;list-style-type: none;}
#tabcontent .hidden {display:none;}
SELECT {BORDER-BOTTOM: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; LINE-HEIGHT: 21px; HEIGHT: 22px; COLOR: #666666; VERTICAL-ALIGN: middle; BORDER-TOP: #cccccc 1px solid; BORDER-RIGHT: #cccccc 1px solid}
.fl {FLOAT: left}
.fr {FLOAT: right}
.FormBase {BORDER-BOTTOM: #b6c2cc 1px solid; BORDER-LEFT: #b6c2cc 1px solid; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; BACKGROUND: url(../input-bg.gif) #fff repeat-x 50% top; BORDER-TOP: #b6c2cc 1px solid; BORDER-RIGHT: #b6c2cc 1px solid; PADDING-TOP: 2px}
.FormFocus {BORDER-BOTTOM: #9ecc00 1px solid; BORDER-LEFT: #9ecc00 1px solid; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; BORDER-TOP: #9ecc00 1px solid; BORDER-RIGHT: #9ecc00 1px solid; PADDING-TOP: 2px}
.note {BORDER-BOTTOM: #f90 1px solid; BORDER-LEFT: #f90 1px solid; PADDING-BOTTOM: 7px; BACKGROUND-COLOR: #fffff0; PADDING-LEFT: 7px; PADDING-RIGHT: 7px; DISPLAY: block; BORDER-TOP: #f90 1px solid; BORDER-RIGHT: #f90 1px solid; PADDING-TOP: 7px}
.table_edit {MARGIN: auto; BORDER-COLLAPSE: collapse}
.table_edit TH {TEXT-ALIGN: right; PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; COLOR: #999; PADDING-TOP: 3px}
.table_edit{PADDING-BOTTOM: 3px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 3px}
#banner #ifocus {POSITION: relative; WIDTH: 708px; HEIGHT: 321px}
#banner #ifocus_pic {POSITION: relative; WIDTH: 708px; DISPLAY: inline; FLOAT: left; HEIGHT: 321px; OVERFLOW: hidden}
#banner #ifocus_piclist {Z-INDEX: 1; POSITION: absolute}
#banner #ifocus_piclist LI {WIDTH: 708px; HEIGHT: 321px; OVERFLOW: hidden}
#banner #ifocus_piclist IMG {WIDTH: 708px; HEIGHT: 321px}
#banner #ifocus_btn {Z-INDEX: 3; POSITION: absolute; PADDING-LEFT: 3px; WIDTH: 708px; BOTTOM: 2px; HEIGHT: auto; LEFT: 0px; _bottom: 2px}
UNKNOWN {BOTTOM: 5px}
#banner #ifocus_btn LI {FILTER: alpha(opacity=50); PADDING-BOTTOM: 0px; MARGIN-TOP: 10px; PADDING-LEFT: 7px; WIDTH: auto; PADDING-RIGHT: 7px; DISPLAY: block; FLOAT: left; HEIGHT: auto; CURSOR: pointer; PADDING-TOP: 0px; opacity: 0.5; -moz-opacity: 0.5
}#banner #ifocus_btn IMG {BORDER-BOTTOM: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; WIDTH: 78px; HEIGHT: 33px; BORDER-TOP: #ffffff 1px solid; BORDER-RIGHT: #ffffff 1px solid}
#banner #ifocus_btn .current {TEXT-ALIGN: left; FILTER: alpha(opacity=100); MARGIN-TOP: 0px; DISPLAY: block; FLOAT: left; opacity: 1; -moz-opacity: 1}#banner #ifocus_btn .current IMG {BORDER-BOTTOM: #fff 2px solid; BORDER-LEFT: #fff 2px solid; WIDTH: 78px; HEIGHT: 37px; BORDER-TOP: #fff 2px solid; BORDER-RIGHT: #fff 2px solid}
#banner #ifocus_opdiv {Z-INDEX: 2; POSITION: absolute; FILTER: alpha(opacity=50); WIDTH: 708px; BOTTOM: 0px; BACKGROUND: #000; HEIGHT: 45px; LEFT: 0px; opacity: 0.5; -moz-opacity: 0.5; _height: 45px}
#banner #ifocus_tx {Z-INDEX: 3; POSITION: absolute; BOTTOM: 8px; COLOR: #fff; LEFT: 8px}
#banner #ifocus_tx .normal {DISPLAY: none}
</style>
<script>
function $(id) { return document.getElementById(id); }
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();}}}
function moveElement(elementID,final_x,final_y,interval) {if (!document.getElementById) return false;if (!document.getElementById(elementID)) return false;
  var elem = document.getElementById(elementID);if (elem.movement){clearTimeout(elem.movement);}
  if (!elem.style.left) {elem.style.left = "0px";}
  if (!elem.style.top) { elem.style.top = "0px";
  }var xpos = parseInt(elem.style.left);var ypos = parseInt(elem.style.top);
  if (xpos == final_x && ypos == final_y) {return true;}
  if (xpos < final_x) { var dist = Math.ceil((final_x - xpos)/10);xpos = xpos + dist;
  }if (xpos > final_x) {
    var dist = Math.ceil((xpos - final_x)/10);
    xpos = xpos - dist;}if (ypos < final_y) {
    var dist = Math.ceil((final_y - ypos)/10);
    ypos = ypos + dist; }
  if (ypos > final_y) { var dist = Math.ceil((ypos - final_y)/10);
    ypos = ypos - dist;}
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  elem.movement = setTimeout(repeat,interval);
}function classNormal(iFocusBtnID,iFocusTxID){
var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
for(var i=0; i<iFocusBtns.length; i++) {
iFocusBtns[i].className='normal';
iFocusTxs[i].className='normal';
}
}function classCurrent(iFocusBtnID,iFocusTxID,n){
var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
iFocusBtns[n].className='current';
iFocusTxs[n].className='current';
}
function iFocusChange() {
if(!$('ifocus')) return false;
$('ifocus').onmouseover = function(){atuokey = true};
$('ifocus').onmouseout = function(){atuokey = false};
var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');
var listLength = iFocusBtns.length;
iFocusBtns[0].onmouseover = function() {
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
if (listLength>=2) {
iFocusBtns[1].onmouseover = function() {
moveElement('ifocus_piclist',0,-203,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',1);}}
if (listLength>=3) {
iFocusBtns[2].onmouseover = function() {
moveElement('ifocus_piclist',0,-406,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',2);}
}if (listLength>=4) {
iFocusBtns[3].onmouseover = function() {
moveElement('ifocus_piclist',0,-609,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',3);}
}
if (listLength>=5) {
iFocusBtns[4].onmouseover = function() {
moveElement('ifocus_piclist',0,-812,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',4);
}
}
}
setInterval('autoiFocus()',5000);
var atuokey = false;
function autoiFocus() {
if(!$('ifocus')) return false;
if(atuokey) return false;
var focusBtnList = $('ifocus_btn').getElementsByTagName('li');
var listLength = focusBtnList.length;
for(var i=0; i<listLength; i++) {
if (focusBtnList[i].className == 'current') var currentNum = i;}
if (currentNum==0&&listLength!=1 ){
moveElement('ifocus_piclist',0,-203,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',1);}
if (currentNum==1&&listLength!=2 ){
moveElement('ifocus_piclist',0,-406,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',2);}
if (currentNum==2&&listLength!=3 ){
moveElement('ifocus_piclist',0,-609,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',3);}
if (currentNum==3&&listLength!=4 ){
moveElement('ifocus_piclist',0,-812,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',4);
}if (currentNum==4 ){
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}if (currentNum==1&&listLength==2 ){
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}if (currentNum==2&&listLength==3 ){
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);}
if (currentNum==3&&listLength==4 ){
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);}
}
addLoadEvent(iFocusChange);
</script>
</head>
<body>
<div id="banner">
<div id=ifocus>
<div id=ifocus_pic>
<div id="ifocus_piclist">
<ul>
<!--大图_start --><li><a href="gallery-128-grid.html" ><img border=0 alt="LOHO眼镜 眼镜架 配眼镜"  src="http://www.loho88.com/themes/panfu/images/1.jpg"></a></li><li><a href="gallery-127-grid.html" ><img border=0 altloho眼镜 title="配眼镜 眼镜店 眼镜架" src="http://www.loho88.com/themes/panfu/images/2.jpg"></a> </li><!--大图_end -->
</ul></div><div id=ifocus_opdiv></div><div id=ifocus_tx><ul>
<!--小图列表_start --><li class=current><li class=normal><li class=normal><li class=normal><li class=normal>
  <!--小图列表_end --></li></ul></div><div id=ifocus_btn> <ul><!--小图_start --><li class=current onmousemove="div"><img border=0 alt=LOHO眼镜  src="http://www.loho88.com/themes/panfu/images/1.jpg"> </li><li class=normal><img border=0 alt=LOHO眼镜 src="http://www.loho88.com/themes/panfu/images/2.jpg"> </li><!--小图_end -->
 </ul></div>
</div>
</div>

Answer 1

这个代码你复制一下 就能看到交果啦 如果这个效果用jquery写应咱 还有没有简单点的方法