Recently in helping others to change something, on the internet for a long time, but not the same, their own changed, take out to share under:
First show the effect of the following:
Index.html page Display Code
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title></title>
<link href= "Css/css.css" rel= "stylesheet" type= "Text/css" > </LINK>
<script language= "JavaScript" src= "Js/16sucai.js" ></SCRIPT>
<script type= "Text/javascript" >
</script>
<body>
<div id= "box" >
<pre class= "prev" style= "Display:none;" >prev</PRE>
<pre class= "Next" style= "Display:none;" >next</PRE>
<UL>
<li>
<div >
<P> Little Joe, one of the main female characters of the Three Kingdoms period. In the Three Kingdoms belonged to Wu, national beauty displaced, the capital appearance is incomparable, is the famous East Wu beautiful woman at that time. </P></DIV></LI>
<li>
<DIV>
<P> Pan, the Western Jin Dynasty writer, Pan Yue. The first of the most famous handsome man in ancient China, the first of "24 Friends of Golden Valley". </P></DIV></LI>
<li>
<DIV>
<P> Zhu Yuanzhang, Ming Dynasty's founding emperor, the establishment of a unified national feudal regime. </P></DIV></LI>
<li>
<div >
<P> Lu Pheasant, the original wife of the founding emperor Gaozulibon of the Western Han Dynasty, the first female ruler in power in Chinese history. </P></DIV></LI>
<li>
<div >
<P> Zhuge Liang, Prime Minister of Shu Han, outstanding statesman, strategist, inventor and strategist in the Three Kingdoms period. </P></DIV></LI>
</UL>
<div class= ' Numbutdiv ' >
<div class= ' NDV ' >
<label name= ' numbut ' id= ' 0 ' ></label>
<label name= ' numbut ' id= ' 1 ' ></label>
<label name= ' numbut ' id= ' 2 ' ></label>
<label name= ' numbut ' id= ' 3 ' ></label>
<label name= ' numbut ' id= ' 4 ' ></label>
</div>
</div>
</DIV>
</body>
Next is the corresponding JS file content:
Copy Code code as follows:
var tempi=0;
function Zoompic ()
{
This.initialize.apply (this, arguments);
}
Zoompic.prototype =
{
Initialize:function (ID)
{
var _this = this;
This.wrap = typeof id = = "string"? document.getElementById (ID): ID;
This.oul = This.wrap.getElementsByTagName ("ul") [0];
This.ali = This.wrap.getElementsByTagName ("Li");
This.spans = this.wrap.getElementsByTagName ("label");
This.prev = This.wrap.getElementsByTagName ("pre") [0];
This.next = This.wrap.getElementsByTagName ("Pre") [1];
This.timer = null;
This.asort = [];
This.aspan = [];
This.icenter = 2;
This._doprev = function () {return _this.doprev.apply (_this)};
This._donext = function () {return _this.donext.apply (_this)};
This.options = [
{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 < this.aLi.length i++) this.asort[i] = This.ali[i];
for (var i = 0; i < this.spans.length i++) this.aspan[i] = this.spans[i];
This.aSort.unshift (This.aSort.pop ());
This.setup ();
This.addevent (This.prev, "click", This._doprev);
This.addevent (This.next, "click", This._donext);
This.doimgclick ();
This.dospansclick ();
This.timer = setinterval (function ()
{
_this.donext ()
}, 3000);
This.wrap.onmouseover = function ()
{
Clearinterval (_this.timer)
};
This.wrap.onmouseout = function ()
{
_this.timer = setinterval (function ()
{
_this.donext ()
}, 3000);
}
},
Doprev:function ()
{
This.aSort.unshift (This.aSort.pop ())//Deletes the last item of the array and returns an array to get the last
This.setup ()
},
Donext:function ()
{
This.aSort.push (This.aSort.shift ())//delete the first item of the array, and return the array delete first, then push the first one to the last
This.setup ()
},
Doimgclick:function ()
{
var _this = this;
for (var i = 0; i < this.aSort.length; i++)
{
This.asort[i].onclick = function ()
{//alert (This.index);
if (This.index > _this.icenter)
{
for (var i = 0; i < this.index-_this.icenter; i++) _this.asort.push (_this.asort.shift ());
_this.setup ()
}
else if (This.index < _this.icenter)
{
for (var i = 0; i < _this.icenter-this.index i++) _this.asort.unshift (_this.asort.pop ());
_this.setup ()
}
}
}
},dospansclick:function () {
var _this = this;
for (var i = 0; i < this.aSpan.length; i++)
{
This.aspan[i].onclick = function ()
{
alert (this.id);
Alert (_this.asort[_this.icenter].getelementsbytagname (' img ') [0].name);//Get to current is the first few in the middle
var cruunum=_this.asort[_this.icenter].getelementsbytagname (' img ') [0].name;
if (This.id > _this.icenter)
// {
for (var i = 0; i < this.id-_this.icenter; i++) _this.asort.push (_this.asort.shift ());
_this.setup ()
Alert (this.id+ ' ... ' +cruunum);
if (this.id-cruunum>0) {
for (var i = 0; i < this.id-cruunum i++) _this.asort.push (_this.asort.shift ());
_this.setup ()
}else{
if (cruunum==5) {
if (this.id-cruunum>0) {
for (var i = 0; i <-(this.id-cruunum); i++) _this.asort.unshift (_this.asort.pop ())//Fetch
_this.setup ();
//}
//}
}
else{
for (var i = 0; i <-(this.id-cruunum); i++) _this.asort.push (_this.asort.shift ())//Fetch
_this.setup ()
//
// }
// }
else if (This.id < _this.icenter)
// {
for (var i = 0; i < _this.icenter-this.id i++) _this.asort.unshift (_this.asort.pop ());
_this.setup ()
// }
for (var i = 0; I <5; i++) {
_this.asort.push (_this.asort.shift ());//Take the first
Alert (_this.asort[_this.icenter].getelementsbytagname (' img ') [0].name+ ' AAA ' +this.id);
if (_this.asort[_this.icenter].getelementsbytagname (' img ') [0].name== (this.id+1)) {
_this.setup ()
Break
// }
// }
}
}
},
Setup:function ()
{
var _this = this;
var i = 0;
for (i = 0; i < this.aSort.length i++) This.oUl.appendChild (this.asort[i);//gebytagui0
for (i = 0; i < this.aSort.length; i++)
{
This.asort[i].index = i;
Control floating Layer
if (I < 5)
{
This.css (This.asort[i], "display", "block");
This.domove (This.asort[i], this.options[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 ()/mouse put up
{
_this.domove (This.getelementsbytagname ("div") [0], {bottom:0})
};
_this.asort[_this.icenter].onmouseout = function ()
{
_this.domove (This.getelementsbytagname ("div") [0], {bottom:-100})
}
})
})
});
}
Else
{
This.css (This.asort[i], "display", "none");
This.css (This.asort[i], "width", 0);
This.css (This.asort[i], "height", 0);
This.css (This.asort[i], "top", 37);
This.css (This.asort[i], "left", THIS.OUL.OFFSETWIDTH/2)
}
if (I < This.icenter | | | i > This.icenter)//
{
This.css (This.asort[i].getelementsbytagname ("img") [0], "opacity", 30)
This.asort[i].onmouseover = function ()
{
_this.domove (This.getelementsbytagname ("img") [0], {opacity:100})
};
This.asort[i].onmouseout = function ()
{
_this.domove (This.getelementsbytagname ("img") [0], {opacity:35})
};
This.asort[i].onmouseout ();
}
Else
{
It's always 2 in the middle.
alert (this.asort[i].text);//Cancel Brighten Event
Alert (This.asort[i].getelementsbytagname ("img") [0].name);
Transform color
var ttse=this.asort[i].getelementsbytagname ("img") [0].name;
var numbuts= document.getelementsbyname (' numbut ');
alert (numbuts.length);
for (Var t=0;t<numbuts.length;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==numbuts.length) {
Alert (t);
Numbuts[0].classname = ' Numbutcen ';
}else{
Modify Class All
Numbuts[t].classname= ' numbut ';
}
var aobj = document.getElementById ("ID of a");
Adding events
alert (tempi);
if (tempi==0) {//alert (tempi);
if (Window.addeventlistener) {//mozilla series
Numbuts[t].addeventlistener (' Click ', _this.addclick (t+1), false);
else if (window.attachevent) {//ie
Numbuts[t].attachevent (' onclick ', This.addclick (t+1));
// }
// }
}
tempi++;
This.asort[i].onmouseover = This.asort[i].onmouseout = null
}
}
},addevent:function (Oelement, Seventtype, Fnhandler)
{
Return Oelement.addeventlistener? Oelement.addeventlistener (Seventtype, Fnhandler, False): Oelement.attachevent ("on" + Seventtype, Fnhandler)
},
Css:function (Oelement, attr, value)
{
if (arguments.length = 2)
{
Return Oelement.currentstyle? OELEMENT.CURRENTSTYLE[ATTR]: getComputedStyle (oelement, NULL) [attr]
}
else if (arguments.length = 3)
{
Switch (attr)
{
Case "width":
Case "Height":
Case ' top ':
Case "left":
Case "Bottom":
OELEMENT.STYLE[ATTR] = value + "px";
Break
Case "opacity":
OElement.style.filter = "Alpha (opacity=" + value + ")";
oElement.style.opacity = value/100;
Break
Default:
OELEMENT.STYLE[ATTR] = value;
Break
}
}
},
Domove:function (Oelement, oattr, Fncallback)
{
var _this = this;
Clearinterval (Oelement.timer);
Oelement.timer = setinterval (function ()
{
var bstop = true;
For (Var property in oattr)
{
var icur = parsefloat (_this.css (Oelement, property));
property = = "Opacity" && (icur = parseint (icur.tofixed (2) * 100));
var ispeed = (Oattr[property]-icur)/5;
Ispeed = ispeed > 0? Math.ceil (ispeed): Math.floor (Ispeed);
if (icur!= Oattr[property])
{
Bstop = false;
_this.css (Oelement, property, Icur + ispeed)
}
}
if (bstop)
{
Clearinterval (Oelement.timer);
Fncallback && fncallback.apply (_this, arguments)
}
}, 30)
},addclick:function (num) {
alert (num);
if (This.index > _this.icenter)
// {
for (var i = 0; i < this.index-_this.icenter; i++) _this.asort.push (_this.asort.shift ());
_this.setup ()
// }
}
};
Window.onload = function ()
{
New Zoompic ("box");
};
function tt () {
Alert (1);
}
OK, finally add some things on the style, you can run up;
Copy Code code as follows:
Body {
margin:0px; padding:0px;
}
div {
margin:0px; padding:0px;
}
UL {
margin:0px; padding:0px;
}
Li {
margin:0px; padding:0px;
}
h4 {
margin:0px; padding:0px;
}
p {
margin:0px; padding:0px;
}
Body {
No-repeat 50% 0px rgb (0, 0, 0); font:12px/1.8 Arial; Color:rgb (255, 255, 255); Font-size-adjust:none; Font-stretch:normal;
}
A
Background:rgb (102, 102, 102); PADDING:2PX 5px; Color:rgb (255, 255, 255); Text-decoration:none;
}
a:hover {
Background:rgb (255, 153, 0);
}
#box {
margin:1px Auto 0px; width:680px; height:320px; position:relative;
}
#box ul {
width:680px; height:320px; position:relative;
}
#box Li {
Background:rgb (0, 0, 0); List-style:none; border-radius:3px; border:0px solid RGB (0, 0, 0); left:377px; top:146px; width:0px; height:0px; Overflow:hidden; Position:absolute; z-index:0; Cursor:pointer;
}
#box Li Div {
Background:rgb (0, 0, 0); width:100%; height:40px; Bottom: -100px; Position:absolute; opacity:0.7;
}
#box Li Div h4 {
font:12px/24px Arial; margin:0px 10px; Border-bottom-color:rgb (51, 51, 51); border-bottom-width:1px; Border-bottom-style:solid; Font-size-adjust:none; Font-stretch:normal;
}
#box Li Div h4 span {
color:red; margin-left:10px;
}
#box Li Div p {
margin:5px 10px 0px; Text-indent:2em;
}
numbutleft{width:15px height:5px; Background-color: #AFB7B6; float:left; cursor:pointer;}
numbut{width:15px height:5px; Background-color: #AFB7B6; float:left; margin-left:5px; cursor:pointer;}
numbutcen{width:15px height:5px; Background-color: #FF0000; float:left; margin-left:5px; cursor:pointer;}
numbutleftcen{width:15px height:5px; Background-color: #FF0000; float:left; cursor:pointer;}
. numbutdiv{height:10px;width:100%;color:red;margin-top:0px padding-top:0px}
. ndv{height:10px;width:95px margin:0 Auto}
#box. Next {
Background-position: -39px 0px; Right: -60px;
}
#copyright {
Text-align:center; padding-top:10px;
}
OOOOOKKK, the peculiar effect will come out, there are some imperfect places, too lazy to change, there are masters can change to see, but hope to share oh.
The effect is as follows:
