<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>slide box</title>
<style>
body, div, dl, dt, dd, ul, li, h1, h2, h3, input, textarea, p, form { margin: 0; padding: 0; }
#slide { position:relative; width:600px; margin:0 auto; }
#outerDiv { width:600px; height:120px; overflow:hidden; position:relative; margin:0 auto; }
#innerDiv { width:1200px; overflow:hidden; }/*width = outerDiv.width * 2*/
.contentDiv { width:99999px }
.contentArea { position:relative; width:600px; height:120px; float:left; display:inline; }/*width = outerDiv.width - marginLeft*/
.contentColumn { width:100px; height:100px; float:left; margin-right:20px; display:inline; }
.slipBtn { position:absolute; top:50px; }
.clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clear { zoom:1; }
</style>
</head>
<body>
<div id="slide">
<div id="outerDiv">
<div id="innerDiv">
<div id="contentDiv" class="contentDiv">
<div id="contentArea" class="contentArea">
<div class="contentColumn" style="background:#c00;"></div>
<div class="contentColumn" style="background:#F93;"></div>
<div class="contentColumn" style="background:#FF6;"></div>
<div class="contentColumn" style="background:#0C3;"></div>
<div class="contentColumn" style="background:#39c;"></div>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)" id="pre" title="previous" class="slipBtn" style="left:-80px;">previous</a>
<a href="javascript:void(0)" id="next" title="next" class="slipBtn" style="right:-60px;">next</a>
</div>
<script>
function $$(id){
return typeof id == "string" ? document.getElementById(id) : id;
}
var each = function (obj, fn, scope) {
for (var i = 0, n = obj.length ; i < n; i++) {
if (fn.call(scope || obj[i], obj[i], i, obj) === false ) {
break;
}
}
},
addEventHandler = function(oTarget, EventType, fnHandler){
if(oTarget.addEventListener){
oTarget.addEventListener(EventType, fnHandler, false);
}else if(oTarget.attachEvent){
oTarget.attachEvent("on" + EventType,fnHandler);
}else{
oTarget["on"+ EventType] = fnHandler;
}
},
removeEventHandler = function(oTarget, EventType, fnHandler){
if(oTarget.removeEventListener){
oTarget.removeEventListener(EventType,fnHandler,false);
}else if(oTarget.detachEvent){
oTarget.detachEvent("on" + EventType,fnHandler);
}else{
oTarget["on"+EventType] = null;
}
};
(function(curPos,preBtn,nextBtn){
var s = "style",
ua = navigator.userAgent.toUpperCase(),
outerDiv = $$("outerDiv"),
innerDiv = $$("innerDiv"),
contentDiv = $$("contentDiv"),
contentArea = $$("contentArea"),
contentArea2 = contentArea.cloneNode(true),
addEvent = function(node, i){
if(node.nodeType == 1){
node.onclick = function(){
sc(node,i);
}
}
};
contentArea2.id = "contentArea2";
contentDiv.appendChild(contentArea2);
each(contentArea.childNodes, addEvent);
each(contentArea2.childNodes, addEvent);
var sc = function(node,index){
var count = 0,
_self = arguments.callee;
if(typeof _self.timer == "undefined") _self.timer = 0;
clearTimeout(_self.timer);
var move = function(){
var pos = node.parentNode.offsetLeft + node.offsetLeft - contentDiv.offsetLeft - outerDiv.scrollLeft;
if(outerDiv.scrollLeft == outerDiv.scrollWidth/2 && pos != 0) {
outerDiv.scrollLeft -= outerDiv.scrollLeft;
node = contentArea.childNodes[index]
} else if(outerDiv.scrollLeft == 0 && pos != curPos*2) {
outerDiv.scrollLeft = outerDiv.scrollWidth/2;
node = contentArea2.childNodes[index]
}
if(pos > curPos){
outerDiv.scrollLeft += 10
}else if(pos < curPos){
outerDiv.scrollLeft -= 10;
}else if(pos == curPos){
//callBack();
return
}
_self.timer = setTimeout(arguments.callee, 32);
}
move();
},
slip = function(direction){
var count = 0,
_self = arguments.callee;
if(typeof _self.timer == "undefined") _self.timer = 0;
clearTimeout(_self.timer);
var move = function(){
if(direction == "right"){
outerDiv.scrollLeft -= 10;
if(outerDiv.scrollLeft == 0) outerDiv.scrollLeft = outerDiv.scrollWidth/2;
}else if(direction == "left"){
outerDiv.scrollLeft += 10;
if(outerDiv.scrollLeft == outerDiv.scrollWidth/2) outerDiv.scrollLeft = 0;
}
count++;
if(count == curPos/20) {
//callBack(node[s].background);
return
}
setTimeout(arguments.callee, 32);
}
move();
},
callBack = function(param) {
var popup = document.createDiv("div");
};
if(typeof preBtn != "undefined") addEventHandler(preBtn,"click",function(){slip("right")});
if(typeof nextBtn != "undefined") addEventHandler(nextBtn,"click",function(){slip("left")});
})(240,$$("pre"),$$("next"))
</script>
</body>
</html>
slide box
