这样的图片展示怎么做？

本帖最后由 tomhahaha 于 2010-03-25 02:47:58 编辑

解决方案 »

  1.   

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

  2.   

    <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>
      

  3.   

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