首页图片自动翻页js代码，理解了基本函数功能，但不知具体细节，请大家帮忙深入理解

这段代码的主要构建思路是这样的，
定义一个ifoucus容器，在其左边有一个ifcous_list容器，它是用来显示大号图片的，在其下方有一个ifocus_opdiv容器，而这个容器中又有一个ifocus-tx容器，上面有该图片的描述文字。ifocus——list容器图片可以自动跳转，例外，它还可以由其右边的ifocus-btn容器来控制，ifocus-btn是显示了四个对应于左边的小图标，当鼠标放到其上时，相应左边的图片也会发生变化。
实际上，我没有理解这个自动跳转和用鼠标控制的功能的算法是任何实现的。
代码中又我的一些疑问的地方，请大家帮忙解答，万谢！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效 首页图片切换</title>
<style type="text/css">
/* Reset style */
* { margin:0; padding:0; word-break:break-all; }
body {
 background:#fff;
 color:#000000;
 font:12px/1.6em Helvetica, Arial, sans-serif;
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
}
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#0287CA; text-decoration:none; }
 a:hover { text-decoration:underline; }
ul, li { list-style:none; }
fieldset, img { border:none; }
legend { display:none; }
em, strong, cite, th { font-style:normal; font-weight:normal; }
input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; }
table { border-collapse:collapse; }
html { overflow:-moz-scrollbars-vertical; } /*Always show Firefox scrollbar*/
/* iFocus style */
#ifocus { width:650px; height:245px; margin:0px; border:1px solid #DEDEDE; background:#F8F8F8; }
 #ifocus_pic { display:inline; position:relative; float:left; width:540px; height:225px; overflow:hidden; margin:10px 0 0 10px; }
  #ifocus_piclist { position:absolute; }
  #ifocus_piclist li { width:550px; height:225px; overflow:hidden; }
  #ifocus_piclist img { width:550px; height:225px; }
 #ifocus_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0; }
  #ifocus_btn li { width:91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
  #ifocus_btn img { width:75px; height:45px; margin:7px 0 0 11px; }
  #ifocus_btn .current { background: url(img/ifocus_btn_bg.gif) no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }
 #ifocus_opdiv { position:absolute; left:0; bottom:0; width:545px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
 #ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; }
  #ifocus_tx .normal { display:none; }
</style>
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function addLoadEvent(func){                <!-- 此函数愣是没有看懂他的功能 请说明一下 （oldonload func根本就没有使用？？）-->
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {  <!--窗口加载时，它的类型不等于function就将其变成func？？？-->
  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){  <!--classNormal和classCurrent也是分别来制定现在显示的图片和将显示的图片，这里在得倒iFocusBtns和iFocusTxs列表后，我将没看明白他要做什么？-->
 var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');  <!--.getElementsByTagName -->
 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() {  <!-- 具体的实现图片滚动的功能，这里有个autokey, 1个数目，225个像素的改变都是我没看懂的地方-->
 if(!$('ifocus')) return false;
 $('ifocus').onmouseover = function(){atuokey = true}; <!-- autokey -->
 $('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,-225,5);
   classNormal('ifocus_btn','ifocus_tx');
   classCurrent('ifocus_btn','ifocus_tx',1);
  }
 }
 if (listLength>=3) {
  iFocusBtns[2].onmouseover = function() {
   moveElement('ifocus_piclist',0,-450,5);
   classNormal('ifocus_btn','ifocus_tx');
   classCurrent('ifocus_btn','ifocus_tx',2);
  }
 }
 if (listLength>=4) {
  iFocusBtns[3].onmouseover = function() {
   moveElement('ifocus_piclist',0,-675,5);
   classNormal('ifocus_btn','ifocus_tx');
   classCurrent('ifocus_btn','ifocus_tx',3);
  }
 }
}
setInterval('autoiFocus()',3500);
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,-225,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',1);
 }
 if (currentNum==1&&listLength!=2 ){
  moveElement('ifocus_piclist',0,-450,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',2);
 }
 if (currentNum==2&&listLength!=3 ){
  moveElement('ifocus_piclist',0,-675,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',3);
 }
 if (currentNum==3 ){
  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);
 }
}
addLoadEvent(iFocusChange);
</script>
</head>
<body>
<br />
<div align="center">
<div id="ifocus">
 <div id="ifocus_pic">
  <div id="ifocus_piclist" style="left:0; top:0;">
   <ul>
    <li><a href="#" target="_blank"><img src="http://www.3lian.com/edu/img/js/200909/1.jpg" alt="武林三国" border="0" /></a></li>
    <li><a href="#" target="_blank"><img src="http://www.3lian.com/edu/img/js/200909/2.jpg" alt="武林英雄" border="0" /></a></li>
    <li><a href="#" target="_blank"><img src="http://www.3lian.com/edu/img/js/200909/3.jpg" alt="商业大亨" border="0" /></a></li>
    <li><a href="#" target="_blank"><img src="http://www.3lian.com/edu/img/js/200909/4.jpg" alt="帝国远征" border="0" /></a></li>
   </ul>
  </div>
  <div id="ifocus_opdiv"></div>
  <div id="ifocus_tx">
   <ul>
    <li class="current">2008年度排名第一的网页游戏</li>
    <li class="normal">2009年最新的网页游戏 </li>
    <li class="normal">商业大亨，挑战亿万富翁</li>
    <li class="normal">一款2009年不得不玩的帝国远征</li>
   </ul>
  </div>
 </div>
 <div id="ifocus_btn">
  <ul>
   <li class="current"><img src="http://www.3lian.com/edu/img/js/200909/s1.jpg" alt="" /></li>
   <li class="normal"><img src="http://www.3lian.com/edu/img/js/200909/s2.jpg" alt="" /></li>
   <li class="normal"><img src="http://www.3lian.com/edu/img/js/200909/s3.jpg" alt="" /></li>
   <li class="normal"><img src="http://www.3lian.com/edu/img/js/200909/s4.jpg" alt="" /></li>
  </ul>
 </div>
