<!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:500px;
height:400px;
border:2px solid #EFEFDA;/*相册边框*/
}
#album dt {/*相册的内容显示区，包含相片与下面的翻页栏*/
margin:0;/*去除浏览器的默认设置*/
padding:0;/*去除浏览器的默认设置*/
width: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;/*错开格子*/
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"
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>
运行代码