jquery实现简单的图片查看器

相关的js代码：

;(function($,window,document){
   var pluginName='photoViewer',
   defaults={
      pageNow:1,
      pageSize:1,
      pageNum:3,
      imgBaseUrl:'./image/',
      imgNames:['img1.PNG','img2.jpg','img3.jpg'],
      timmer:null
   };

   function PhotoViewer(element,options){
     this.element=element;
     this.settings=$.extend({},defaults,options);
     this.init(element);
   }

   PhotoViewer.prototype={
     init:function(){
        var that=this;
        element=this.element;
        that.render(element);
        that.events(element);
     },
     create:function(){
        var that=this;
        viewerHtml=[];
        viewerHtml[0]="<div class='buttonWrap'>"+
                             "<a href='javascript:void(0)' class='showOriginalImgBtn'>原始大图</a>"+
                             "<a href='javascript:void(0)' class='showPreImgBtn'>上一张</a>"+
                             "<a href='javascript:void(0)' class='showNextImgBtn'>下一张</a>"+
                             "<a href='javascript:void(0)' class='autoShowImgBtn'>自动播放</a>"+
                         "</div>";
       viewerHtml[1]="<div class='imgContentWrap'>"+
                             "<img src='"+that.settings.imgBaseUrl+that.settings.imgNames[0]+"'>"+
                         "</div>";

        var pageHtml="<a href='javascript:void(0)' class='pageNumber activePage'>1</a>";
        for(var i=2;i<=that.settings.pageNum;i++){
              pageHtml+="<a href='javascript:void(0)' class='pageNumber'>"+i+"</a>";
        }
        viewerHtml[2]="<div class='pageBarWrap'>"+
                           "共<span class='pageNum'>3</span>页&nbsp;&nbsp;"+
                           "<a href='javascript:void(0)' class='showPreImgBtn'>上一页</a>"+
                           "<span class='pegeWrap'>"+pageHtml+"</span>"+
                           "<a href='javascript:void(0)' class='showNextImgBtn'>下一页</a>";
                        "</div>";
        return viewerHtml;
     },
     render:function(element){
        var that=this;
        var $this=$(element);
        viewerHtml=that.create();
        $this.append(viewerHtml[0]+viewerHtml[1]+viewerHtml[2]);
        /*var $imgWrap=viewerHtml[0];
        var img0="<img src='"+imgBaseUrl+imgNames[0]+'>";*/ 
     },
     autoCircleShowImg:function($targetElem,imgIndex){
      var that=this;
        if(imgIndex>that.settings.pageNum){
            imgIndex=1;
       }
       var imgUrl=that.settings.imgBaseUrl+that.settings.imgNames[imgIndex-1]; 
       $targetElem.html("<img src='"+imgUrl+"'>"); 
       that.settings.pageNow=imgIndex;
       imgIndex++;  
        // timer=setTimeout(that.autoCircleShowImg($targetElem,imgIndex+),1000);
        that.styleActive();
        that.settings.timer=setTimeout(function(){that.autoCircleShowImg($targetElem,imgIndex)},3000);
     },
     events:function(element){
        var that=this;
        var imgBaseUrl=that.settings.imgBaseUrl;
        var imgNameArray=that.settings.imgNames;
        var $this=$(element).children('.imgContentWrap').eq(0);

        $('.showOriginalImgBtn').click(function(){
               var $curImgTarget=$(this);
               if($curImgTarget.hasClass('activeBtn')){
                $curImgTarget.removeClass('activeBtn');
                 var $img=$this.children('img').eq(0);
                 $img.css('height','400px');
                 $img.css('width','400px');
               }else{
                 $curImgTarget.addClass('activeBtn');
                 var $img=$this.children('img').eq(0);
                 $img.css('height','auto');
                 $img.css('width','auto');
               } 
        });

          $('.showPreImgBtn').click(function(){
            $('.buttonWrap a').removeClass('activeBtn');

              if(that.settings.pageNow==1){
                alert('已经是第一张图片');
              }else{
                 that.settings.pageNow--;
                 $this.html("<img src='"+imgBaseUrl+imgNameArray[that.settings.pageNow-1]+"'>");
                 that.styleActive();
              }
        });
        $('.showNextImgBtn').click(function(){
            $('.buttonWrap a').removeClass('activeBtn');

              if(that.settings.pageNow==that.settings.pageNum){
                alert('已经是最后一张图片');
              }else{
                 var nextPageNow=parseInt(that.settings.pageNow);
                   $this.html("<img src='"+imgBaseUrl+imgNameArray[nextPageNow]+"'>");   
                   that.settings.pageNow++;
                   that.styleActive();
              }

        });

        $('.pageNumber').click(function(){
            var $elem=$(this);
            var activePageNow=parseInt($elem.text());
            that.settings.pageNow=activePageNow;
          $this.html("<img src='"+imgBaseUrl+imgNameArray[activePageNow-1]+"'>");   
              // $elem.addClass('activePage').siblings('a').removeClass('activePage'); 
          that.styleActive();
        });

        $('.autoShowImgBtn').click(function(){
           var $btn=$(this);
            if($btn.hasClass('activeBtn')){
                clearTimeout(that.settings.timer);
                $btn.removeClass('activeBtn');
            }else{
              $btn.addClass('activeBtn');
              that.autoCircleShowImg($this,1);
            }
        });

     },
     styleActive:function(){
         var that=this;
       $('.pageNumber').eq(that.settings.pageNow-1).addClass('activePage').siblings('a').removeClass('activePage'); 
     }
   },
    $.fn[pluginName] = function(options) {
        this.each(function() {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new PhotoViewer(this, options));
            }
        });
        return this;
    };
})(jQuery,window,document)

对应的html:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"/>
   <title>photoView</title>
   <style>
     *{margin:0;padding:0;}
     #pictureWrap{width:1200px;margin:20px auto;}
     #pictureWrap a{text-decoration: none;color:black;}
     #pictureWrap a:hover{text-decoration: underline;}
     .imgContentWrap,.pageBarWrap{margin-top: 20px;}
     #pictureWrap .buttonWrap a{margin-right: 10px;border:1px solid #ddd;padding:2px 10px;}
     .pageBarWrap a{margin-right: 5px;}
     #pictureWrap a.activePage{color:blue;}
     .imgContentWrap img{width:400px;height: 400px;}
     #pictureWrap .buttonWrap a.activeBtn{border:1px solid red;}
   </style>
</head>
<body>
   <div id="pictureWrap">
    <!--   <div class="buttonWrap">
       <a href="javascript:void(0)">原始大图</a>
       <a href="javascript:void(0)">上一张</a>
       <a href="javascript:void(0)">上一张</a>
       <a href="javascript:void(0)">自动播放</a>
    </div>
    <div class="imgContentWrap">
         <img src="./image/img1.PNG">
    </div>
        <div class="pageBarWrap">
       共<span class="pageNum">3</span>页&nsbp;&nbsp;
       <a href="javascript:void(0)">上一页</a>
       <a href="javascript:void(0)">1</a><a href="javascript:void(0)">2</a>
       <a href="javascript:void(0)">下一页</a>
    </div>
     -->
   </div>
  <script type="text/javascript" src="./jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="./jquery.photoViewer.js"></script>
  <script type="text/javascript">
     $(function(){
         $('#pictureWrap').photoViewer({
            pageNow:1,
            content:'picture2',
         });
     })
  </script>
</body>
</html>

效果图：