JS實現圖片輪換

本例演示地址：http://www.beijibear.com/myplugins/圖片切換/topi.html

源碼以下：
<style type="text/css">
body {font-size: 12px;margin: 0px;padding: 0px;}
#ifocus {width:690px;height:180px;background:#F8F8F8;}
#ifocus_pic { display:inline; position:relative; float:left; width:690px; height:180px; overflow:hidden; margin:0; }
#ifocus_piclist { position:absolute;text-align:left; }
#ifocus_piclist ul{margin:0;padding:0px;list-style:none;width:690px;}
#ifocus_piclist li { width:690px; height:180px; overflow:hidden; }
#ifocus_piclist img {width:690px;height:180px;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;}
#ifocus_btn { position:absolute;left:0px; top:145px; text-align:right; width:100%; float:right; margin:9px 9px 1px 0; color:#000000;}
#ifocus_btn ul{margin:0;list-style:none;float:right;}
#ifocus_btn li{float:left; text-align:center; width:20px; background: #FFFFCC; font-weight:bold; margin:0px 2px 0px 2px; line-height:20px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
#ifocus_btn .current { background: #FFFFFF; font-weight:bold; color:#275604; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }
#ifocus_opdiv {
    position:absolute;
    left:0;
    bottom:0;
    width:690px;
    height:35px;
    background:#38A22D;
    opacity:0.5;
    -moz-opacity:0.5;
    filter:alpha(opacity=50);
    background-color: #38A22D;
}
#ifocus_tx { position:absolute; float:right;left:20px; bottom:10px; color:#FFFFFF; font-weight:bold;}
#ifocus_tx ul{margin:0;list-style:none;width:100%;}
#ifocus_tx .current{}
#ifocus_tx .normal {display:none; }
</style>
<SCRIPT language="javascript">
var Image_Height = 185;
var Image_Num = 10;
var Image_Pos,Image_Posauto;

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() {
            Image_Pos = (1-2)*Image_Height;
            moveElement('ifocus_piclist',0,Image_Pos,5);
            classNormal('ifocus_btn','ifocus_tx');
            classCurrent('ifocus_btn','ifocus_tx',1);
        }
    }
    if (listLength>=3) {
        iFocusBtns[2].onmouseover = function() {
            Image_Pos = (1-3)*Image_Height;
            moveElement('ifocus_piclist',0,Image_Pos,5);
            classNormal('ifocus_btn','ifocus_tx');
            classCurrent('ifocus_btn','ifocus_tx',2);
        }
    }
    if (listLength>=4) {
        iFocusBtns[3].onmouseover = function() {
            Image_Pos = (1-4)*Image_Height;
            moveElement('ifocus_piclist',0,Image_Pos,5);
            classNormal('ifocus_btn','ifocus_tx');
            classCurrent('ifocus_btn','ifocus_tx',3);
        }
    }
    if (listLength>=5) {
        iFocusBtns[4].onmouseover = function() {
            Image_Pos = (1-5)*Image_Height;
            moveElement('ifocus_piclist',0,Image_Pos,5);
            classNormal('ifocus_btn','ifocus_tx');
            classCurrent('ifocus_btn','ifocus_tx',4);
        }
    }
    if (listLength>=6) {
        iFocusBtns[5].onmouseover = function() {
            Image_Pos = (1-6)*Image_Height;
            moveElement('ifocus_piclist',0,Image_Pos,5);
            classNormal('ifocus_btn','ifocus_tx');
            classCurrent('ifocus_btn','ifocus_tx',5);
        }
    }
    if (listLength>=7) {
        iFocusBtns[6].onmouseover = function() {
            Image_Pos = (1-7)*Image_Height;
            moveElement('ifocus_piclist',0,Image_Pos,5);
            classNormal('ifocus_btn','ifocus_tx');
            classCurrent('ifocus_btn','ifocus_tx',6);
        }
    }
    if (listLength>=8) {
        iFocusBtns[7].onmouseover = function() {
            Image_Pos = (1-8)*Image_Height;
            moveElement('ifocus_piclist',0,Image_Pos,5);
            classNormal('ifocus_btn','ifocus_tx');
            classCurrent('ifocus_btn','ifocus_tx',7);
        }
    }
    if (listLength>=9) {
        iFocusBtns[8].onmouseover = function() {
            Image_Pos = (1-9)*Image_Height;
            moveElement('ifocus_piclist',0,Image_Pos,5);
            classNormal('ifocus_btn','ifocus_tx');
            classCurrent('ifocus_btn','ifocus_tx',8);
        }
    }
}

