ให้ฉันแสดงภาพการแสดงผลเอฟเฟกต์ก่อน
ต่อไปนี้เป็นรหัสโดยละเอียด:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น 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});
มันเป็นฟังก์ชั่นที่สะดวกมากหรือไม่? นอกจากนี้ยังใช้งานง่ายมาก ฉันแนะนำให้เพื่อนของฉันที่นี่ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน