اسمحوا لي أن أريكم صورة عرض التأثير أولاً
ما يلي هو الرمز التفصيلي:
نسخة الكود كما يلي:
دالة lgy_picswitch (الخيار) {
this.owrap = this.getId (othor.wrapid) ؛ // العنصر الخارجي
this.olistwrap = this.getNodeByClassName (this.owrap ، 'gy_picswitch_listwrap') [0] ؛
this.oul = this.olistwrap.getElementSbyTagname ('ul') [0] ؛
this.obtnprev = this.getNodebyClassName (this.owrap ، 'gy_picswitch_prev') [0] ؛
this.obtnnext = this.getNodebyClassName (this.owrap ، 'gy_picswitch_next') [0] ؛
this.nlen = this.oul.getElementSbyTagname ('li'). الطول ؛ // إجمالي عدد الصور
this.nscollCount = Option.scrollCount ؛ // عدد اللفائف في الوقت المناسب
this.nscolllen = math.ceil (this.nlen/option.scrollCount) ؛ // تبديل القيمة القصوى للحكم
this.nswitchwidth = 0 ؛ // تم نقل المسافة في كل مرة تقوم فيها بالتبديل ، وتحصل على القيمة في الرمز ديناميكيًا
this.nindex = 0 ؛ // قم بتبديل الفهرس الحالي للصورة
this.timer = null ؛ // قم بتبديل قيمة اقتباس الصورة
this.int () ؛
}
lgy_picswitch.prototype = {
getID: وظيفة (معرف) {
return document.getElementById (id) ؛
} ،
getNodeByClassName: Function (Parent ، className) {
var classelements = new Array () ؛
var els = parent.getElementSbyTagName ('*') ؛
var elslen = els.length ؛
var pattern = new regexp ("(^| // s)"+className+"(// s | $)") ؛
لـ (i = 0 ، j = 0 ؛ i <elslen ؛ i ++) {
if (pattern.test (els [i] .classname)) {
classelements [j] = els [i] ؛
J ++ ؛
}
}
إرجاع الفصل.
} ،
GETCSS: وظيفة (العقدة ، القيمة)
{
return node.currentStyle؟ node.currentStyle [value]: getComputedStyle (Node ، Null) [value] ؛
} ،
setcss: function (node ، val) {
لـ (var v in val) {
node.style.csstext += '؛' +v +':' +val [v] ؛
}
} ،
MoveFn: Function (Node ، Value ، TargetValue ، Callback) {
var _ that = this ؛
ClearInterval (this.timer) ؛
this.timer = setInterval (function ()
{
var val = parsefloat (_that.getcss (العقدة ، القيمة)) ؛
var speed = (TargetValue- val)/8 ؛
السرعة = السرعة> 0؟ Math.ceil (السرعة): Math.Floor (السرعة) ؛
إذا (السرعة == 0)
{
ClearInterval (_ that.timer) ؛
Callback && callback () ؛
}
آخر
{
node.style [value] = (val + speed) + 'px' ؛
}
} ، 20) ؛
} ،
picChange: function () {
this.movefn (this.oul ، 'marginleft' ،-this.nindex*this.nswitchwidth) ؛
} ،
CancelBubble: function (e) {
E.Stoppropagation؟ e.StopPropagation ():
} ،
btnisshow: 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 || window.event ؛
_ that.cancelbubble (e) ؛
if (_that.nindex! = 0) {
_ that.nindex-- ؛
_ that.picchange () ؛
_ that.btnisshow () ؛
}
}
} ،
btnnext: function () {
var _ that = this ؛
this.obtnnext.onclick = function (e) {
var e = e || window.event ؛
_ that.cancelbubble (e) ؛
if (_that.nindex! = (_That.nscolllen-1)) {
_ that.nindex ++ ؛
_ that.picchange () ؛
_ that.btnisshow () ؛
}
}
} ،
int: function () {
// احصل على عرض الحركة ديناميكيًا
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 ؛
// زر التهيئة
this.btnisshow () ؛
// التبديل اليسار واليمين
this.btnprev () ؛
this.btnnext () ؛
}
}
رمز HTML:
نسخة الكود كما يلي:
/*
* يجب أن يكون بنية HTML كما يلي: اسم المعرف الخارجي ، مرره على النحو التالي: id = "gy_picswitch02" ، اسم المعرف ، أعطه لك بشكل عرضي
ومع ذلك ، يجب أن يكون الهيكل في الداخل هو نفسه ، بما في ذلك اسم الفصل
<div id = "gy_picswitch02">
<span> </span>
<span> </span>
<viv>
<ul>
<li> <img src = "Images/pic01.jpg"> </li>
<li> <img src = "الصور/pic02.jpg"> </li>
<li> <img src = "Images/pic03.jpg"> </li>
<li> <img src = "Images/PIC04.JPG"> </li>
<li> <img src = "Images/PIC05.jpg"> </li>
<li> <img src = "Images/pic06.jpg"> </li>
<li> <img src = "images/pic07.jpg"> </li>
<li> <img src = "Images/pic08.jpg"> </li>
</ul>
</div>
</div>
المعلمات: "التفاف": "xxxx" ، اسم المعرف الخارجي
'ScrollCount': 5 ، عدد اللفخ
نسخة الكود كما يلي:
*
*/
// instantiation
new Lgy_picswitch ({'wrapid': 'gy_picswitch' ، 'ScrollCount': 5}) ؛
هل هي وظيفة مريحة للغاية؟ كما أنه سهل الاستخدام للغاية. أوصي به لأصدقائي هنا ، آمل أن يكون ذلك مفيدًا للجميع