当前位置: 编程技术>jquery
jQuery 图片轮播的示例代码
来源: 互联网 发布时间：2014-09-03
本文导语: 本节内容： jQuery 图片轮播 例子： 代码示例: jQuery 图片轮播 body { background-color:#EEE; margin:0; padding:0; font-family:微软雅黑; ...
本节内容：
jQuery 图片轮播
例子：
代码示例:
jQuery 图片轮播
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;}
$(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;
});
});
jQuery 图片轮播
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。