<title>javascript圖片輪換</title> <style type="text/css"> #album{ position:relative; width:400px; height:300px; border:10px solid #EFEFDA; overflow:hidden; } #album dt { margin:0; padding:0; width:400px; height:300px; overflow:hidden; } #album img { border:2px solid #000; } #album dd { position:absolute; right:0px; bottom:10px; } #album a { display:block; float:left; margin-right:10px; width:15px; height:15px; line-height:15px; text-align:center; text-decoration:none; color:#808080; background:transparent url(/jscss/demoimg/200910/o_button.gif) no-repeat -15px 0; } #album a:hover ,#album a.hover{ color:#F8F8F8; background-position:0 0; } </style>
<dl id="album"> <dt> <img id="index1" alt=余秋的黃昏" src="/jscss/demoimg/wall3.jpg" /> <img id="index2" alt="美麗歐洲" src="/jscss/demoimg/wall4.jpg" /> <img id="index3" alt="巨石陣的神秘" src="/jscss/demoimg/wall5.jpg" /> </dt> <dd> <a href="#index1">1</a><a href="#index2">2</a><a href="#index3">3</a> </dd> </dl> <script type="text/javascript"> function imageRotater(id){ var cases = "", album = document.getElementById(id), images = album.getElementsByTagName("img"), links = album.getElementsByTagName("a"), dt = album.getElementsByTagName("dt")[0], length = images.length, aIndex = 1, aBefore = length; for(var i=0;i< length;i++){ cases += images[i].id + ':"'+images[i].getAttribute("src")+'",' } images[0].style.cssText = "position:absolute;top:0;left:0;";//修正圖片位置錯(cuò)誤 var tip = document.createElement("dd"); tip.style.cssText = "position:absolute;bottom:0;height:20px;width:380px;padding:10px;color:#fff;background:#fff;"; album.insertBefore(tip,dt.nextSibling); if(!+"\v1"){ tip.style.color = "#369"; tip.style.filter = "alpha(opacity=67)" }else{ tip.style.cssText += "background: rgba(164, 173, 183, .65);" } cases = eval("({"+cases.replace(/,$/,"")+"})"); for(var i=0;i<length;i++){ links[i].onclick = function(e){ e =e || window.event; var index = this.toString().split("#")[1]; aIndex = index.charAt(index.length-1);//☆☆☆☆ images[0].src = cases[index]; tip.innerHTML = images[aIndex -1].getAttribute("alt"); !+"\v1" ?(e.returnValue = false) :(e.preventDefault()); } } var prefix = images[0].id.substr(0,images[0].id.length -1); (function(){ setTimeout(function(){ if(aIndex > length){ aIndex = 1; } images[0].src = cases[prefix+aIndex]; tip.innerHTML = images[aIndex -1].getAttribute("alt"); tip.style.bottom = "-40px"; links[aBefore-1].className = ""; links[aIndex-1].className = "hover"; aBefore = aIndex; aIndex++; move(tip); setTimeout(arguments.callee,1500) },1500) })() var move = function(el){ var begin = parseFloat(el.style.bottom), speed = 1; el.bottom = begin; (function(){ setTimeout(function(){ el.style.bottom = el.bottom + speed + "px"; el.bottom += speed; speed *= 1.5;//下一次移動(dòng)的距離 if(el.bottom >= 0){ el.style.bottom = "0px"; }else{ setTimeout(arguments.callee,23); } },25) })() } } window.onload = function(){ try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}; imageRotater("album"); } </script>