Lassen Sie mich Ihnen zuerst das Bild anzeigen
Das Folgende ist der detaillierte Code:
Die Codekopie lautet wie folgt:
Funktion LGY_PICSwitch (Option) {
this.owrap = this.getId (option.wrapID); // das äußerste Element
this.olistwrap = this.getNodeByClassName (this.owrap, 'gy_picSwitch_listwrap') [0];
this.oul = this.olistwrap.getElementsByTagName ('ul') [0];
this.obtnprev = this.getNodeByClassName (this.owrap, 'gy_picschitch_prev') [0];
this.obtnnext = this.getNodeByClassName (this.owRap, 'gy_picSwitch_next') [0];
this.nlen = this.oul.getElementsByTagName ('li'). Länge; // Gesamtzahl der Bilder
this.nscollCount = option.scrollCount; // die Anzahl der Schriftrollen pro Zeit
this.nscolllen = math.ceil (this.nlen/option.scrollCount); // Wechseln Sie den Maximalwert des Urteils
this.nswitchwidth = 0; // Die Entfernung bewegt sich jedes Mal, wenn Sie wechseln, und erhalten Sie den Wert dynamisch im Code
this.nindex = 0; // Wechseln Sie den aktuellen Index des Bildes
this.timer = null; // Wechseln Sie den Anführungswert des Bildes
this.int ();
}
Lgy_picsschitch.prototype = {
getId: function (id) {
return document.getElementById (id);
},
GetNodeByClassName: Funktion (übergeordnet, className) {
var classelements = new Array ();
var els = parent.getElementsByTagName ('*');
var elslen = elsgth;
var muster = new regexp ("(^| // s)"+className+"(// s | $)");
für (i = 0, j = 0; i <elslen; i ++) {
if (muster.test (els [i] .className)) {
Klasse [j] = els [i];
J ++;
}
}
Return Classels;
},
GetCSS: Funktion (Knoten, Wert)
{
return node.currentStyle? node
},
setCSS: Funktion (Knoten, Val) {
für (var v in val) {
node.Style.csStext += ';' +v +':' +val [v];
}
},
MOVEFN: Funktion (Knoten, Wert, TargetValue, Rückruf) {
var _that = this;
ClearInterval (this.timer);
this.timer = setInterval (function ()
{
var val = parsefloat (_that.getCSS (Knoten, Wert));
var speed = (targetValue-val)/8;
Speed = Geschwindigkeit> 0? Math.Ceil (Geschwindigkeit): Math.Floor (Geschwindigkeit);
if (Geschwindigkeit == 0)
{
ClearInterval (_that.timer);
Callback && callback ();
}
anders
{
node.Style [value] = (val + Geschwindigkeit) + 'px';
}
}, 20);
},
picchange: function () {
this.movefn (this.oul, 'marginleft',-this.nindex*this.nswitchwidth);
},
CancelBubble: Funktion (e) {
E.StopPropagation? E.StopPropagation (): E. CancelBubble = True;
},
btnishow: function () {
this.setCSS (this.obtnnext, {'display': 'block'});
this.setCSS (this.obtnprev, {'display': 'block'});
if (this.nindex == 0) this.setcss (this.obtnprev, {'display': 'none'});
if (this.nindex == (this.nscolllen-1)) this.setcss (this.obtnnext, {'display': 'None'});
},
btnprev: function () {
var _that = this;
this.obtnprev.onclick = function (e) {
var e = e || Fenster.Event;
_that.cancelBubble (e);
if (_that.nindex! = 0) {
_that.Nindex--;
_that.picchange ();
_That.Btnishow ();
}
}
},
btnnext: function () {
var _that = this;
this.obtnnext.onclick = function (e) {
var e = e || Fenster.Event;
_that.cancelBubble (e);
if (_that.nindex! = (_that.nscolllen-1)) {
_that.nindex ++;
_that.picchange ();
_That.Btnishow ();
}
}
},
int: function () {
// Dynamisch die Breite der Bewegung erhalten
var oli = this.oul.getElementsByTagName ('li') [0],
oli_w = oli.offsetwidth + parseInt (this.getCss (oli, 'marginleft')) + parseInt (this.getCSS (oli, 'marginright'));
this.nswitchwidth = oli_w*this.nscollCount;
// Schaltfläche Anzeigeinitialisierung
this.Btnishow ();
// links und rechts wechseln
this.btnprev ();
this.btnnext ();
}
}
HTML -Code:
Die Codekopie lautet wie folgt:
/*
* Die HTML -Struktur muss wie folgt sein
Die Struktur im Inneren muss jedoch gleich sein, einschließlich des Klassennamens
<div id = "gy_picSwitch02">
<span> </span>
<span> </span>
<div>
<ul>
<li> <img src = "Bilder/pic01.jpg"> </li>
<li> <img src = "Bilder/pic02.jpg"> </li>
<li> <img src = "Bilder/pic03.jpg"> </li>
<li> <img src = "Bilder/pic04.jpg"> </li>
<li> <img src = "Bilder/pic05.jpg"> </li>
<li> <img src = "Bilder/pic06.jpg"> </li>
<li> <img src = "Bilder/pic07.jpg"> </li>
<li> <img src = "Bilder/pic08.jpg"> </li>
</ul>
</div>
</div>
Parameter: 'WrapID': 'xxxx', der äußerste ID -Name
'ScrollCount': 5, die Anzahl der Schriftrollen
Die Codekopie lautet wie folgt:
*
*/
// Instanziierung
new LGy_PICSwitch ({'WrapID': 'Gy_PICSwitch', 'ScrollCount': 5});
Ist es eine sehr bequeme Funktion? Es ist auch sehr einfach zu bedienen. Ich empfehle es meinen Freunden hier, ich hoffe, es wird für alle hilfreich sein