动感超强的JS图片轮换特效

<？xml version="1.0" encoding="gb2312"？> <！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" lang="gb2312"> <head> <title>动感超强的JS图片特效_脚本之家</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="generator" content="editplus" /> <meta name="author" content="eLore" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> * { margin:0; padding:0; } body { margin:5px auto; text-align:center; background:#f0f0f0; } img { margin:0; border:0; padding:0; } #eLore { position:relative; margin:0 auto; width:800px; height:339px; } #eLore_wrap { position:relative; margin:0 auto; overflow:hidden; width:800px; height:339px; background:#369; } #eLore .eLore_img { position:absolute; top:0; width:120px; height:339px; overflow:hidden; font-size:50px; line-height:340px; } #eLore .eLore_out { position:absolute; top:0; width:120px; height:339px; overflow:hidden; font-size:10px; line-height:340px; } </style> </head> <body>Loading...<script type="text/javascript"> //<[CDATA[ var eLore_wrap = document.getElementById（"eLore_wrap"）; var aImg = new Array（"http://www.jb51.net/upload/112_jpg_thumb.jpg","http://www.jb51.net/upload/123_jpg_thumb.jpg","http://www.jb51.net/upload/112_jpg_thumb.jpg", "http://www.jb51.net/upload/123_jpg_thumb.jpg"）; var iImg = 0; var iA = 0; window.onload = function（） { eLore_createD（）; } function eLore_createD（） { if （iImg==10） { eLore_wrap.innerHTML = ""; iImg = 0; } if （iImg==0） { eLore_wrap.innerHTML += "H
"; } /* var sDiv = "" + iImg++ + "
"; eLore_wrap.innerHTML += sDiv; */ var oDiv = document.createElement（"div"）; oDiv.className = "eLore_img"; oDiv.style.right = iImg*80 +"px"; oDiv.style.background = "url（" + aImg[iA] + "） -720px top no-repeat"; //oDiv.appendChild（document.createTextNode（iImg））; eLore_wrap.appendChild（oDiv）; iImg++; eLore_move（）; } function eLore_move（）{ var oDiv = eLore_wrap.getElementsByTagName（"div"）; for （var i=1; i<oDiv.length; i++） { var iBgpx = parseInt（oDiv[i].style.backgroundPosition）; if （iBgpx<i*80-760） { var iMovePx = Math.floor（（760-i*80+iBgpx）/15）; oDiv[i].style.backgroundPosition = iBgpx - iMovePx + "px top"; } else { oDiv[i].style.backgroundPosition = "-" + （760- i*80） + "px top"; } } if （iImg<10） { setTimeout（"eLore_createD（）","50"）; } else if （parseInt（oDiv[10].style.backgroundPosition）<40） { setTimeout（"eLore_move（）","50"）; } else { iA = ++iA==aImg.length ？ 0 : iA; setTimeout（"eLore_createD（）","2000"）; } } //]]> </script> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]