<!doctype html> <title>javascript图片轮换</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript图片轮换" /> <meta name="description" content="javascript图片轮换" /> <style type="text/css"> #album{/*相册*/ position:relative; width:400px; height:300px; border:10px solid #EFEFDA;/*相册边框*/ } #album dt {/*相册的内容显示区，包含相片与下面的翻页栏*/ margin:0;/*去除浏览器的默认设置*/ padding:0;/*去除浏览器的默认设置*/ width: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;/*错开格子*/ width: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> <h2>javascript图片轮换</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>
运行代码
JavaScript之图片轮换
原文：http://www.cnblogs.com/caidupingblogs/p/5498592.html
