효과 디스플레이 사진을 먼저 보여 드리겠습니다
다음은 자세한 코드입니다.
코드 사본은 다음과 같습니다.
함수 lgy_picswitch (옵션) {
this.owrap = this.getId (옵션 .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 = 옵션 .scrollCount; // 시간당 두루마리 수입니다
this.nscolllen = math.ceil (this.nlen/옵션 .scrollcount); // 판단의 최대 값을 전환합니다
this.nswitchwidth = 0; // 전환 할 때마다 이동 거리가 이동하고 코드에서 동적으로 값을 얻습니다.
this.nindex = 0; // 이미지의 현재 인덱스를 전환합니다
this.timer = null; // 이미지의 따옴표 값을 전환합니다
this.int ();
}
lgy_picswitch.prototype = {
getid : function (id) {
return document.getElementById (id);
},
getNodeByClassName : 함수 (부모, 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)) {
분류 [j] = els [i];
J ++;
}
}
반환 계급 요소;
},
getcss : 함수 (노드, 값)
{
return node.currentStyle? node.currentStyle [value] : getComputedStyle (Node, NULL) [value];
},
setcss : function (node, val) {
for (var in val) {
node.style.csstext += ';' +v +':' +val [v];
}
},
movefn : 함수 (노드, 값, targetValue, 콜백) {
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 (속도);
if (speed == 0)
{
ClearInterVal (_that.Timer);
콜백 && 콜백 ();
}
또 다른
{
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;
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 이름, 다음과 같이 전달하십시오. id = "gy_picswitch02", id name, casually 당신에게주십시오.
그러나 클래스 이름을 포함하여 내부의 구조는 동일해야합니다.
<div id = "gy_picswitch02">
<span> </span>
<span> </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', 가장 바깥 쪽 ID 이름입니다
'ScrollCount': 5, 스크롤 수
코드 사본은 다음과 같습니다.
*
*/
// 인스턴스화
new lgy_picswitch ({ 'wrapid': 'gy_picswitch', 'scrollcount': 5});
매우 편리한 기능입니까? 또한 사용하기가 매우 쉽습니다. 여기 친구들에게 추천합니다. 모두에게 도움이되기를 바랍니다.