<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<title>图片切换</title>
<script src="https://www.jb51.net/jquery-1.8.0.js" type="text/javascript"></script>
<link href="https://www.jb51.net/picchange.css" type="text/css" />
</head>
<body>
<div>
<div>
<img src="https://www.jb51.net/images/pic1.jpg" />
<img src="https://www.jb51.net/images/pic2.jpg" />
<img src="https://www.jb51.net/images/pic3.jpg" />
<img src="https://www.jb51.net/images/pic4.jpg" />
<img src="https://www.jb51.net/images/pic5.jpg" />
<img src="https://www.jb51.net/images/pic6.jpg" />
<img src="https://www.jb51.net/images/pic7.jpg" />
<img src="https://www.jb51.net/images/pic8.jpg" />
</div>
<div>
<a href="https://www.jb51.net/images/pic8.jpg" title="8">8</a> <a href="https://www.jb51.net/images/pic7.jpg" title="7">7</a> <a href="https://www.jb51.net/images/pic6.jpg" title="6"
>6</a> <a href="https://www.jb51.net/images/pic5.jpg" title="5">
5</a> <a href="https://www.jb51.net/images/pic4.jpg" title="4">4</a>
<a href="https://www.jb51.net/images/pic3.jpg" title="3">3</a> <a href="https://www.jb51.net/images/pic2.jpg"
title="2">2</a> <a href="https://www.jb51.net/images/pic1.jpg" title="1"
>1</a>
</div>
<div>
测试介绍文件了啊</div>
</div>
</body>
</html>
css的实现
复制代码 代码如下:
.picMain
{
margin: auto;
overflow: hidden;
width: 1000px;
height: 400px;
position: relative;
}
.picimg
{
width: 10000px;
height: 400px;
background-color: #000000;
position: absolute;
top: 0px;
}
.picRemark
{
position: absolute;
width: 500px;
height: 50px;
bottom: 0px;
left: 0px;
color: #FFFFFF;
text-indent: 2em;
}
.picRemark a
{
color: #FFFFFF;
text-decoration: none;
}
.picRemark a:hover
{
text-decoration: underline;
}
.picaction
{
position: absolute;
width: 1000px;
height: 50px;
background-color: #000000;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
overflow: auto;
bottom: 0px;
left: 0px;
text-align: right;
}
.picaction a
{
border: 1px solid #C0C0C0;
width: 30px;
height: 30px;
float: right;
line-height: 30px;
text-decoration: none;
text-align: center;
color: #FFFFFF;
font-weight: bold;
margin-top: 10px;
display: block;
margin-right: 10px;
}
.pic
{
width: 1000px;
height: 400px;
float: left;
}
.picselect
{
background-color: #919191;
}