html+css实现图片展示桌面

浏览数：31 / 时间：2015年06月09日

<strong><span style="font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<style type="text/css">
		*{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;}
	</style>
  </head>
  
  <body>
    <div id="main">
		<ul>
			<li><img src="img/1.jpg" /></li>
			<li><img src="img/2.jpg"/></li>
			<li><img src="img/3.jpg"/></li>
			<li><img src="img/4.jpg"/></li>
			<li><img src="img/8.jpg"/></li>
			<li><img src="img/11.jpg"/></li>
			<li><img src="img/13.jpg"/></li>
			<li><img src="img/23.jpg"/></li>
			<li><img src="img/b.jpg"/></li>
			<li><img src="img/f.jpg"/></li>
			<li><img src="img/h.jpg"/></li>
			<li><img src="img/u.jpg"/></li>
			<li><img src="img/15.jpg"/></li>
			<li><img src="img/16.jpg"/></li>
			<li><img src="img/3.jpg"/></li>
			<li><img src="img/11.jpg"/></li>
		</ul>
	<div>
	<div id="gray">
		<div class="IMG">
			<img src="img/11.jpg"/>
			<img src="img/2.jpg"/>
			<img src="img/3.jpg"/>
			<img src="img/4.jpg"/>
			<img src="img/8.jpg"/>
			<img src="img/11.jpg"/>
			<img src="img/13.jpg"/>
			<img src="img/23.jpg"/>
			<img src="img/b.jpg"/>
			<img src="img/f.jpg"/>
			<img src="img/h.jpg"/>
			<img src="img/u.jpg"/>
			<img src="img/15.jpg"/>
			<img src="img/16.jpg"/>
			<img src="img/3.jpg"/>
			<img src="img/1.jpg"/>
		</div>
	</div>
	<div class="r-but"></div>
    <div class="l-but"></div>
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript">
		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();
		});
	</script>
  </body>
</html>
</span></strong>