这样的图片展示怎么做？

要做一个产品图片展示，左边是大图（可以轮显），下面是文字说明；右边是两列缩小图，鼠标指到某个小图，左边显示其大图。
其实网上这样的代码非常多，但不是JS文件太大，就是自己修改起来太麻烦，还有的限制了图片的数量，4小图、6小图、9小图的很多，但我需要的不同产品，图片的数量有多有少。所以找了好几天，一直没找到合适的。
我刚学，什么都不懂，哈哈，希望哪位能给个简单、好改的代码，非常感谢！！！
我要的很象酒店网站里面的酒店图片展示那个效果。我无意中看到www.HRS.com （全球订房网）里面酒店的“酒店信息/图片”，就是我要的那个样子！

5 个解决方案

#1

说的跟这个图片变换类似
参考一下

#2

这个效果我以前看过，但不是我所需要的。谢谢了！

#3

http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html 挺好的

#4




<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>123123</title>

<style type="text/css">

body,div,ul,li { margin:0; padding:0;}

#slide {position:relative; width:740px; height:240px; margin:20px auto;}

#pic_list { position:absolute; left:0; bottom:0; width:100%; list-style: none; overflow:hidden; z-index:2;}

#pic_list li { float:left; width:100px; height:52px; padding-top:10px;}

#pic_list li img { position:absolute; top:18px; width:65px; height:35px; margin:0 20px; border:1px solid #fff;}

#this_pic { position:absolute; width:100%; height:100%; border:none;}

#transparence { position:absolute; left:0; bottom:0; width:100%; height:50px; background:#000; z-index:1; border-top:1px solid #fff;}

</style>

<script src="jquery-1.3.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(function (){

$('#pic_list img').mouseover(function(){

if($('#this_pic').attr('src') == $(this).attr('src')) return;

$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$(this).attr('src'));

$('#this_a').attr('href',$(this).parents('a').attr('href'));

$('#this_a').attr('title',$(this).parents('a').attr('title'));

$(this).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);

$(this).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);

$(this).animate({top:0},500).css('opacity','1');

});

});

$(function(){

$('#transparence').css('opacity','0.4');

$('#pic_list img').css({'opacity':'0.6'});

$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});

$('#pic_list a').click(function(){return false});

});

</script>

</head>

<body>

<div id="slide">

<a href="#" id="this_a"><img src="http://www.jzxue.com/System/uploads/allimg/090622/1.jpg" id="this_pic" /></a>

<ul id="pic_list">

<li><a href="http://www.jzxue.com"><img src="http://www.jzxue.com/System/uploads/allimg/090622/1.jpg" alt="" /></a></li>

<li><a href="http://www.5719.cn"><img src="http://www.jzxue.com/System/uploads/allimg/090622/2.jpg" alt="" /></a></li>

<li><a href="http://www.163.com"><img src="http://www.jzxue.com/System/uploads/allimg/090622/3.jpg" alt="" /></a></li>

<li><a href="http://www.baidu.com"><img src="http://www.jzxue.com/System/uploads/allimg/090622/4.jpg" alt="" /></a></li>

<li><a href="http://www.jzxue.com"><img src="http://www.jzxue.com/System/uploads/allimg/090622/5.jpg" alt="" /></a></li>

</ul>

<span id="transparence"></span>

</div>

<a href="http://www.jzxue.com">231</a>

</body>

</html>

#5

应用JQuery可以简单的实现你要的效果!

#1