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

jquery实现图片画廊切换

2013-04-22 11:36 274 查看

<!DOCTYPE html>
<html>
<head>
<title>gallery</title>
<script src="jq/jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
//調整后片大小后 CSS 和 jQuery（一个 50 一个 350）里面的尺寸要對應。
jQuery(function($) {
$("#gallery").append('<span class="title">' + $(this).find("li.active img").attr("alt") + '</span>').find("li").on("mouseover", function() {
if(!$(this).hasClass("active")) {
$(this).animate({opacity: 1}, "fast");
}
}).on("mouseout", function() {
if(!$(this).hasClass("active")) {
$(this).animate({opacity: 0.7}, "fast");
}
}).on("click", function() {
if(!$(this).hasClass("active") && !$("li.active:animated").length) {
$("#gallery .title").fadeOut("fast");
$("li.active").removeClass("active").animate({
width: 50, opacity: 0.7
});
// when click img,img's size is changed
$(this).addClass("active").animate({
width: 350, opacity: 1
}, function() {
$("#gallery .title").css({
left: $(this).offset().left
- $("#gallery").offset().left
- parseInt($("#gallery").css("border-left-width"))
}).text($("#gallery li.active img")
.attr("alt")).fadeIn();
});
}
});
});
</script>
<style type="text/css">
#gallery {
list-style: none;
margin: 0;
padding: 0;
border: 5px solid #ccc;
width: 600px;/** width=当前顯示圖片大小+剩下隱藏的圖片大小(350+50*5)**/
height: 200px;
position: relative;
}
#gallery li {
width: 50px;/** width=隱藏的圖片的大小**/
height: 200px;
float: left;
overflow: hidden;
opacity: 0.7;
}
#gallery li.active {opacity: 1;}
#gallery li:first-child {width: 350px;}/** width=默認顯示第一個圖片顯示的大小**/
#gallery li img {width: 400px; height: 200px;}/** 圖片顯示的大小**/
#gallery .title {
width: 350px;/**標題寬度**/
text-align: center;/**標題位置**/
height: 30px;/**標題高度**/
line-height: 30px;
position: absolute;
bottom: 0;
left: 0;
background: #000;
color: #fff;
opacity: 0.7;
font-family: "Microsoft YaHei"/**標題字體**/
}
</style>
</head>
<body>
<ul id="gallery">
<li class="active"><img src="img/1.jpg" alt="picture1" /></li>
<li><img src="img/2.jpg" alt="picture2" /></li>
<li><img src="img/3.jpg" alt="picture3" /></li>
<li><img src="img/4.jpg" alt="picture4" /></li>
<li><img src="img/5.jpg" alt="picture5" /></li>
<li><img src="img/6.jpg" alt="picture6" /></li>
</ul>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 相册 gallery 图片切换 button

相关文章推荐

新的分享

章节导航