JQuery【点击小图查看大图】

最新推荐文章于 2021-06-30 11:09:58 发布

一直在冬眠

最新推荐文章于 2021-06-30 11:09:58 发布

阅读量7.3k

点赞数 1

分类专栏： JavaScript/JQuery 文章标签： jquery button div border function float

本文链接：https://blog.csdn.net/wjr_loves/article/details/7865292

版权

JavaScript/JQuery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

CSS代码：

<style type="text/css">
     h1 {
  text-align: center;
}
#thumbnails {
  float: left;
  width: 140px;
  height: 450px;
  overflow: auto;
  border: 2px ridge #00457b;
  margin-right: 10px;
}
#buttonBar {
  clear: both;
  text-align: center;
}
#buttonBar button {
  width: 88px;
}
</style>

JQuery代码：

<script type="text/javascript" src="../jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.jqia.photomatic.js"></script>
    <script type="text/javascript">
      $(function(){
        $('#thumbnails img').photomatic({
          photoElement: '#photo',
          previousControl: '#previousButton',
          nextControl: '#nextButton',
          firstControl: '#firstButton',
          lastControl: '#lastButton'
        });
      });
</script>

HTML代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击小图看原图</title>
</head>
<body>
<h1>点击小图看原图</h1>
    <div id="thumbnails">
      <img src="images/1.jpg" width="120"/>
      <img src="images/2.jpg" width="120"/>
      <img src="images/3.jpg" width="120"/>
      <img src="images/4.jpg" width="120"/>
      <img src="images/5.jpg" width="120"/>
      <img src="images/6.jpg" width="120"/>
      <img src="images/7.jpg" width="120"/>
      <img src="images/tree.jpg" width="120" />
      <img src="images/dream.jpg" width="120" />     
    </div>
    <div id="photoContainer">
      <img id="photo" src=""/>
    </div>
    <div id="buttonBar">
      <button type="button" id="firstButton">First</button>
      <button type="button" id="previousButton">Previous</button>
      <button type="button" id="nextButton">Next</button>
      <button type="button" id="lastButton">Last</button>
    </div>
</body>
</html>