构建html结构：

tool.js 的内容：

function fnXMLHttp(fn) {
    var oXMLHttp = null;
    if (window.XMLHttpRequest) { //现代浏览器(IE7+,Chrome,Firefox,Safari,Opera)
        oXMLHttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) { //IE5,IE6
        oXMLHttp = new ActiveXObject(""
            Microsoft.XMLHTTP "");
    }
    if (oXMLHttp != null & amp; & amp; fn != undefined) {
        oXMLHttp.onreadystatechange = fn;
    }
    return oXMLHttp;

    /*
    XMLHttpRequest对象的属性有
    onreadystatechange: 属性值为函数，当readyState属性改变时触发
    readyState:属性值为数字(0:Uninitialized,1:Open,2:Send,3:Receiving,4:Loaded),HTTP请求的状态
    status:属性值为数字，由服务器返回的 HTTP 状态代码：例如200,404
    response:返回内容
    responseText:
    responseXML:
    statusText:这个属性用名称而不是数字指定了请求的 HTTP 的状态代码
    timeout:
    upload:

    onerror:数值为函数
    onabort():取消当前响应，关闭连接并且结束任何未决的网络活动。
    onloadstart:
    onloadend:
    onprogress:
    ontimeout:

    open(""GET"", url, true); //以GET方法+异步方式打开HTTP连接,原型open(method, url, async, username, password)
    send(null);发送HTTP请求
    getAllResponseHeaders();
    getResponseHeader();
    setRequestHeader();

    请求头部
    Host
    Connection
    Keep-Alive
    Accept-charset
    Accept-Encoding
    If-Modified-Since
    If-None-Match
    If-Range
    Range
    */
}

function fnPost(url, data, fn) {
    var oXMLHttp = fnXMLHttp();
    oXMLHttp.onreadystatechange = fnChange;
    oXMLHttp.open('POST', url, true);
    oXMLHttp.send(data);

    function fnChange() {
        if (oXMLHttp.readyState == 4 & amp; & amp; oXMLHttp.status == 200) {
            fn(oXMLHttp.response);
        }
    }
}

function bind(o, e, f) {
    if (window.addEventListener) {
        o.addEventListener(e, f, false); //false,表示在冒泡阶段调用事件处理程序
    } else if (window.attachEvent) {
        o.attachEvent('on' + e, f);
    }
}

function $id(id) {
    return (typeof id === 'string') ? document.getElementById(id) : id;
}

function $tag(tagName, parent) {
    var parent = typeof parent != 'undefined' ? parent : document;
    return parent.getElementsByTagName(tagName);
}

function getStyle(obj) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(obj, null);
    } else if (obj.currentStyle) {
        return obj.currentStyle;
    }
}

flash.js 的内容：

(function() {
        var dBox = $id('first-view'),
            dLis = $tag('li', dBox),
            dUl = $tag('ul', dBox),
            dNum = $id('indicator'),

            timer = 0,
            timer1 = 0;

        var x1, //手指触摸时的x坐标
            x2, //手指移开时的x坐标
            dx, //间距
            index = 0, //当前是第几个li可见
            nLiLen = dLis.length, //总共多少个li
            nBoxWidth = $(window).width() - 16,
            currentPos = 0, //ul当前的距离
            reg = /\-?[0-9]+\.?[0-9]*/g; //获取transform:translateX(34px)中的34

        //绑定手指触摸时的处理函数
        bind(dBox, 'touchstart', function(ev) {
            ev.preventDefault();
            if (!ev.touches.length) {
                return false;
            }
            var touch = ev.touches[0];
            x1 = touch.pageX;
            currentPos = parseFloat(dUl[0].style.webkitTransform.match(reg));
            clearInterval(timer);
            clearTimeout(timer1);
        });

        //绑定触摸过程的处理函数
        bind(dBox, 'touchmove', function(ev) {
            ev.preventDefault();
            if (!ev.touches.length) {
                return false;
            }
            var touch = ev.touches[0];
            x2 = touch.pageX;
            var dx = x2 - x1;
            if (0 & lt; index & amp; & amp; index & lt; nLiLen - 1) {
                dUl[0].style.webkitTransform = 'translateX(' + (currentPos + parseFloat(dx)) + 'px)';
                dUl[0].style.webkitTransition = '0ms linear';
            }
        });

        //绑定手指移开时的处理函数
        bind(dBox, 'touchend', function(ev) {
            ev.preventDefault();
            dx = x2 - x1;
            fnAnimate(dx);
            timer1 = setTimeout(fnStart, 5000);
        });

        //绑定全部资源加载完毕的处理函数
        bind(window, 'load', function() {
            var lis = "";
            var imgs = $tag('img', dUl[0]);
            for (var i = 0; i & lt; nLiLen; i++) {
                lis += "" + i + "";
                imgs[i].style.width = nBoxWidth + 'px';
                dLis[i].style.width = nBoxWidth + 'px';
            }
            dNum.innerHTML = lis;
            dBox.style.width = nBoxWidth + 'px';
            fnSetNum(index);
            fnStart();
        });
        $(window).resize(function() {
            nBoxWidth = $(window).width() - 16;
            dBox.style.width = nBoxWidth + 'px';
            var imgs = $tag('img', dUl[0]);
            var dLis = $tag('li', dUl[0]);
            for (var i = 0; i & lt; nLiLen; i++) { 
                imgs[i].style.width = nBoxWidth + 'px';
                dLis[i].style.width = nBoxWidth + 'px';
            }
        });

        function fnStart() { 
            timer = window.setInterval(function() { 
                dx = -21;
                if (index & lt; nLiLen - 1) {
                    fnAnimate(dx);
                    fnSetNum(index);
                } else { 
                    index = -1;
                }
            }, 3000);
        }

        function fnAnimate(dx) {
            if (Math.abs(dx) & gt; 20) { 
            //滑动够一定距离才执行 
                if (dx & lt; 0) { //从右向左滑动 
                    if (index & lt; nLiLen - 1) { index++; } 
                } else if (dx & gt; 0) { //从左向右滑动 
                    if (index & gt; 0) { 
                        index--;
                    }
                } 
                dUl[0].style.webkitTransform = 'translateX(-' + (index \* nBoxWidth) + 'px)'; 
                dUl[0].style.webkitTransition = '500ms linear'; 
            } 
        fnSetNum(index); 
    } 
    function fnSetNum(index) { 
        var lis = $tag('li', dNum); 
        for (var i = 0; i & lt; nLiLen; i++) { 
            lis[i].className = "" ""; 
        } 
        lis[index].className = 'current'; 
    } 
    function fnGetNum() { 
        return index; 
    } 
})();