</div>
</div>
</body>
</html>

解决方案 »

  1.   

    在FF中我看了下你这个问题产生是由于network.css这个样式表里面的class引起的：.side_rbox  它的图片在X轴上平铺就解决问题了：
    url("image/side_rbox_gray.gif") repeat-x不过这样你其他运用到这个class的地方又会出现新的问题，总的看了下了我觉得还是样式混用然后浏览器之间不同解析引起来的现在你想解决这个问题我决定要么你在定义个单独的样式，要么你左右的那个线条就是用外边框线其实你这个问题我也不好看  比较只能通过FB去看，所以我建议你在调节下，你注意下用下全局清除下所有的内外边距，
      

  2.   

    不好意思啊，昨天晚上有点事加班了然后上午的时候就给搞去医院了  无语死了
    现在我只能大概的给你说下了就回去休息了，人实在不舒服。
    function addLoadEvent(func){                <!-- 此函数愣是没有看懂他的功能 请说明一下 （oldonload func根本就没有使用？？）-->
     var oldonload = window.onload;
     if (typeof window.onload != 'function') {  <!--窗口加载时，它的类型不等于function就将其变成func？？？-->首先看你上面的问题是这样的，这个指的的是在窗口加载的时候就运行这个js，然后func它是addLoadEvent(iFocusChange);里面iFocusChange传进去的参数，你上面问题的问题我真不好怎么给你分解的说，它们都是一个整体的，你只管上面这个代码指的是不管怎么样当加载的时候都运行这段JS。其实说实在的，这个如果要给你分解的详细说真的估计你会听的晕晕乎乎的，而我也会累个半死，这边把我给你说下这个代码你应该怎么分解的去看，然后你大概的看下，其实说真的我觉得你应该多看下基础别看这些，好了我来说下分解吧：首先，你应该看最下面的这个：addLoadEvent(iFocusChange);  页面加载的时候运行addLoadEvent，而addLoadEvent里面页面加载不管怎么样运气func();func这个其实就是iFocusChange，然后在看function iFocusChange() 这个方法在这个事件里面给ifocus定义了2个移开移入事件，而且方便根据不同的li的定义了不同的moveElement等函数，接着在后面进行了一系列的判断坐标点等就是这个moveElement方法，然后就是固定当前图的坐标点了classNormal方法你按照上面的顺序先看看理理，哎！估计我说的这么乱，你肯定看的晕晕呼呼了吧，呵呵其实说实在的我也觉的晕晕呼呼的了，你还是先看基础 然后在分解的处理吧，这些东西没人能详细的解说的，一般只要你基础好了能看的懂能改就好了，js这些复杂块的东西都是网上搬的