JavaScript ดั้งเดิมเพื่อรับรู้การสลับปุ่มภาพ

ให้ฉันแสดงภาพการแสดงผลเอฟเฟกต์ก่อน

ต่อไปนี้เป็นรหัสโดยละเอียด:

การคัดลอกรหัสมีดังนี้:

ฟังก์ชั่น 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/opption.scrollCount); // สลับค่าสูงสุดของการตัดสิน

this.nswitchwidth = 0; // ระยะทางเคลื่อนที่ทุกครั้งที่คุณสลับและรับค่าในรหัสแบบไดนามิก

this.nindex = 0; // สลับดัชนีปัจจุบันของภาพ

this.timer = null; // สลับค่าใบเสนอราคาของภาพ

this.int ();

-

lgy_picswitch.prototype = {

getId: function (id) {

ส่งคืน document.getElementById (id);

-

getNodeByClassName: function (parent, className) {

var classElements = new Array ();

var els = parent.getElementsByTagname ('*');

var elslen = els.length;

รูปแบบ var = ใหม่ regexp ("(^| // s)"+classname+"(// s | $)");

สำหรับ (i = 0, j = 0; i <elslen; i ++) {

if (pattern.test (els [i] .classname)) {

ClassElements [J] = Els [i];

J ++;

-

-

ส่งคืนคลาสการเลือกตั้ง;

-

getCss: ฟังก์ชั่น (โหนด, ค่า)

-

ส่งคืน node.currentstyle? node.currentstyle [ค่า]: getComputedStyle (โหนด, null) [ค่า];

-

setcss: function (node, val) {

สำหรับ (var v in val) {

node.style.csstext += ';' +v +':' +val [v];

-

-

movefn: ฟังก์ชัน (โหนด, ค่า, targetValue, callback) {

var _that = this;

ClearInterval (this.timer);

this.timer = setInterval (ฟังก์ชัน ()

-

var val = parsefloat (_that.getcss (โหนด, ค่า));

var speed = (targetValue- val)/8;

ความเร็ว = ความเร็ว> 0? math.ceil (ความเร็ว): math.floor (ความเร็ว);

ถ้า (ความเร็ว == 0)

-

ClearInterval (_that.timer);

การโทรกลับ && callback ();

-

อื่น

-

node.style [value] = (val + speed) + 'px';

-

}, 20);

-

Picchange: function () {

this.movefn (this.oul, 'marginleft',-this.nindex*this.nswitchwidth);

-

CancelBubble: ฟังก์ชั่น (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 ให้คุณอย่างไม่ตั้งใจ

อย่างไรก็ตามโครงสร้างภายในจะต้องเหมือนกันรวมถึงชื่อคลาส

<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 ​​จำนวนม้วน

การคัดลอกรหัสมีดังนี้:

-

-

// อินสแตนซ์

ใหม่ lgy_picswitch ({'wrapid': 'gy_picswitch', 'scrollcount': 5});

มันเป็นฟังก์ชั่นที่สะดวกมากหรือไม่? นอกจากนี้ยังใช้งานง่ายมาก ฉันแนะนำให้เพื่อนของฉันที่นี่ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน