基于jQuery开发的焦点图插件

同事找帮忙需要写一个普通的焦点图，切换效果是渐变，默认不自动切换，图片有小点，点击小点可以切换图片。花了三个多小时写好，贴出来的目的是让那些开发jQuery插件的童鞋做个参考。

源码

focus.js

【国内直连ChatGPT 29元起】
国内直连ChatGPT，Plus会员每月29元起，支持最新o1模型探索更多领域，无需注册OpenAI账号。

/**
 * 焦点图
 * 2013-03-11
 */
(function($) {
  $.fn.focus = function(param){   
    // 默认高度
    var height = param.height || 200;   
    // 默认宽度
    var width = param.width || 100; 
    var _this = null;

    // jQuery的对象选择器是多个，所以这里使用each遍历每一个节点对象
    $(this).each(function(){

      // 把每一个节点对象赋给一个变量，这有助于程序效率
      _this = $(this);

      $('body').css({margin: 0, padding: 0});

      // 改变盒子大小 
      _this.css({
        width: width + 'px',
        height: height+'px',
        position: 'relative',
        padding: 0
      });
    

      var fock_png_width = 16;            // png宽度(px)
      var fock_png_margin_sx = 8;         // png 小图标上下间距(px)
      var ul_height = fock_png_width + fock_png_margin_sx * 2; // 底部黑条的高度(px)
      var box_height = _this.height();            
      var box_width = _this.width();
      var fock_png_margin_zy = 10;            // png 小图标左右间距
      var js = document.scripts;
      var speed = 500;
      var sper_url = '';              // js路径
      var sper_file_name = 'sper.png';        // png 文件名
      var last_index = 0;
      var lock = false;

      var objImg = _this.find('>img');     // 查找所有图片

      if (objImg.length === 0) {
        return false;   
      }else{
        var img_length = objImg.length; 
      }

      // 获取js文件路径 目的是为了使用png图片
      for (var i = js.length; i>0; i--) {
        if (js[i-1].src.indexOf('lee_plug')>-1) {
          sper_url = js[i-1].src.substring(0, js[i-1].src.lastIndexOf("/") + 1) + sper_file_name;
        }
      }

      // 底部黑条     
      _this.append('<div style="position:absolute;top:'+(height-ul_height)+'px;background:#000;opacity:0.7;height:'+ul_height+'px;margin:0 auto;padding:0;width:100%;"></div>');

      // 创建小图标
      var html = '<ul style="position:absolute;top:'+(height-ul_height)+'px;height:'+ul_height+'px;margin:0 auto;padding:0;width:100%;opacity:0.7;">';
      for (var i=0; i < img_length; i++) {
        $(objImg[i]).css({
          width: '100%',
          height: '100%',
          position: 'absolute',
          margin: 0,
          padding: 0
        });

        if (i >= 1) {
          $(objImg[i]).hide();        
          var sper_weizhi = 0;
        }else{
          var sper_weizhi = '-' + fock_png_width + 'px';
        }

        var left = parseInt((box_width - img_length*(fock_png_width+fock_png_margin_zy*2)) /2) + i*(fock_png_width+fock_png_margin_zy);

        html += '<li style="display:block;position:absolute;width:'+fock_png_width+'px;height:'+fock_png_width+'px;background:url('+sper_url+') 0 '+sper_weizhi+' no-repeat;margin:0; padding:0;cursor:pointer; top:'+parseInt((ul_height-fock_png_width)/2)+'px;left:'+left+'px;"></li>';
      }
      html += '</ul>';

      _this.append(html);

      // 绑定单击事件
      _this.find('>ul>li').each(function(i){
        // 这里使用的js原生事件绑定，因为jQuery 的 click怎么闭包传入i没有弄明白，所以使用原生函数处理
        $(this).get(0).onclick = function (num, obj) {
          return function(){
            if (num === last_index || lock) {
              return false;
            }
            lock = true;
            obj.find('>ul>li').each(function (i) {
              $(this).css('background', 'url(' + sper_url + ') 0 0 no-repeat');
            });
            obj.find('>ul>li:eq(' + num + ')').css('background','url(' + sper_url + ') 0 -' + fock_png_width + 'px no-repeat');
            obj.find('>img:visible').fadeOut(speed);
            obj.find('>img:eq(' + num + ')').fadeIn(speed, function () {
              lock = false;
              last_index = num;   
            });
          }
        }(i, _this); 
      });
    }); 
  };      
  
})(jQuery);

用法

先在页面中加载jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

解压插件压缩包后把文件夹上传到站点任意目录、并在页面中载入focus.js，如

<script type="text/javascript" src="focus.js"></script>

使用

html

<div class="demo">
  <img src="img/3.jpg" />
  <img src="img/1.jpg" />
  <img src="img/2.jpg" />
</div>

<div class="demo">
  <img src="img/1.jpg" />
  <img src="img/2.jpg" />
  <img src="img/3.jpg" />
  <img src="img/4.jpg" />
  <img src="img/5.jpg" />
</div>

js

$('.demo').focus({height: 400, width: 300});