& lthtml xmlns = " http://www . w3 . org/1999/XHTML " & gt；
& lthead & gt
& ltmeta http-equiv = " Content-Type " Content = " text/html；charset=gb2312 " >
& lttitle & gt網頁特效主頁圖片切換
& ltstyle type="text/css " >
/*重置樣式*/
* {邊距:0；填充:0；斷字:全斷；}
正文{
背景:# fff
顏色:# 000000；
字體:12px/1.6 em Helvetica，Arial，無襯線；
左邊距:0px
邊距-頂部:0px
右邊距:0px
邊距-底部:0px
}
h1，h2，h3，h4，h5，h6 { font-size:1em；}
a { color:# 0287 ca；文字-裝飾:無；}
a:hover { text-decoration:下劃線；}
ul，李{列表式:無；}
fieldset，img { border:none；}
圖例{顯示:無；}
em，strong，cite，th { font-style:normal；字體粗細:正常；}
input，textarea，select，button { font:12px Helvetica，Arial，sans-serif；}
表{ border-collapse:collapse；}
html { overflow:-moz-scroll bars-vertical；}/*總是顯示Firefox滾動條*/
/* iFocus風格*/
# ifocus { width:650 px；身高:245px邊距:0pxborder:1px solid # dede de；背景:# F8F8F8}
# ifocus _ pic { display:inline；位置:相對；浮動:左；寬度:540px身高:225px溢出:隱藏；保證金:10px 0 0 10px；}
# ifocus _ piclist { position:absolute；}
# ifocus _ piclist Li { width:550 px；身高:225px溢出:隱藏；}
# ifocus _ piclist img { width:550 px；身高:225px}
# ifocus _ BTN { display:inline；浮動:對；寬度:91px；邊距:9px 9px 0 0}
#ifocus_btn李{ width:91px；高度:57px光標:指針；不透明度:0.5；-moz-不透明度:0.5；濾鏡:alpha(不透明度= 50)；}
# ifocus _ BTN img { width:75px；高度:45px保證金:7px 0 0 11px；}
#ifocus_btn。當前{ background:URL(img/ifocus _ BTN _ BG . gif)無重復；不透明度:1；-moz-opacity:1；濾鏡:alpha(不透明度= 100)；}
# ifocus _ op div { position:absolute；左:0；底部:0；寬度:545px高度:35px背景:# 000；不透明度:0.5；-moz-不透明度:0.5；濾鏡:alpha(不透明度= 50)；}
# ifocus _ tx { position:absolute；左:8px底部:8px顏色:# FFF；}
#ifocus_tx。正常{顯示:無；}
& lt/style & gt；
& ltscript type = " text/JavaScript " & gt；
函數$(id){ return document . getelementbyid(id)；}
函數addLoadEvent(func){
var oldonload = window.onload
if (typeof window.onload！= '函數'){
window.onload = func
}否則{
window.onload = function(){
oldonload()；
func()；
}
}
}
函數moveElement(elementID，final_x，final_y，interval) {
如果(！document.getElementById)返回false
如果(！document . getelementbyid(elementID))返回false
var elem = document . getelementbyid(element id)；
if (elem.movement) {
clear time out(elem . movement)；
}
如果(！elem.style.left) {
elem . style . left = " 0px "；
}
如果(！elem.style.top) {
elem . style . top = " 0px "；
}
var xpos = parse int(elem . style . left)；
var ypos = parse int(elem . style . top)；
if(xpos = = final _ x & amp；& ampypos == final_y) {
返回true
}
如果(xpos & ltfinal_x) {
var dist = math . ceil((final _ x-xpos)/10)；
xpos = xpos+dist；
}
if(xpos & gt；final_x) {
var dist = math . ceil((xpos-final _ x)/10)；
xpos = xpos-dist；
}
if(ypos & lt；final_y) {
var dist = math . ceil((final _ y-ypos)/10)；
ypos = ypos+dist；
}
if(ypos & gt；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 = " move element("+elementID+" '，"+final_x+"，"+final_y+"，"+interval+")"；
elem.movement = setTimeout(重復，間隔)；
}
函數classNormal(iFocusBtnID，iFocusTxID){
var iFocusBtns= $(iFocusBtnID)。getElementsByTagName(' Li ')；
var iFocusTxs = $(iFocusTxID)。getElementsByTagName(' Li ')；
for(var I = 0；我& ltiFocusBtns.lengthi++) {
iFocusBtns[i]。className = ' normal
iFocusTxs[i]。className = ' normal
}
}
函數classCurrent(iFocusBtnID，iFocusTxID，n){
var iFocusBtns= $(iFocusBtnID)。getElementsByTagName(' Li ')；
var iFocusTxs = $(iFocusTxID)。getElementsByTagName(' Li ')；
iFocusBtns[n]。className= '當前'；
iFocusTxs[n]。className= '當前'；
}
函數iFocusChange() {
如果(！$('ifocus '))返回false
$('ifocus ')。onmouseover = function(){ atuokey = true }；
$('ifocus ')。onmouseout = function(){ atuokey = false }；
var iFocusBtns = $('ifocus_btn ')。getElementsByTagName(' Li ')；
var list length = ifocusbtns . length；
iFocusBtns[0]。onmouseover = function() {
moveElement('ifocus_piclist '，0，0，5)；
classNormal('ifocus_btn '，' ifocus _ tx ')；
classCurrent('ifocus_btn '，' ifocus_tx '，0)；
}
if(list length & gt；=2) {
iFocusBtns[1]。onmouseover = function() {
moveElement('ifocus_piclist '，0，-225，5)；
classNormal('ifocus_btn '，' ifocus _ tx ')；
classCurrent('ifocus_btn '，' ifocus_tx '，1)；
}
}
if(list length & gt；=3) {
iFocusBtns[2]。onmouseover = function() {
moveElement('ifocus_piclist '，0，-450，5)；
classNormal('ifocus_btn '，' ifocus _ tx ')；
classCurrent('ifocus_btn '，' ifocus_tx '，2)；
}
}
if(list length & gt；=4) {
iFocusBtns[3]。onmouseover = function() {
moveElement('ifocus_piclist '，0，-675，5)；
classNormal('ifocus_btn '，' ifocus _ tx ')；
classCurrent('ifocus_btn '，' ifocus_tx '，3)；
}
}
}
setInterval(' auto focus()'，3500)；
var atuokey = false
函數自動聚焦(){
如果(！$('ifocus '))返回false
if(atuokey)返回false
var focusBtnList = $('ifocus_btn ')。getElementsByTagName(' Li ')；
var list length = focusbtnlist . length；
for(var I = 0；我& lt列表長度；i++) {
if (focusBtnList[i].var current num = I；
}
if(current num = = 0 & amp；& amplistLength！=1 ){
moveElement('ifocus_piclist '，0，-225，5)；
classNormal('ifocus_btn '，' ifocus _ tx ')；
classCurrent('ifocus_btn '，' ifocus_tx '，1)；
}
if(current num = = 1 & amp；& amplistLength！=2 ){
moveElement('ifocus_piclist '，0，-450，5)；
classNormal('ifocus_btn '，' ifocus _ tx ')；
classCurrent('ifocus_btn '，' ifocus_tx '，2)；
}
if(current num = = 2 & amp；& amplistLength！=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(current num = = 1 & amp；& amplistLength==2 ){
moveElement('ifocus_piclist '，0，0，5)；
classNormal('ifocus_btn '，' ifocus _ tx ')；
classCurrent('ifocus_btn '，' ifocus_tx '，0)；
}
if(current num = = 2 & amp；& amplistLength==3 ){
moveElement('ifocus_piclist '，0，0，5)；
classNormal('ifocus_btn '，' ifocus _ tx ')；
classCurrent('ifocus_btn '，' ifocus_tx '，0)；
}
}
addLoadEvent(iFocusChange)；
& lt/script & gt；
& lt/head & gt；
& ltbody & gt
& ltbr/>；
& ltdiv align="center " >
& ltdiv id="ifocus " >
& ltdiv id="ifocus_pic " >
& ltdiv id = " ifocus _ piclist " style = " left:0；頂部:0；"& gt
& ltul & gt
& lt李& gt& lta href="#" target="_blank " >& ltimg src = "/edu/img/js/200909/1 . jpg " alt = "武林三國" border = " 0 "/& gt；& lt/a & gt；& lt/李& gt
& lt李& gt& lta href="#" target="_blank " >& ltimg src = "/edu/img/js/200909/2 . jpg " alt = "武林英雄" border = " 0 "/& gt；& lt/a & gt；& lt/李& gt
& lt李& gt& lta href="#" target="_blank " >& ltimg src = "/edu/img/js/200909/3 . jpg " alt = " business tycoon " border = " 0 "/& gt；& lt/a & gt；& lt/李& gt
& lt李& gt& lta href="#" target="_blank " >& ltimg src = "/edu/img/js/200909/4 . jpg " alt = "帝國遠征" border = " 0 "/& gt；& lt/a & gt；& lt/李& gt
& lt/ul & gt；
& lt/div & gt；
& ltdiv id = " ifocus _ opdiv " & gt& lt/div & gt；
& ltdiv id = " ifocus _ tx " & gt
& ltul & gt
& lt李class= "當前" >2008年排名第壹的網頁遊戲
& lt李class = " normal " & gt2009年最新的網頁遊戲
& lt李class = " normal " & gt商業大亨，挑戰億萬富翁
& lt李class = " normal " & gt壹場不得不在2009年上演的帝國遠征
& lt/ul & gt；
& lt/div & gt；
& lt/div & gt；
& ltdiv id="ifocus_btn " >。
& ltul & gt
& lt李class= "當前" >& ltimg src = "/edu/img/js/200909/s 1 . jpg " alt = " "/& gt；& lt/李& gt
& lt李class = " normal " & gt& ltimg src = "/edu/img/js/200909/S2 . jpg " alt = " "/& gt；& lt/李& gt
& lt李class = " normal " & gt& ltimg src = "/edu/img/js/200909/S3 . jpg " alt = " "/& gt；& lt/李& gt
& lt李class = " normal " & gt& ltimg src = "/edu/img/js/200909/S4 . jpg " alt = " "/& gt；& lt/李& gt
& lt/ul & gt；
& lt/div & gt；
& lt/div & gt；
& lt/div & gt；
& lt/body & gt；
& lt/html & gt；
換個圖片鏈接，自己定尺寸~ ~