jquery实现图片画廊切换

最新推荐文章于 2024-08-15 09:56:34 发布

BenjaminDeng

最新推荐文章于 2024-08-15 09:56:34 发布

阅读量1k

点赞数

分类专栏： html 文章标签：相册 gallery 图片切换 button

html 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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>