html怎么加入桌面图片,html+css实现图片展示桌面

MyHtml.html

*{margin:0px 0px; padding:0px 0px;}

body{background:url("img/bg.jpg");position:relative;}

#main{width:1186px;height:788px;

border:1px solid #66FF33;margin:50px auto;box-shadow:1px 1px 8px #FFCC66;border-radius:9px;background:rgba(234,234,234,0.6);

position:relative;}

#main ul{display:block;}

#main ul li{list-style:none;margin:15px;width:260px;height:160px;

border-radius:7px;box-shadow:1px 1px 6px #000;overflow:hidden;

border:2px solid #FFFF33;float:left;}

#main ul li:hover img{transform:scale(1.3);transition:transform 800ms;}

#main ul li img{display:block;width:260px;height:160px;}

#gray{width:650px;height:406px;POSITION:absolute;top:173px;

left:260px;

border:3px solid rgba(255,255,255,.5);box-shadow:0px 0px 24px #000;border-radius:6px;

background:rgba(0,0,0,0.6);display:none;}

#gray .IMG{width:600px;height:346px;margin:30px auto;opacity:0.9;

#000;border-radius:6px;position:relative;overflow:HIDDEN;}

#gray .IMG img{width:600px;height:346px;position:relative;

position:absolute;left:0px;top:0px;}

#gray .IMG:hover img{transform:scale(1.3);transition:transform 800ms;}

.l-but{width:41px;height:71px;position:absolute;

/*border:1px solid #FFF;*/top:330px;border-radius:6px;

left:200px;background:url("img/arrow.png");

background-position:-85px center;display:none;}

.r-but{width:41px;height:71px;position:absolute;

/*border:1px solid #FFF;*/top:330px;left:930px;

background:url("img/arrow.png");border-radius:6px;

background-position:-123px center;display:none;}

.l-but:hover{background-position:-1px center;}

.r-but:hover{background-position:-41px center;}

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

var i =0;

$("#main ul li").click(function(){

$("#gray").show();

$(".l-but").show();

$(".r-but").show();

/*var _bigSrc=$(this).find("img").attr("src");

alert(_bigSrc);

$("#gray .IMG img").attr("src",_bigSrc);*/

index=$(this).index();

/*alert(index);*/

i=index;

$("#gray .IMG img").eq(i).fadeIn().siblings().fadeOut();

/*alert(i);*/

});

$(".r-but").click(function(){

/*

index++;

alert(index);

_bigSrc=$(#Main ul li).eq().find("img").attr("bigSrc");

$(".gray .IMG img .BIGIMG").attr("src",_bigSrc);

*/

i++;

if(i<16 && i>0){

/*$(".pic img").eq(i).show().siblings().hide();*/

$("#gray .IMG img").eq(i).fadeIn().siblings().fadeOut();

/*alert(i);*/

}else{

i=0;

$("#gray .IMG img").eq(i).fadeIn().siblings().fadeOut();

}14-12-10

});

$(".l-but").click(function(){

i--;

if(i<16 && i>0){

/*$(".pic img").eq(i).show().siblings().hide();*/

$("#gray .IMG img").eq(i).fadeIn().siblings().fadeOut();

/*alert(i);*/

}else{

i=16;

$("#gray .IMG img").eq(i).fadeIn().siblings().fadeOut();

}

});

$("#gray").click(function(){

$(this).hide();

$(".l-but").hide();

$(".r-but").hide();

});