บทความนี้อธิบายถึงผลกระทบของการผลัดกันเล่นสไลด์โชว์ใน JS แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
<body> <ภาษาสคริปต์ = "javascript" type = "ข้อความ/javascript"> <!-/************************************************************************************************************************************** pimgplayer.additem ("ทดสอบ", "http://www.pomoho.com", "http://static.pomoho.com/static/samesong/images/logo5.jpg"); pimgplayer.additem ("test2", "http://www.pomoho.com.cn", "http://static.pomoho.com/static/samesong/images/logo4.jpg"); pimgplayer.additem ("test3", "http://www.pomoho.com.cn", "http://static.pomoho.com/static/samesong/images/logo3.jpg"); pimgplayer.init ("imgplayer", 200, 230); หมายเหตุ: เหมาะสำหรับสถานที่ที่มีภาพหมุนเพียงภาพเดียวในหน้า *******************************************************************************************************/var pimgplayer = {_timer: null, _items: [], _container ฟังก์ชั่น (objid, w, h, time) {this.intervaltime = เวลา || this.intervaltime; this._container = document.getElementById (objid); this._container.style.display = "block"; this._container.style.width = w + "px"; this._container.style.height = h + "px"; this._container.style.position = "ญาติ"; this._container.style.overflow = "ซ่อน"; //this._container.style.border = "1px solid #fff"; var linkstyle = "display: block; การกำหนดข้อความ: ไม่มี;"; if (document.all) {linkstyle += "ตัวกรอง:"; linkstyle += "progid: dximagetransform.microsoft.barn (ระยะเวลา = 0.5, motion = 'out', การวางแนว = 'แนวตั้ง')"; linkstyle += "progid: dximagetransform.microsoft.barn (ระยะเวลา = 0.5, motion = 'out', การวางแนว = 'แนวนอน')"; linkstyle += "progid: dximagetransform.microsoft.blinds (ระยะเวลา = 0.5, bands = 10, direction = 'down')"; linkstyle += "progid: dximagetransform.microsoft.checkerboard ()"; linkstyle += "progid: dximagetransform.microsoft.fade (ระยะเวลา = 0.5, ซ้อนทับ = 0)"; linkstyle += "progid: dximagetransform.microsoft.gradientwipe (ระยะเวลา = 1, gradientientize = 1.0, motion = 'reverse')"; linkstyle += "progid: dximagetransform.microsoft.inset ()"; linkstyle += "progid: dximagetransform.microsoft.iris (ระยะเวลา = 1, irisstyle = plus, motion = out)"; linkstyle += "progid: dximagetransform.microsoft.iris (ระยะเวลา = 1, irisstyle = plus, motion = in)"; linkstyle += "progid: dximagetransform.microsoft.iris (ระยะเวลา = 1, Irisstyle = Diamond, motion = in)"; linkstyle += "progid: dximagetransform.microsoft.iris (ระยะเวลา = 1, Irisstyle = Diamond, motion = in)"; linkstyle += "progid: dximagetransform.microsoft.iris (ระยะเวลา = 1, irisstyle = square, motion = in)"; linkstyle += "progid: dximagetransform.microsoft.iris (ระยะเวลา = 0.5, irisstyle = star, motion = in)"; linkstyle += "progid: dximagetransform.microsoft.radialwipe (ระยะเวลา = 0.5, Wipestyle = นาฬิกา)"; linkstyle += "progid: dximagetransform.microsoft.radialwipe (ระยะเวลา = 0.5, wipestyle = wedge)"; linkstyle += "progid: dximagetransform.microsoft.radialwipe (ระยะเวลา = 0.5, wipestyle = wedge)"; linkstyle += "progid: dximagetransform.microsoft.randombars (ระยะเวลา = 0.5, การวางแนว = แนวนอน)"; linkstyle += "progid: dximagetransform.microsoft.randombars (ระยะเวลา = 0.5, การวางแนว = แนวตั้ง)"; linkstyle += "progid: dximagetransform.microsoft.randomdissolve ()"; linkstyle += "progid: dximagetransform.microsoft.spiral (ระยะเวลา = 0.5, gridsizex = 16, gridsizey = 16)"; linkstyle += "progid: dximagetransform.microsoft.stretch (ระยะเวลา = 0.5, stretchstyle = push)"; linkstyle += "progid: dximagetransform.microsoft.strips (ระยะเวลา = 0.5, motion = ขวา)"; linkstyle += "progid: dximagetransform.microsoft.wheel (ระยะเวลา = 0.5, ซี่ = 8)"; linkstyle += "progid: dximagetransform.microsoft.zigzag (ระยะเวลา = 0.5, gridsizex = 4, gridsizey = 40); ความกว้าง: 100%; ความสูง: 100%"; } // var ulstyle = "มาร์จิ้น: 0; ความกว้าง:"+w+"px; ตำแหน่ง: สัมบูรณ์; z-index: 999; ขวา: 5px; ตัวกรอง: อัลฟ่า (opacity = 30, finishOpacity = 90, สไตล์ = 1); // var liStyle = "มาร์จิ้น: 0; รายการสไตล์-ประเภท: ไม่มี; มาร์จิ้น: 0; padding: 0; float: ขวา;"; // var basespacstyle = "Clear: ทั้งสอง; แสดง: block; width: 23px; line-height: 18px; font-size: 12px; font-family: '安'; opacity: 0.6;"; basespacstyle += "ชายแดน: 1px solid #FFF; ชายแดนขวา: 0; ขอบล่าง: 0;"; basespacstyle += "สี: #FFF; text-allign: center; Cursor: pointer;"; // var ulhtml = ""; สำหรับ (var i = this._items.length -1; i> = 0; i-) {var spanstyle = ""; if (i == this._index) {spanstyle = basespacstyle + "พื้นหลัง:#ff0000;"; // เริ่มต้นสีของหมายเลขด้านล่าง} else {spanstyle = basespacstyle + "พื้นหลัง:#c0c0c0;"; // เริ่มต้นสีพื้นหลังของหมายเลขด้านล่าง} ulhtml+= "<li style =/" "+listyle+"/">"; Ulhtml+= "<span onmouseover =/" pimgplayer.mouseover (นี่);/"onMouseout =/" pimgplayer.mouseout (นี่);/"style =/"+spanstyle+"/" onclick =/"pimgplayer.play ("+i+"); this._items [i] .title+"/"> "+(i+1)+" </span> "; ulhtml+=" </li> ";} // var html =" <a href =/"" this._items [this._index]. target =/"_ blank/" style = "+linkstyle+"/"> </a> <ul style =/"+ulstyle+"/"> "+ulhtml+" </ul> "; this._container.innerhtml = html; var link = this._container.getElementsByTagname ("A") [0]; link.style.width = w + "px"; link.style.height = h + "px"; link.style.background = 'url (' + this._items [0] .img + ') ศูนย์กลางที่ไม่มีการทำซ้ำ'; // this._timer = setInterval ("pimgplayer.play ()", this.intervaltime); }, addItem: function (_title, _link, _imgurl) {this._items.push ({title: _title, ลิงค์: _link, img: _imgurl}); var img = ภาพใหม่ (); img.src = _imgurl; this._imgs.push (img); }, play: function (index) {ถ้า (index! = null) {this._index = index; ClearInterval (this._timer); this._timer = setInterval ("pimgplayer.play ()", this.intervaltime); } else {this._index = this._index <this._items.length-1? this._index+1: 0; } var link = this._container.getElementsByTagname ("A") [0]; if (link.filters) {var ren = math.floor (math.random ()*(link.filters.length)); link.filters [ren] .apply (); link.filters [ren] .play (); } link.href = this._items [this._index] .link; link.title = this._items [this._index] .title; link.style.background = 'url (' + this._items [this._index] .img + ') ศูนย์กลางที่ไม่มีการทำซ้ำ'; // var liStyle = "มาร์จิ้น: 0; รายการสไตล์-ประเภท: ไม่มี; มาร์จิ้น: 0; padding: 0; float: ขวา;"; var basespacstyle = "ชัดเจน: ทั้งสอง; แสดง: block; ความกว้าง: 23px; สายไฟ: 18px; ขนาดตัวอักษร: 12px; font-family: '安'; opacity: 0.6;"; basespacstyle += "ชายแดน: 1px solid #FFF; ชายแดนขวา: 0; ขอบล่าง: 0;"; basespacstyle += "สี: #FFF; text-allign: center; Cursor: pointer;"; var ulhtml = ""; สำหรับ (var i = this._items.length -1; i> = 0; i-) {var spanstyle = ""; if (i == this._index) {spanstyle = basespacstyle + "พื้นหลัง:#ff0000;"; // สีของตัวเลข} else {spanstyle = basespacstyle + "พื้นหลัง:#c0c0c0;"; // สีพื้นหลังของตัวเลข} ulhtml+= "<li style =/" "+listyle+"/">"; Ulhtml+= "<span onmouseover =/" pimgplayer.mouseover (นี่);/"onMouseout =/" pimgplayer.mouseout (นี่);/"style =/"+spanstyle+"/" onclick =/"pimgplayer.play ("+i+"); this._items [i] .title + "/"> " + (i + 1) +" </span> "; ulhtml + =" </li> ";} this._container.getElementsByTagname (" ul ") [0] if (this._index! = i-1) {obj.style.color = "#ff0000"; "http://www.lashou.com/", "./images/1001.jpg"); "http://www.meituan.com/", "./images/1003.jpg");สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ JavaScript โปรดตรวจสอบหัวข้อของไซต์นี้: "สรุปเอฟเฟกต์และเทคนิคการสลับ JavaScript", "บทสรุปของทักษะอัลกอริทึมการค้นหา JavaScript", "สรุปผลการสรุปและเทคนิคการสรุปของ JavaScript ของ JavaScript อัลกอริทึมและเทคนิคการสำรวจ JavaScript "และ" สรุปการใช้งานทางคณิตศาสตร์ JavaScript "
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน