تصف هذه المقالة تأثير التناوب في لعب عروض الشرائح في JS. شاركه للرجوع إليه ، على النحو التالي:
<Body> <script language = "javaScript" type = "text/javaScript"> <!-/******************************************************** الاسم: صورة CAROUSEL CRASS الوقت: 2010-07-11 مثال ZHANGTY: هناك نود يسمى IMGPLAYER (أو غيره من المعامل. pimgplayer.additem ("Test" ، "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) ؛ ملاحظات: مناسبة للأماكن التي لا يوجد فيها سوى صورة واحدة صورة على صفحة. دالة (objid ، w ، h ، الوقت) {this.Intervaltime = time || 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 = "Hidden" ؛ //this._container.style.border = "1px solid #fff" ؛ var linkstyle = "display: block ؛ decoration text: none ؛" ؛ if (document.all) {linkstyle += "filter:" ؛ LinkStyle += "progID: dximageTransform.microsoft.barn (المدة = 0.5 ، الحركة = 'Out' ، الاتجاه = 'عمودي')" ؛ LinkStyle += "progID: dximagetransform.microsoft.barn (المدة = 0.5 ، الحركة = 'Out' ، الاتجاه = 'أفقي')" ؛ LinkStyle += "progID: dimizageTransform.microsoft.blinds (المدة = 0.5 ، النطاقات = 10 ، الاتجاه =" لأسفل ")" ؛ LinkStyle += "progID: dimizageTransform.microsoft.checkerboard ()" ؛ LinkStyle += "ProgID: dimizageTransform.microsoft.fade (المدة = 0.5 ، تداخل = 0)" ؛ LinkStyle += "ProgID: dimizageTransform.microsoft.gradientwipe (المدة = 1 ، التدرجات = 1.0 ، الحركة =" عكس ")" ؛ LinkStyle += "progID: dimizageTransform.microsoft.inset ()" ؛ LinkStyle += "progID: dximageTransform.microsoft.iris (المدة = 1 ، irisstyle = plus ، motion = out)" ؛ LinkStyle += "ProgID: dimizageTransform.microsoft.iris (المدة = 1 ، IrisStyle = plus ، motion = in)" ؛ LinkStyle += "progID: dimizageTransform.microsoft.iris (المدة = 1 ، irisstyle = diamond ، motion = in)" ؛ LinkStyle += "progID: dimizageTransform.microsoft.iris (المدة = 1 ، irisstyle = diamond ، motion = in)" ؛ LinkStyle += "progID: dximageTransform.microsoft.iris (المدة = 1 ، IrisStyle = square ، motion = in)" ؛ LinkStyle += "progID: dimizageTransform.microsoft.iris (المدة = 0.5 ، irisstyle = star ، motion = in)" ؛ LinkStyle += "progID: dimizageTransform.microsoft.radialwipe (المدة = 0.5 ، wipestyle = clock)" ؛ LinkStyle += "progId: dimizageTransform.microsoft.radialwipe (المدة = 0.5 ، wipestyle = wedge)" ؛ LinkStyle += "progId: dimizageTransform.microsoft.radialwipe (المدة = 0.5 ، wipestyle = wedge)" ؛ LinkStyle += "progID: dimizageTransform.Microsoft.RandomBars (المدة = 0.5 ، الاتجاه = أفقي)" ؛ LinkStyle += "progID: dimizageTransform.Microsoft.RandomBars (المدة = 0.5 ، الاتجاه = عمودي)" ؛ LinkStyle += "progID: dimizageTransform.microsoft.randomDissolve ()" ؛ LinkStyle += "progID: dximageTransform.microsoft.spiral (المدة = 0.5 ، Gridsizex = 16 ، Gridsizey = 16)" ؛ LinkStyle += "progID: dimizageTransform.microsoft.stretch (المدة = 0.5 ، stretchstyle = push)" ؛ LinkStyle += "progID: dimizageTransform.Microsoft.Strips (المدة = 0.5 ، الحركة = levelddown)" ؛ LinkStyle += "ProgId: dimizageTransform.microsoft.wheel (المدة = 0.5 ، المتحدث = 8)" ؛ LinkStyle += "progid: dimizageTransform.microsoft.zigzag (المدة = 0.5 ، gridsizex = 4 ، الشبكات = 40) ؛ العرض: 100 ٪ ؛ الارتفاع: 100 ٪" ؛ } // var ulstyle = "margin: 0 ؛ width:"+w+"px ؛ الموضع: مطلق ؛ z-index: 999 ؛ اليمين: 5px ؛ مرشح: alpha (التعتيم = 30 ، الانتهاء = 90 ، النمط = 1) // var listyle = "margin: 0 ؛ style-style-type: none ؛ margin: 0 ؛ padding: 0 ؛ float: right ؛" ؛ // var basespacstyle = "clear: كلاهما ؛ العرض: block ؛ العرض: 23px ؛ خط الارتفاع: 18px ؛ حجم الخط: 12px ؛ font-family: '安' ؛ عتامة: 0.6 ؛" ؛ basespacstyle += "الحدود: 1px الصلبة #fff ؛ اليمين الحدودي: 0 ؛ bord-bottom: 0 ؛" ؛ basespacstyle += "color: #fff ؛ text-align: center ؛ cursor: pointer ؛" ؛ // var ulhtml = "" ؛ لـ (var i = this._items.length -1 ؛ i> = 0 ؛ i-) {var spanstyle = "" ؛ if (i == this._index) {spanstyle = basespacstyle + "background:#ff0000 ؛" ؛ // تهيئة لون الرقم السفلي} آخر {spanstyle = basespacstyle + "الخلفية:#c0c0c0 ؛" ؛ // تهيئة لون الخلفية للرقم السفلي} ulhtml+= "<li style =/" "+listyle+"/">" ؛ ulhtml+= "<span onMouseover =/" pimgplayer.mouseover (this) ؛/"onMouseout =/" pimgplayer.mouseout (this) ؛/"style =/"+spanstyle+"/" onClick =/"pimgplayer.play (+i+") this._items [i] .title+"/"> "+(i+1)+" </span> "؛ ulhtml+=" </li> "؛ 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 + ') NO-repeat Center "؛ // this._timer = setInterval ("pimgplayer.play ()" ، this.intervaltime) ؛ } ، additem: function (_title ، _link ، _imgurl) {this._items.push ({title: _title ، link: _link ، img: _imgurl}) ؛ var img = new image () ؛ img.src = _imgurl ؛ this._imgs.push (IMG) ؛ } ، play: function (index) {if (index! = null) {this._index = index ؛ ClearInterval (this._timer) ؛ this._timer = setInterval ("pimgplayer.play ()" ، this.intervaltime) ؛ } آخر {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 = "margin: 0 ؛ style-style-type: none ؛ margin: 0 ؛ padding: 0 ؛ float: right ؛" ؛ var basespacstyle = "clear: كلاهما ؛ عرض: block ؛ العرض: 23px ؛ خط الارتفاع: 18px ؛ حجم الخط: 12px ؛ font-family: '安' ؛ عتامة: 0.6 ؛" ؛ basespacstyle += "الحدود: 1px الصلبة #fff ؛ اليمين الحدودي: 0 ؛ bord-bottom: 0 ؛" ؛ basespacstyle += "color: #fff ؛ text-align: center ؛ cursor: pointer ؛" ؛ var ulhtml = "" ؛ لـ (var i = this._items.length -1 ؛ i> = 0 ؛ i-) {var spanstyle = "" ؛ if (i == this._index) {spanstyle = basespacstyle + "background:#ff0000 ؛" ؛ // لون الأرقام} آخر {spanstyle = basespacstyle + "الخلفية:#c0c0c0 ؛" ؛ // خلفية لون الأرقام} ulhtml+= "<li style =/" "+listyle+"/">" ؛ ulhtml+= "<span onMouseover =/" pimgplayer.mouseover (this) ؛/"onMouseout =/" pimgplayer.mouseout (this) ؛/"style =/"+spanstyle+"/" onClick =/"pimgplayer.play (+i+") this._items [i] .title + "/"> " + (i + 1) +" </span> "؛ ulhtml + =" </li> "؛ ) ؛ "lashou.com" ، "http://www.lashou.com/" ، ". "http://www.meituan.com/" ، "./1003.jpg") ؛لمزيد من المعلومات حول المحتوى المتعلق بـ javaScript ، يرجى مراجعة موضوعات هذا الموقع: "ملخص لتأثيرات وتقنيات تبديل JavaScript" ، "ملخص لمهارات خوارزمية البحث عن JavaScript" ، "ملخص لتأثيرات الرسوم المتحركة JavaScript والتقنيات" ، "ملخص". خوارزميات وتقنيات JavaScript Traversal "، و" ملخص استخدام العمليات الرياضية JavaScript "
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.