<p>构建html结构：</p>
<p><code>tool.js</code> 的内容：</p>
<pre><code class="language-javascript">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;
}
}</code></pre>
<p><code>flash.js</code> 的内容：</p>
<pre><code class="language-javascript">(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;
}
})(); </code></pre>
详情