您的位置：首页 > Web前端 > JQuery

jQuery 实现图片轮播

2012-02-16 23:20 681 查看 
<!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="http://ajax.googleapis.com/ajax/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="http://hyipaying.com/images/demo/2010/anyixuan01.jpg" alt="" />
<div class="desc">
<div class="block">
<h2>安以轩1</h2>
<p>安以轩1，希望大家喜欢！<a href="http://hyipaying.com/">jQuery 学习</a>站，将继续努力为大家提供帮助，感谢大家支持！</p>
</div>
</div>
</div>
<div class="thumb">
<ul>
<li>
<a href="http://hyipaying.com/images/demo/2010/anyixuan01.jpg"><img src="http://hyipaying.com/images/demo/2010/anyixuan1.jpg" alt="安以轩" /></a>
<div class="block">
<h2>安以轩1</h2>
<p>安以轩1，希望大家喜欢！<a href="http://hyipaying.com/">jQuery 学习</a>站，将继续努力为大家提供帮助，感谢大家支持！</p>
</div>
</li>
<li>
<a href="http://hyipaying.com/images/demo/2010/anyixuan02.jpg"><img src="http://hyipaying.com/images/demo/2010/anyixuan2.jpg" alt="安以轩" /></a>
<div class="block">
<h2>安以轩2</h2>
<p>安以轩2，希望大家喜欢！<a href="http://hyipaying.com/">jQuery 学习</a>站，将继续努力为大家提供帮助，感谢大家支持！</p>
</div>
</li>
<li>
<a href="http://hyipaying.com/images/demo/2010/anyixuan03.jpg"><img src="http://hyipaying.com/images/demo/2010/anyixuan3.jpg" alt="安以轩" /></a>
<div class="block">
<h2>安以轩3</h2>
<p>安以轩3，希望大家喜欢！<a href="http://hyipaying.com/">jQuery 学习</a>站，将继续努力为大家提供帮助，感谢大家支持！</p>
</div>
</li>
<li>
<a href="http://hyipaying.com/images/demo/2010/anyixuan04.jpg"><img src="http://hyipaying.com/images/demo/2010/anyixuan4.jpg" alt="安以轩" /></a>
<div class="block">
<h2>安以轩4</h2>
<p>安以轩4，希望大家喜欢！<a href="http://hyipaying.com/">jQuery 学习</a>站，将继续努力为大家提供帮助，感谢大家支持！</p>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery class div float 2010 function
相关文章推荐
新的分享
章节导航