jquery实现图片画廊切换
来源：互联网 发布：大数据杂志 编辑：程序博客网 时间：2024/06/09 17:41
<!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>
