SoFunction
Updated on 2025-02-28

JS slideshow can be played in a loop and can be played smoothly with scrolling navigation (self-write)


//var tempi=0;
function ZoomPic ()
{
(this, arguments);
}
=
{
initialize : function (id)
{
var _this = this;
= typeof id === "string" ? (id) : id;
= ("ul")[0];
= ("li");
= ("label");
= ("pre")[0];
= ("pre")[1];
= null;
= [];
= [];
= 2;
this._doPrev = function () {return _this.(_this)};
this._doNext = function () {return _this.(_this)};
= [
{width:50, height:212, top:55, left:0, zIndex:1},
{width:90, height:252, top:35, left:50, zIndex:2},
{width:400, height:292, top:10, left:140, zIndex:3},
{width:90, height:252, top:35, left:540, zIndex:2},
{width:50, height:212, top:55, left:630, zIndex:1}
];
for (var i = 0; i < ; i++) [i] = [i];
for (var i = 0; i < ; i++) [i] = [i];
(());
();
(, "click", this._doPrev);
(, "click", this._doNext);
();
();
= setInterval(function ()
{
_this.doNext()
}, 3000);
= function ()
{
clearInterval(_this.timer)
};
= function ()
{
_this.timer = setInterval(function ()
{
_this.doNext()
}, 3000);
}
},
doPrev : function ()
{
(());//Delete the last item in the array and return the array to get the last one
()
},
doNext : function ()
{
(());//Delete the first item of the array and return the array Delete the first bit, and then push the first bit to the last one
()
},
doImgClick : function ()
{
var _this = this;
for (var i = 0; i < ; i++)
{
[i].onclick = function ()
{ //alert();
if ( > _this.iCenter)
{
for (var i = 0; i < - _this.iCenter; i++) _this.(_this.());
_this.setUp()
}
else if( < _this.iCenter)
{
for (var i = 0; i < _this.iCenter - ; i++) _this.(_this.());
_this.setUp()
}
}
}
},dospansClick:function(){
var _this = this;
for (var i = 0; i < ; i++)
{
[i].onclick = function ()
{
//alert();
//alert(_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name);// Get the current one in the middle
var cruuNum=_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name;
// if ( > _this.iCenter)
// {
// for (var i = 0; i < - _this.iCenter; i++) _this.(_this.());//Fetch
// _this.setUp()
//alert(+'...'+cruuNum);
if(-cruuNum>0){
for (var i = 0; i < -cruuNum; i++) _this.(_this.());//Fetch
_this.setUp()
}else{
//if(cruuNum==5){
//if(-cruuNum>0){
for (var i = 0; i < -(-cruuNum); i++) _this.(_this.());//Fetch
_this.setUp();
//}

//}
}
// else{
// for (var i = 0; i < -(-cruuNum); i++) _this.(_this.());//Fetch
// _this.setUp()
//
// }




// }
// else if( < _this.iCenter)
// {
// for (var i = 0; i < _this.iCenter - ; i++) _this.(_this.());
// _this.setUp()
// }

// for (var i = 0; i <5; i++){
// _this.(_this.());//Please the first one
// alert(_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name+'aaa'+);
// if(_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name==(+1)){
// _this.setUp()
// break;
// }
// }

}
}
},
setUp : function ()
{
var _this = this;
var i = 0;
for (i = 0; i < ; i++) ([i]);//gebytagui0
for (i = 0; i < ; i++)
{
[i].index = i;
//Control the floating layer
if (i < 5)
{

([i], "display", "block");
([i], [i], function ()
{
_this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img")[0], {opacity:100}, function ()
{
_this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img")[0], {opacity:100}, function ()
{
_this.aSort[_this.iCenter].onmouseover = function ()//Put the mouse on
{
_this.doMove(("div")[0], {bottom:0})
};
_this.aSort[_this.iCenter].onmouseout = function ()
{
_this.doMove(("div")[0], {bottom:-100})
}
})
})
});
}
else
{
([i], "display", "none");
([i], "width", 0);
([i], "height", 0);
([i], "top", 37);
([i], "left", / 2)
}
if (i < || i > )//
{
([i].getElementsByTagName("img")[0], "opacity", 30)
[i].onmouseover = function ()
{
_this.doMove(("img")[0], {opacity:100})
};
[i].onmouseout = function ()
{
_this.doMove(("img")[0], {opacity:35})
};
[i].onmouseout();
}
else
{
//The middle is always 2
//alert([i].text);//Cancel the lightening event
//alert([i].getElementsByTagName("img")[0].name);
//Change color
var ttSe=[i].getElementsByTagName("img")[0].name;
var numbuts= ('numBut');
//alert();

for(var t=0;t<;t++){
if(t==0){
if(ttSe==5){
numbuts[t].className ='numbutLeftCen';
}else
numbuts[t].className ='numbutLeft';
}else if(t==ttSe){
numbuts[t].className ='numbutCen';
}else if(t==){
//alert(t);
numbuts[0].className ='numbutCen';
}else{
//Modify all class
numbuts[t].className='numbut';
}
//var aObj = ("a's ID");
//Add event
//alert(tempi);
// if(tempi==0){//alert(tempi);
// if () {//Mozilla series
// numbuts[t].addEventListener('click', _this.addClick(t+1), false);
// } else if () {//IE
// numbuts[t].attachEvent('onclick', (t+1));
// }
// }
}
//tempi++;
[i].onmouseover = [i].onmouseout = null
}
}
},addEvent : function (oElement, sEventType, fnHandler)
{
return ? (sEventType, fnHandler, false) : ("on" + sEventType, fnHandler)
},
css : function (oElement, attr, value)
{
if ( == 2)
{
return ? [attr] : getComputedStyle(oElement, null)[attr]
}
else if ( == 3)
{
switch (attr)
{
case "width":
case "height":
case "top":
case "left":
case "bottom":
[attr] = value + "px";
break;
case "opacity" :
= "alpha(opacity=" + value + ")";
= value / 100;
break;
default :
[attr] = value;
break
}
}
},
doMove : function (oElement, oAttr, fnCallBack)
{
var _this = this;
clearInterval();
= setInterval(function ()
{
var bStop = true;
for (var property in oAttr)
{
var iCur = parseFloat(_this.css(oElement, property));
property == "opacity" && (iCur = parseInt((2) * 100));
var iSpeed = (oAttr[property] - iCur) / 5;
iSpeed = iSpeed > 0 ? (iSpeed) : (iSpeed);

if (iCur != oAttr[property])
{
bStop = false;
_this.css(oElement, property, iCur + iSpeed)
}
}
if (bStop)
{
clearInterval();
fnCallBack && (_this, arguments)
}
}, 30)
},addClick:function (num){
//alert(num);
// if ( > _this.iCenter)
// {
// for (var i = 0; i < - _this.iCenter; i++) _this.(_this.());
// _this.setUp()
// }
}
};
= function ()
{
new ZoomPic("box");
};
function tt(){
//alert(1);

}