setInterval('autoiFocus()',2000);
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==(listLength-1) ){
        moveElement('ifocus_piclist',0,0,5);
        classNormal('ifocus_btn','ifocus_tx');
        classCurrent('ifocus_btn','ifocus_tx',0);
    }
    Image_Posauto = (currentNum+1)*(-1)*Image_Height;
    if (currentNum==0&&listLength!=1 ){
        moveElement('ifocus_piclist',0,Image_Posauto,5);
        classNormal('ifocus_btn','ifocus_tx');
        classCurrent('ifocus_btn','ifocus_tx',1);
    }
    if (currentNum==1&&listLength!=2 ){
        moveElement('ifocus_piclist',0,Image_Posauto,5);
        classNormal('ifocus_btn','ifocus_tx');
        classCurrent('ifocus_btn','ifocus_tx',2);
    }
    if (currentNum==2&&listLength!=3 ){
        moveElement('ifocus_piclist',0,Image_Posauto,5);
        classNormal('ifocus_btn','ifocus_tx');
        classCurrent('ifocus_btn','ifocus_tx',3);
    }
    if (currentNum==3&&listLength!=4 ){
        moveElement('ifocus_piclist',0,Image_Posauto,5);
        classNormal('ifocus_btn','ifocus_tx');
        classCurrent('ifocus_btn','ifocus_tx',4);
    }
    if (currentNum==4&&listLength!=5 ){
        moveElement('ifocus_piclist',0,Image_Posauto,5);
        classNormal('ifocus_btn','ifocus_tx');
        classCurrent('ifocus_btn','ifocus_tx',5);
    }
    if (currentNum==5&&listLength!=6 ){
        moveElement('ifocus_piclist',0,Image_Posauto,5);
        classNormal('ifocus_btn','ifocus_tx');
        classCurrent('ifocus_btn','ifocus_tx',6);
    }
    if (currentNum==6&&listLength!=7 ){
        moveElement('ifocus_piclist',0,Image_Posauto,5);
        classNormal('ifocus_btn','ifocus_tx');
        classCurrent('ifocus_btn','ifocus_tx',7);
    }
    if (currentNum==7&&listLength!=8 ){
        moveElement('ifocus_piclist',0,Image_Posauto,5);
        classNormal('ifocus_btn','ifocus_tx');
        classCurrent('ifocus_btn','ifocus_tx',8);
    }

}
addLoadEvent(iFocusChange);


function setfuc(id)
{
    my_getbyid("tour_sbtn").className = 'index_select_out'
    my_getbyid("hotel_sbtn").className = 'index_select_out'
    my_getbyid("ship_sbtn").className = 'index_select_out'
    my_getbyid(id+"_sbtn").className = 'index_select_on';
    my_getbyid("tour").style.display = "none"
    my_getbyid("hotel").style.display = "none"
    my_getbyid("ship").style.display = "none"
    my_getbyid(id).style.display = "block";
   
}
</SCRIPT>

<DIV id=ifocus>
<DIV id=ifocus_pic>
<DIV style="TOP: 0px; LEFT: 0px" id=ifocus_piclist>
<UL>
<LI><A href="#" target="_blank"><IMG alt="aa" src="img/news-1.jpg" width="500"></A></LI><LI><A href="#" target="_blank"><IMG alt="bb" src="img/news-2.jpg" width="500"></A></LI><LI><A href="#" target="_blank"><IMG alt="cc" src="img/news-3.jpg" width="500"></A></LI>
</UL></DIV>
<DIV id=ifocus_opdiv></DIV>
<DIV id=ifocus_tx>
<UL>
<LI class="current">aa</LI><LI class="normal">bb</LI><LI class="normal">cc</LI>
</UL></DIV>
<DIV id=ifocus_btn>
<UL>
<LI class=current>1 </LI><LI class=normal>2 </LI><LI class=normal>3 </LI>
</UL></DIV></DIV></DIV>