图片展示效果（二）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>js图片展示效果</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/highslide-with-gallery.js"></script> <link rel="stylesheet" type="text/css" href="js/highslide.css" /> <script type="text/javascript"> hs.graphicsDir = 'js/graphics/'; hs.align = 'center'; hs.transitions = ['expand', 'crossfade']; hs.fadeInOut = true; hs.dimmingOpacity = 0.8; hs.outlineType = 'rounded-white'; hs.captionEval = 'this.thumb.alt'; hs.marginBottom = 105; hs.numberPosition = 'caption'; hs.addSlideshow({ interval: 5000, repeat: false, useControls: true, overlayOptions: { className: 'text-controls', position: 'bottom center', relativeTo: 'viewport', offsetY: -60 }, thumbstrip: { position: 'bottom center', mode: 'horizontal', relativeTo: 'viewport' } }); </script> </head> <body> <h1>js图片展示效果实例</h1> <p> </p> <p> </p> <div onclick="return hs.expand(this)"> <img src="images/gallery1.gif" alt="图片显示效果（二）" border="0" title="点击放大" /></a> <a href="images/gallery2.jpg" onclick="return hs.expand(this)"> <img src="images/gallery2.gif" alt="图片显示效果（二）" title="点击放大" /></a> <a href="images/gallery3.jpg" onclick="return hs.expand(this)"> <img src="images/gallery3.gif" alt="图片显示效果（二）" title="点击放大" /></a> <a href="images/gallery1.jpg" onclick="return hs.expand(this)"> <img src="images/gallery1.gif" alt="图片显示效果（二）" border="0" title="点击放大" /></a> <a href="images/gallery2.jpg" onclick="return hs.expand(this)"> <img src="images/gallery2.gif" alt="图片显示效果（二）" title="点击放大" /></a> <a href="images/gallery3.jpg" onclick="return hs.expand(this)"> <img src="images/gallery3.gif" alt="图片显示效果（二）" title="点击放大" /></a> <a href="images/gallery1.jpg" onclick="return hs.expand(this)"> <img src="images/gallery1.gif" alt="图片显示效果（二）" border="0" title="点击放大" /></a> <a href="images/gallery2.jpg" onclick="return hs.expand(this)"> <img src="images/gallery2.gif" alt="图片显示效果（二）" title="点击放大" /></a> <a href="images/gallery3.jpg" onclick="return hs.expand(this)"> <img src="images/gallery3.gif" alt="图片显示效果（二）" title="点击放大" /></a> <a href="images/gallery1.jpg" onclick="return hs.expand(this)"> <img src="images/gallery1.gif" alt="图片显示效果（二）" border="0" title="点击放大" /></a> <a href="images/gallery2.jpg" onclick="return hs.expand(this)"> <img src="images/gallery2.gif" alt="图片显示效果（二）" title="点击放大" /></a> <a href="images/gallery3.jpg" onclick="return hs.expand(this)"> <img src="images/gallery3.gif" alt="图片显示效果（二）" title="点击放大" /></a> </div> </body></html>?
效果图如下：
?
?
具体实现参考附件。