实现轮播图
HTML：
<div id="imagegallery">
<a href="images/1.jpg" title="美女A">
<img src="images/1-small.jpg" width="100px" alt="美女1" />
</a>
<a href="images/2.jpg" title="美女B">
<img src="images/2-small.jpg" width="100px" alt="美女2" />
</a>
<a href="images/3.jpg" title="美女C">
<img src="images/3-small.jpg" width="100px" alt="美女3" />
</a>
<a href="images/4.jpg" title="美女D">
<img src="images/4-small.jpg" width="100px" alt="美女4" />
</a>
</div>
<div style="clear:both"></div>
<img id="image" src="images/placeholder.png" alt="" width="450px" />
<p id="des">
css样式
body {
font-family: "Helvetica","Arial",serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
}
#imagegallery a {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery a img {
border: 0;
}
jquery：
var imagegallery = document.getElementById('imagegallery');
var links = imagegallery.getElementsByTagName('a');
for(var i = 0; i< links.length; i++) {
var link = links[i];
link.onclick=function() {
var image = document.getElementById('image');
image.src = this.href;
var des = document.getElementById('des');
des.innerText = this.title;
return false;
}
}
