<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery 图片轮播</title>
<style type="text/css">
body {
background-color:#EEE;
margin:0;
padding:0;
font-family:微软雅黑;
}
h1{color:Green;}
#show{margin:0 auto;width:701px;}
.main{
background:#333;
color:#FFF;
float:left;
height:333px;
overflow:hidden;
position:relative;
width:500px;
}
.main .block{
background:#111;
border-top:1px solid #000;
width:100%;
}
.main h2{
font-size:18px;
margin:0 0 5px;
padding:5px;
}
.main p{
font-size:14px;
line-height:14px;
margin:0;
padding:5px;
}
.main .desc{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: none;
}
.main .block{
width: 100%;
background: #111;
border-top: 1px solid #000;
}
.thumb{
background:#f0f0f0;
border-right:1px solid #fff;
border-top:1px solid #ccc;
float:left;
width:200px;
}
.thumb img{
border:none;
float:left;
padding:5px;
}
.thumb ul {
margin: 0;
padding: 0;
list-style: none;
}
.thumb ul li{
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
float:left;
padding:2px 4px;
width:190px;
}
.thumb ul li:hover{
background:#ddd;
cursor:pointer;
}
.thumb ul li h2 {
font-size:14px;
margin: 5px 0;
}
.thumb ul li .block {
float: left;
margin-left: 10px;
margin-top:10px;
width: 60px;
}
.thumb ul li p{display: none;}
</style>
<script type="text/
javascript" src="/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".main .desc").show();
$(".main .block").animate({ opacity: 0.8 }, 1);
$(".thumb ul li").click(function () {
var alt = $(this).find("img").attr("alt");
var href = $(this).find("a").attr("href");
var desc = $(this).find(".block").html();
$(".main img").fadeOut(100, function () {
$(this).attr({ src: href, alt: alt })
.fadeIn(500);
});
$(".main .block").html(desc);
return false;
});
});
</script>
</head>
<body>
<h1>jQuery 图片轮播</h1>
<div id="show">
<div class="main">
<img src="/images/demo/2010/anyixuan01.jpg" alt="" />
<div class="desc">
<div class="block">
<h2>
脚本学堂1</h2>
<p>脚本学堂1，希望大家喜欢！<a href="http://jb200.com/">jQuery 学习</a>站，将继续努力为大家提供帮助，感谢大家支持！</p>
</div>
</div>
</div>
<div class="thumb">
<ul>
<li>
<a href="http://jb200.com/images/demo/2010/anyixuan01.jpg"><img src="http://jb200.com/images/demo/2010/anyixuan1.jpg" alt="脚本学堂" /></a>
<div class="block">
<h2>脚本学堂1</h2>
<p>脚本学堂1，希望大家喜欢！<a href="http://jb200.com/">jQuery 学习</a>站，将继续努力为大家提供帮助，感谢大家支持！</p>
</div>
</li>
<li>
<a href="http://jb200.com/images/demo/2010/anyixuan02.jpg"><img src="http://jb200.com/images/demo/2010/anyixuan2.jpg" alt="脚本学堂" /></a>
<div class="block">
<h2>脚本学堂2</h2>
<p>脚本学堂2，希望大家喜欢！<a href="http://jb200.com/">jQuery 学习</a>站，将继续努力为大家提供帮助，感谢大家支持！</p>
</div>
</li>
<li>
<a href="http://jb200.com/images/demo/2010/anyixuan03.jpg"><img src="http://jb200.com/images/demo/2010/anyixuan3.jpg" alt="脚本学堂" /></a>
<div class="block">
<h2>脚本学堂3</h2>
<p>脚本学堂3，希望大家喜欢！<a href="http://jb200.com/">jQuery 学习</a>站，将继续努力为大家提供帮助，感谢大家支持！</p>
</div>
</li>
<li>
<a href="http://jb200.com/images/demo/2010/anyixuan04.jpg"><img src="http://jb200.com/images/demo/2010/anyixuan4.jpg" alt="脚本学堂" /></a>
<div class="block">
<h2>脚本学堂4</h2>
<p>脚本学堂4，希望大家喜欢！<a href="http://jb200.com/">jQuery 学习</a>站，将继续努力为大家提供帮助，感谢大家支持！</p>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
