图片展示效果(二)

<!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>&nbsp;</p>
    <p>&nbsp;</p>
    <div class="highslide-gallery">
      <a href="images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/gallery1.gif" alt="迪巧儿童维D钙咀嚼片" border="0"
             title="点击放大" /></a>

      <a href="images/gallery2.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/gallery2.gif" alt="迪巧(维D钙咀嚼片)"
             title="点击放大" /></a>

      <a href="images/gallery3.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/gallery3.gif" alt="迪巧牌秀源女性片:专为成年女性设计的钙"
             title="点击放大" /></a>
      <a href="images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/gallery1.gif" alt="迪巧儿童维D钙咀嚼片" border="0"
             title="点击放大" /></a>

      <a href="images/gallery2.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/gallery2.gif" alt="迪巧(维D钙咀嚼片)"
             title="点击放大" /></a>

      <a href="images/gallery3.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/gallery3.gif" alt="迪巧牌秀源女性片:专为成年女性设计的钙"
             title="点击放大" /></a>
      <a href="images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/gallery1.gif" alt="迪巧儿童维D钙咀嚼片" border="0"
             title="点击放大" /></a>

      <a href="images/gallery2.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/gallery2.gif" alt="迪巧(维D钙咀嚼片)"
             title="点击放大" /></a>

      <a href="images/gallery3.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/gallery3.gif" alt="迪巧牌秀源女性片:专为成年女性设计的钙"
             title="点击放大" /></a>
      <a href="images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/gallery1.gif" alt="迪巧儿童维D钙咀嚼片" border="0"
             title="点击放大" /></a>

      <a href="images/gallery2.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/gallery2.gif" alt="迪巧(维D钙咀嚼片)"
             title="点击放大" /></a>

      <a href="images/gallery3.jpg" class="highslide" onclick="return hs.expand(this)">
        <img src="images/gallery3.gif" alt="迪巧牌秀源女性片:专为成年女性设计的钙"
             title="点击放大" /></a>
    </div>
  </body>
</html>

 

效果图如下:

 

图片展示效果(二)_第1张图片

 

具体实现参考附件。

你可能感兴趣的:(JavaScript,html,css,XHTML)