php图片点击查看大图,jQuery点击小图看大图，大图查看内容详情所有图片

jQuery点击小图看大图，大图查看内容详情所有图片：

html代码如下：

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

×

<

>

CSS代码如下：

* {

margin:0;

padding:0;

}

body {

overflow-x:hidden;

}

.gallery {

width:950px;

margin:10px auto;

border:1px solid #000;

overflow:hidden;

padding:20px;

border-radius:15px;

box-shadow:1px 2px 3px black;

}

.gallery ul {

list-style:none;

}

.gallery ul li {

float:left;

width:160px;

height:86px;

margin-right:30px;

margin-bottom:30px;

cursor:pointer;

padding:5px;

}

.BLACKCOVER {

width:100%;

height:100%;

background-color:black;

opacity:0.6;

position:fixed;

top:0;

left:0;

display:none;

}

.bigShow {

position:absolute;

top:38.2%;

left:50%;

width:560px;

height:300px;

padding:20px;

background:white url(juhua.gif) no-repeat center center;

margin-top:-150px;

margin-left:-280px;

box-shadow:1px 2px 3px black;

border-radius:15px;

display:none;

}

.bigShow span.close {

position:absolute;

width:30px;

height:30px;

background-color:black;

color:white;

border:1px solid #000;

right:-15px;

top:-15px;

border-radius:50%;

font-size:30px;

line-height:30px;

text-align:center;

cursor:pointer;

}

.bigShow img {

display:none;

}

.bigShow span.leftBtn {

position:absolute;

width:60px;

height:60px;

top:50%;

left:-30px;

margin-top:-30px;

background-color:#38C9C3;

font-size:60px;

text-align:center;

line-height:60px;

border-radius:50%;

cursor:pointer;

}

.bigShow span.rightBtn {

position:absolute;

width:60px;

height:60px;

top:50%;

right:-30px;

margin-top:-30px;

background-color:#38C9C3;

font-size:60px;

text-align:center;

line-height:60px;

border-radius:50%;

cursor:pointer;

}jquery代码如下：

$(document).ready(function() {

var $BLACKCOVER = $(".BLACKCOVER");

var $bigShow = $(".bigShow");

var $bigImg = $bigShow.children("img");

var $leftBtn = $(".leftBtn");

var $rightBtn = $(".rightBtn");

var $lis = $(".gallery ul li");

var nowimg = 0;

$(".gallery>ul>li").click(function() {

//让大黑布展示：

$BLACKCOVER.fadeIn();

//让大图显示

$bigShow.show();

var URL = $(this).attr("data-large");

nowimg = $(this).index();

$.get(URL, function(data) {

//图片已经完整请求之后，做的事情！

//请求之后做的事情

//里面不用data参数。

$bigImg.attr("src", URL);

$bigImg.fadeIn();

});

//让大图的src，变成你点击的li里面的data-large属性：

});

//关闭业务

$(".close , .BLACKCOVER").click(function() {

$BLACKCOVER.fadeOut();

$bigShow.hide();

$bigImg.hide();

});

$(".rightBtn").click(function() {

nowimg++;

if (nowimg > 9) {

nowimg = 0;

}

$bigShow.animate({

"left": -560

}, 400, function() {

$bigImg.hide();

$(this).css("left", 3000);

$(this).animate({

"left": "50%"

}, 400);

//请求新的图片

var URL = $lis.eq(nowimg).attr("data-large");

$.get(URL, function(data) {

//图片已经完整请求之后，做的事情！

//请求之后做的事情

//里面不用data参数。

$bigImg.show();

$bigImg.attr("src", URL);

});

});

});

});