<!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; 500px; height:400px; border:2px solid #EFEFDA;/*相册边框*/ } #album dt {/*相册的内容显示区，包含相片与下面的翻页栏*/ margin:0;/*去除浏览器的默认设置*/ padding:0;/*去除浏览器的默认设置*/ 500px; height:400px; 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> <h2>javascript图片轮换</h4> <dl id="album"> <dt> <img id="index1" src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_6_600x1024.jpg" /> <img id="index2" src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_ooYBAFHjlzGIJCihAARx8LD6EP0AAAvjgNOhv4ABHII776.jpg" /> <img id="index3" src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_QQ%e5%9b%be%e7%89%8720160502191026.jpg" /> <img id="index4" src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_QQ%e5%9b%be%e7%89%8720160502191033.jpg" /> <img id="index5" src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_oYYBAFHjlzSIbAyvAASQp8-G3SoAAAvjgNWlJgABJC_096.jpg" /> <img id="index6" src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_QQ%e5%9b%be%e7%89%8720160502191020.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>
运行代码