Позвольте мне сначала показать вам изображение отображения эффекта
Ниже приведен подробный код:
Кода -копия выглядит следующим образом:
function lgy_picswitch (option) {
this.owrap = this.getid (option.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'). Length; // общее количество картин
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: function (id) {
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 | $)");
for (i = 0, j = 0; i <elslen; i ++) {
if (pattern.test (els [i] .classname)) {
ClassElements [j] = els [i];
J ++;
}
}
вернуть классификации;
},
getCss: function (узел, значение)
{
return node.currentStyle? node.currentStyle [значение]: getComputEdStyle (Node, NULL) [значение];
},
setCss: function (node, val) {
для (var v in val) {
node.style.csstext += ';' +v +':' +val [v];
}
},
MOVEFN: FUNCTION (NODE, значение, TargetValue, Callback) {
var _that = это;
clearInterval (this.timer);
this.timer = setInterval (function ()
{
var val = parsefloat (_that.getcss (node, value));
var speed = (targetvalue- val)/8;
speed = speed> 0? math.ceil (speed): math.floor (speed);
if (speed == 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 (): e.cancelbubble = true;
},
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.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.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">
<pran> </span>
<pran> </span>
<div>
<ul>
<li> <img src = "Images/pic01.jpg"> </li>
<li> <img src = "Images/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>
Параметры: 'wrapid': 'xxxx', самое внешнее идентификационное имя
'ScrollCount': 5, количество свитков
Кода -копия выглядит следующим образом:
*
*/
// экземпляр
new lgy_picswitch ({'wrapid': 'gy_picswitch', 'scrollcount': 5});
Это очень удобная функция? Это также очень просто в использовании. Я рекомендую здесь своим друзьям, надеюсь, это будет полезно всем