一、li*75>img[src="imags/qq/$.jpg"],按了tab之后，$的地方会从1到75开始计数。

db:display:block;

e.stopPropagation();阻止事件冒泡

插件1，学会写插件

if('prew' === $(this).data('control')){

    index = Math.max(0,--index);

}else{

    index = Math.min(len-1,++index)

}

2-2 不使用预加载的纯js代码：

window.onload = showPic;
var imgs = ['img/banner.jpg',
        'img/pic01.jpg',
        'img/pic02.jpg',
        'img/pic03.jpg'],
index = 0,
len = imgs.length;
function showPic() {
var btns = document.getElementsByClassName("btn");
var place = document.getElementById("img");
for (var i=0; i < btns.length; i++) {
btns[i].onclick = function() {
var control = this.getAttribute("data-control");
"prev" === control ? index = Math.max(0, --index) : 
index = Math.min(len - 1, ++index);
document.title = (index + 1) + "/" + len;
place.setAttribute("src",imgs[index]);
}
}
}

当然，那数组imgs里面要换成你的各图片的src；文档结构和视频的一样。

编辑序列列表 快捷方式：

li*75>img[src="images/qqexpression/images$.gif" alt=""]

一、图片预加载的3个步骤

1、实例化一个Image对象。

2、监听它的load、error事件。

3、为src附上正确的图片路径。

(function($) {

  // 面向对象

  function PreLoad(imgs, options) {

    this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;

    this.opts = $.extend({}, PreLoad.DEFAULTS, options); // options和PreLoad.DEFAULTS这2个对象融合，生成新的对象，将新对象返回给opts保存下来。

    if (this.opts.order === 'ordered') {

      this._ordered();

    } else {

      this._unordered(); // _表示只在函数内部使用，而不在外部调用

    }

  }

  PreLoad.DEFAULTS = {

    order: 'unordered', // 无序预加载

    each: null, // 每一张图片加载完毕后执行

    all: null  // 所有图片加载完毕后执行

  };

  PreLoad.prototype._ordered = function() { //方法写在原型链上

    var opts = this.opts, // 保存为局部变量

        imgs = this.imgs,

        len = imgs.length,

        count = 0;

    var imgObj = new Image();

    load();

    function load() {

      $(imgObj).on('load error', function() {

        opts.each && opts.each(count);

        if (count >=len) {

          // 所有图片已经加载完毕

          opts.all && opts.all();

        } else {

          load();

        }

        count++;

      });

      imgObj.src = imgs[count];

    }

  },

  PreLoad.prototype._unordered = function () {

    var imgs = this.imgs,

        opts = this.opts,

        count = 0,

        len = imgs.length;

    $.each(imgs, function(i, src) {

      if (typeof src != 'string') return;

      var imgObj = new Image();

      $(imgObj).on('load error', function() {

        opts.each && opts.each(count); // 如果opts.each存在，执行opts.each方法

        if (count >= len - 1) {

          opts.all && opts.all();

        }

        count ++;

      });

      imgObj.src = src;

    });

  };

  // 插件:①附在$.fn上（要选择一个元素）；②直接跟在jquery对象，是一个工具函数。(工具方法)

  // $.fn.extend -> $('#img').preload();

  $.extend({

    preload: function(imgs, opts) {

      new PreLoad(imgs, opts);

    }

  });

})(jQuery);

一、css简写

（1）tac意为   text-align:center;

（2）dib意为  display:inline-block;

（3）mt300意为 margin-top:300;

一、图片的预加载效果：预知用户将发生的行为，提前加载用户所需的图片

二、图片预加载效果展示

1、网站的loading页

2、局部图片的加载-表情插件

3、漫画网站

三、图片预加载的特点

1、提前加载所需图片

2、更好的用户体验

四、图片预加载：有序加载、无序加载。

有序无序预加载整合