AI时代，找源码已成为过去式，纪念我过去的十年0(回)
69天前
还有人吗2(回)
87天前会python真的可以为所欲为0(回)
567天前
这里还有人吗2(回)
752天前这里还有人吗0(回)
752天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
977天前//滚动图片构造函数 |
function ScrollPic(scrollContId,arrLeftId,arrRightId,dotListId,listType){ |
|
this.scrollContId = scrollContId; //内容容器ID |
this.arrLeftId = arrLeftId; //左箭头ID |
this.arrRightId = arrRightId; //右箭头ID |
this.dotListId = dotListId; //点列表ID |
this.listType = listType; //列表类型 |
this.dotClassName = "dotItem";//点className |
this.dotOnClassName = "dotItemOn";//当前点className |
this.dotObjArr = []; |
this.listEvent = "onclick"; |
this.circularly = true; //循环滚动（无缝循环） |
|
this.pageWidth = 0; //翻页宽度 |
this.frameWidth = 0; //显示框宽度 |
this.speed = 10; //移动速度(单位毫秒，越小越快) |
this.space = 10; //每次移动像素(单位px，越大越快) |
this.scrollWidth = 5; //横向滚动宽度 |
|
this.upright = false; //垂直的滚动 |
|
this.pageIndex = 0; |
|
this.autoPlay = true; |
this.autoPlayTime = 2; //秒 |
|
this._autoTimeObj; |
this._scrollTimeObj; |
this._state = "ready"; // ready | floating | stoping |
|
|
this.stripDiv = document.createElement("DIV"); |
|
|
this.lDiv01 = document.createElement("DIV"); |
this.lDiv02 = document.createElement("DIV"); |
}; |
ScrollPic.prototype = { |
version : "1.41", |
author : "mengjia", |
pageLength : 0, |
touch : true, |
initialize : function(){ //初始化 |
var thisTemp = this; |
if(!this.scrollContId){ |
throw new Error("必须指定scrollContId."); |
return; |
}; |
this.scDiv = this.$(this.scrollContId); |
if(!this.scDiv){ |
throw new Error("scrollContId不是正确的对象.(scrollContId = \""+ this.scrollContId +"\")"); |
return; |
}; |
|
this.scDiv.style[this.upright?'height':'width'] = this.frameWidth + "px"; |
this.scDiv.style.overflow = "hidden"; |
|
//HTML |
this.lDiv01.innerHTML = this.scDiv.innerHTML; |
this.scDiv.innerHTML = ""; |
this.scDiv.appendChild(this.stripDiv); |
this.stripDiv.appendChild(this.lDiv01); |
if(this.circularly){//无缝循环 |
this.stripDiv.appendChild(this.lDiv02); |
this.lDiv02.innerHTML = this.lDiv01.innerHTML |
}; |
|
|
this.stripDiv.style.overflow = "hidden"; |
this.stripDiv.style.zoom = "1"; |
this.stripDiv.style[this.upright?'height':'width'] = "32766px"; |
|
if(!this.upright){ |
this.lDiv01.style.cssFloat = "left"; |
this.lDiv01.style.styleFloat = "left"; |
this.lDiv01.style.overflow = "hidden"; |
}; |
this.lDiv01.style.zoom = "1"; |
if(this.circularly && !this.upright){ //无缝循环设置CSS |
this.lDiv02.style.cssFloat = "left"; |
this.lDiv02.style.styleFloat = "left"; |
this.lDiv02.style.overflow = "hidden"; |
}; |
this.lDiv02.style.zoom = "1"; |
|
this.addEvent(this.scDiv,"mouseover",function(){thisTemp.stop()}); |
this.addEvent(this.scDiv,"mouseout",function(){thisTemp.play()}); |
|
//Arrowhead event |
//left |
if(this.arrLeftId){ |
this.alObj = this.$(this.arrLeftId); |
if(this.alObj){ |
this.addEvent(this.alObj,"mousedown",function(){thisTemp.rightMouseDown()}); |
this.addEvent(this.alObj,"mouseup",function(){thisTemp.rightEnd()}); |
this.addEvent(this.alObj,"mouseout",function(){thisTemp.rightEnd()}); |
}; |
}; |
//right |
if(this.arrRightId){ |
this.arObj = this.$(this.arrRightId); |
if(this.arObj){ |
this.addEvent(this.arObj,"mousedown",function(){thisTemp.leftMouseDown()}); |
this.addEvent(this.arObj,"mouseup",function(){thisTemp.leftEnd()}); |
this.addEvent(this.arObj,"mouseout",function(){thisTemp.leftEnd()}); |
}; |
}; |
|
var pages = Math.ceil(this.lDiv01[this.upright?'offsetHeight':'offsetWidth'] / this.frameWidth),i,tempObj; |
this.pageLength = pages; |
//dot |
if(this.dotListId){ |
this.dotListObj = this.$(this.dotListId); |
this.dotListObj.innerHTML = ""; |
if(this.dotListObj){ |
|
for(i=0;i<pages;i++){ |
tempObj = document.createElement("span"); |
this.dotListObj.appendChild(tempObj); |
this.dotObjArr.push(tempObj); |
|
if(i==this.pageIndex){ |
tempObj.className = this.dotOnClassName; |
}else{ |
tempObj.className = this.dotClassName; |
}; |
if(this.listType == 'number'){ |
tempObj.innerHTML = i+1; |
}else if(typeof (this.listType) =='string' ){ |
tempObj.innerHTML = this.listType; |
}else { |
tempObj.innerHTML=''; |
}; |
tempObj.title = "第" + (i+1) + "页"; |
tempObj.num = i; |
tempObj[this.listEvent] = function(){thisTemp.pageTo(this.num)}; |
}; |
}; |
}; |
this.scDiv[this.upright?'scrollTop':'scrollLeft'] = 0; |
//autoPlay |
if(this.autoPlay){this.play()}; |
|
this._scroll = this.upright?'scrollTop':'scrollLeft'; |
this._sWidth = this.upright?'scrollHeight':'scrollWidth'; |
|
if(typeof(this.onpagechange) === 'function'){ |
this.onpagechange(); |
}; |
|
this.iPad(); |
}, |
leftMouseDown : function(){ |
if(this._state != "ready"){return}; |
var thisTemp = this; |
this._state = "floating"; |
clearInterval(this._scrollTimeObj); |
this.moveLeft(); |
this._scrollTimeObj = setInterval(function(){thisTemp.moveLeft()},this.speed); |
}, |
rightMouseDown : function(){ |
if(this._state != "ready"){return}; |
var thisTemp = this; |
this._state = "floating"; |
clearInterval(this._scrollTimeObj); |
this.moveRight(); |
this._scrollTimeObj = setInterval(function(){thisTemp.moveRight()},this.speed); |
}, |
moveLeft : function(){ |
if(this.circularly){ //无缝循环 |
if(this.scDiv[this._scroll] + this.space >= this.lDiv01[this._sWidth]){ |
this.scDiv[this._scroll] = this.scDiv[this._scroll] + this.space - this.lDiv01[this._sWidth]; |
}else{ |
this.scDiv[this._scroll] += this.space; |
}; |
}else{ |
if(this.scDiv[this._scroll] + this.space >= this.lDiv01[this._sWidth] - this.frameWidth){ |
this.scDiv[this._scroll] = this.lDiv01[this._sWidth] - this.frameWidth; |
//停 |
this.leftEnd(); |
}else{ |
this.scDiv[this._scroll] += this.space; |
}; |
}; |
this.accountPageIndex(); |
}, |
moveRight : function(){ |
if(this.circularly){ //无缝循环 |
if(this.scDiv[this._scroll] - this.space <= 0){ |
|
this.scDiv[this._scroll] = this.lDiv01[this._sWidth] + this.scDiv[this._scroll] - this.space; |
}else{ |
this.scDiv[this._scroll] -= this.space; |
}; |
}else{ |
if(this.scDiv[this._scroll] - this.space <= 0){ |
this.scDiv[this._scroll] = 0; |
//停 |
this.rightEnd(); |
}else{ |
this.scDiv[this._scroll] -= this.space; |
}; |
}; |
this.accountPageIndex(); |
}, |
leftEnd : function(){ |
if(this._state != "floating" && this._state != 'touch'){return}; |
this._state = "stoping"; |
clearInterval(this._scrollTimeObj); |
|
var fill = this.pageWidth - this.scDiv[this._scroll] % this.pageWidth; |
this.move(fill); |
}, |
rightEnd : function(){ |
if(this._state != "floating" && this._state != 'touch'){return}; |
this._state = "stoping"; |
clearInterval(this._scrollTimeObj); |
|
var fill = - this.scDiv[this._scroll] % this.pageWidth; |
|
this.move(fill); |
}, |
move : function(num,quick){ |
var thisTemp = this; |
var thisMove = num/5; |
var theEnd = false; |
if(!quick){ |
if(thisMove > this.space){thisMove = this.space}; |
if(thisMove < -this.space){thisMove = -this.space}; |
}; |
|
if(Math.abs(thisMove)<1 && thisMove!=0){ |
thisMove = thisMove>=0?1:-1; |
}else{ |
thisMove = Math.round(thisMove); |
}; |
|
var temp = this.scDiv[this._scroll] + thisMove; |
|
if(thisMove>0){ |
if(this.circularly){ //无缝循环 |
if(this.scDiv[this._scroll] + thisMove >= this.lDiv01[this._sWidth]){ |
this.scDiv[this._scroll] = this.scDiv[this._scroll] + thisMove - this.lDiv01[this._sWidth]; |
}else{ |
this.scDiv[this._scroll] += thisMove; |
}; |
}else{ |
if(this.scDiv[this._scroll] + thisMove >= this.lDiv01[this._sWidth] - this.frameWidth){ |
this.scDiv[this._scroll] = this.lDiv01[this._sWidth] - this.frameWidth; |
this._state = "ready"; |
theEnd = true; |
//return; |
}else{ |
this.scDiv[this._scroll] += thisMove; |
}; |
}; |
}else{ |
if(this.circularly){ //无缝循环 |
if(this.scDiv[this._scroll] + thisMove < 0){ |
this.scDiv[this._scroll] = this.lDiv01[this._sWidth] + this.scDiv[this._scroll] + thisMove; |
}else{ |
this.scDiv[this._scroll] += thisMove; |
}; |
}else{ |
if(this.scDiv[this._scroll] - thisMove < 0){ |
this.scDiv[this._scroll] = 0; |
this._state = "ready"; |
theEnd = true; |
//return; |
}else{ |
this.scDiv[this._scroll] += thisMove; |
}; |
}; |
}; |
|
if(typeof(this.onpagechange) === 'function'){ |
this.onpagechange(); |
}; |
|
if(theEnd){ |
return; |
}; |
|
num -= thisMove; |
if(Math.abs(num) == 0){ |
this._state = "ready"; |
if(this.autoPlay){this.play()}; |
this.accountPageIndex(); |
return; |
}else{ |
this.accountPageIndex(); |
this._scrollTimeObj = setTimeout(function(){thisTemp.move(num,quick)},this.speed) |
}; |
|
}, |
pre : function(){ |
if(this._state != "ready"){return}; |
this._state = "stoping"; |
this.pageTo(this.pageIndex - 1); |
}, |
next : function(reStar){ |
if(this._state != "ready"){return}; |
this._state = "stoping"; |
if(this.circularly){ |
this.pageTo(this.pageIndex + 1); |
}else{ |
if(this.scDiv[this._scroll] >= this.lDiv01[this._sWidth] - this.frameWidth){ |
this._state = "ready"; |
if(reStar){this.pageTo(0)}; |
}else{ |
this.pageTo(this.pageIndex + 1); |
}; |
}; |
}, |
play : function(){ |
var thisTemp = this; |
if(!this.autoPlay){return}; |
clearInterval(this._autoTimeObj); |
this._autoTimeObj = setInterval(function(){thisTemp.next(true)},this.autoPlayTime * 1000); |
}, |
stop : function(){ |
clearInterval(this._autoTimeObj); |
}, |
pageTo : function(num){ |
if(this.pageIndex == num){return}; |
if(num < 0){num = this.pageLength - 1}; |
clearTimeout(this._scrollTimeObj); |
this._state = "stoping"; |
var fill = num * this.frameWidth - this.scDiv[this._scroll]; |
this.move(fill,true); |
}, |
accountPageIndex : function(){ |
var pageIndex = Math.floor(this.scDiv[this._scroll] / this.frameWidth); |
if(pageIndex == this.pageIndex){return}; |
this.pageIndex = pageIndex; |
|
if(this.pageIndex > Math.floor(this.lDiv01[this.upright?'offsetHeight':'offsetWidth'] / this.frameWidth )){this.pageIndex = 0}; |
if(typeof(this.onnowpage) === 'function'){ |
this.onnowpage(this.pageIndex); |
} |
var i; |
//alert(this.pageIndex); |
for(i=0;i<this.dotObjArr.length;i++){ |
if(i==this.pageIndex){ |
|
this.dotObjArr[i].className = this.dotOnClassName; |
}else{ |
this.dotObjArr[i].className = this.dotClassName; |
}; |
}; |
if(typeof(this.onpagechange) === 'function'){ |
this.onpagechange(); |
}; |
}, |
|
iPadX : 0, |
iPadLastX : 0, |
iPadStatus : 'ok', |
iPad : function(){ |
if(typeof(window.ontouchstart) === 'undefined'){ //不支持触屏 |
return; |
}; |
if(!this.touch){return}; |
|
var tempThis = this; |
this.addEvent(this.scDiv,'touchstart',function(e){tempThis._touchstart(e)}); |
this.addEvent(this.scDiv,'touchmove',function(e){tempThis._touchmove(e)}); |
this.addEvent(this.scDiv,'touchend',function(e){tempThis._touchend(e)}); |
}, |
_touchstart : function(e){ |
//if(this._state != "ready"){return}; |
//this._state = 'touch'; |
this.stop(); |
this.iPadX = e.touches[0].pageX; |
this.iPadScrollX = window.pageXOffset; |
this.iPadScrollY = window.pageYOffset; //用于判断页面是否滚动 |
this.scDivScrollLeft = this.scDiv[this._scroll]; |
}, |
_touchmove : function(e){ |
if(e.touches.length > 1){ //多点触摸 |
this.iPadStatus = 'ok'; |
return; |
}; |
this.iPadLastX = e.touches[0].pageX; |
var cX = this.iPadX - this.iPadLastX; |
if(this.iPadStatus == 'ok'){ |
if(this.iPadScrollY == window.pageYOffset && this.iPadScrollX == window.pageXOffset && Math.abs(cX)>this.scrollWidth){ //横向触摸 |
this.iPadStatus = 'touch'; |
}else{ |
return; |
}; |
}; |
this._state = 'touch'; |
var scrollNum = this.scDivScrollLeft + cX; |
|
if(scrollNum >= this.lDiv01[this._sWidth]){ |
scrollNum = scrollNum - this.lDiv01[this._sWidth]; |
}; |
if(scrollNum < 0){ |
scrollNum = scrollNum + this.lDiv01[this._sWidth]; |
}; |
this.scDiv[this._scroll] = scrollNum; |
e.preventDefault(); |
}, |
_touchend : function(e){ |
if(this.iPadStatus != 'touch'){return}; |
this.iPadStatus = 'ok'; |
//this._state = 'ready'; |
var cX = this.iPadX - this.iPadLastX; |
if(cX<0){ |
this.rightEnd(); |
}else{ |
this.leftEnd(); |
}; |
this.play(); |
}, |
$ : function(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}, |
isIE : navigator.appVersion.indexOf("MSIE")!=-1?true:false, |
|
//Event |
addEvent : function(obj,eventType,func){if(obj.attachEvent){obj.attachEvent("on" + eventType,func);}else{obj.addEventListener(eventType,func,false)}}, |
delEvent : function(obj,eventType,func){ |
if(obj.detachEvent){obj.detachEvent("on" + eventType,func)}else{obj.removeEventListener(eventType,func,false)} |
}, |
//Cookie |
readCookie : function(l){var i="",I=l+"=";if(document.cookie.length>0){var offset=document.cookie.indexOf(I);if(offset!=-1){offset+=I.length;var end=document.cookie.indexOf(";",offset);if(end==-1)end=document.cookie.length;i=unescape(document.cookie.substring(offset,end))}};return i}, |
|
writeCookie : function(O,o,l,I){var i="",c="";if(l!=null){i=new Date((new Date).getTime()+l*3600000);i="; expires="+i.toGMTString()};if(I!=null){c=";domain="+I};document.cookie=O+"="+escape(o)+i+c}, |
//Style |
readStyle:function(i,I){if(i.style[I]){return i.style[I]}else if(i.currentStyle){return i.currentStyle[I]}else if(document.defaultView&&document.defaultView.getComputedStyle){var l=document.defaultView.getComputedStyle(i,null);return l.getPropertyValue(I)}else{return null}} |
}; |
