使用html,css製作的幻燈片
html部分
<body>
<div class="slide">
<div class="slide-img">
<ul >
<li id="m1"><img src="../images/pic05.jpg" /> </li>
<li id="m2"><img src="../images/pic06.jpg" /> </li>
<li id="m3"><img src="../images/pic09.jpg" /> </li>
</ul>
</div>
<div class="slide-items">
<ul >
<li><a href="#m1"><img src="../images/pic05.jpg" width="50px" height="50px"/> </a></li>
<li><a href="#m2"><img src="../images/pic06.jpg" width="50px" height="50px"/> </a></li>
<li><a href="#m3"><img src="../images/pic09.jpg" width="50px" height="50px"/> </a></li>
</ul>
</div>
</div>
</body>
css部分
<style type="text/css">
body,div,ul,li,a{
margin: 0;
padding: 0;
}
.slide-img{
width: 450px;
height: 450px;
overflow: hidden;
}
li{
list-style: none;
float: left;
}
.slide-img li{
width: 450px;
height: 450px;
}
.slide-items{
margin-top: 20px;
}
.slide-items li{
text-align: center;
margin-left: 10px;
}
.slide-items li a{
width: 50px;
height: 50px;
display: block;
}
</style>
由於個人問題,只能附圖了。渣渣我會加油的!!!