<转>url:http://www.cnblogs.com/rubylouvre/archive/2009/09/30/1576699.html#index5
效果图:
自动轮换图片,点击数字切换,并显示文字
<!doctype html> <title>javascript图片轮换 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript图片轮换 by 司徒正美" /> <meta name="description" content="javascript图片轮换 by 司徒正美" /> <style type="text/css"> #album{/*相册*/ position:relative; 400px; height:300px; border:10px solid #EFEFDA;/*相册边框*/ overflow:hidden;/*隐藏tip*/ } #album dt {/*相册的内容显示区，包含相片与下面的翻页栏*/ margin:0;/*去除浏览器的默认设置*/ padding:0;/*去除浏览器的默认设置*/ 400px; height:300px; overflow:hidden;/*重点，让每次只显示一张图片*/ } #album img { border:0px; } #album dd {/*翻页栏*/ position:absolute; right:0px; bottom:10px; } #album a { display:block;/*让其拥有盒子模型*/ float:left; margin-right:10px;/*错开格子*/ 15px;/*呈正方形*/ height:15px; line-height:15px; text-align:center;/*居中显示*/ text-decoration:none;/*消除下划线*/ color:#808080; background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0; } #album a:hover ,#album a.hover{ color:#F8F8F8; background-position:0 0; } </style> <h4>javascript图片轮换 by 司徒正美</h4> <dl id="album"> <dt> <img id="index1" alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" /> <img id="index2" alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" /> <img id="index3" alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" /> <img id="index4" alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" /> <img id="index5" alt="绿·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" /> <img id="index6" alt="又是收获的季节" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" /> </dt> <dd> <a href="#index1">1</a><a href="#index2">2</a><a href="#index3">3</a><a href="#index4">4</a><a href="#index5">5</a><a href="#index6">6</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;";//修正图片的位置错误问题 var tip = document.createElement("dd"); tip.style.cssText = "position:absolute;bottom:0;height:20px;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(/,$/,"")+"})"); //相当于switch-case代码块 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;//下一次移动的距离 if(el.bottom >= 0){ el.style.bottom = "0px"; }else{ setTimeout(arguments.callee,25);//每移动一次停留25毫秒 } },25) })() } } window.onload = function(){ try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}; imageRotater("album"); } </script>