Display Effect of Slide switching implemented by JS, and slide switching implemented by js

Display Effect of Slide switching implemented by JS, and slide switching implemented by js

The example in this article describes the slide switching display effect implemented by JS. We will share this with you for your reference. The details are as follows:

Html:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
Js:
Function PPTBox () {this. uid = PPTBoxHelper. getId (); PPTBoxHelper. instance [this. uid] = this; this. _ $ = function (id) {return document. getElementById (id) ;}; this. width = 400; // The width of this. height = 300; // height this. picWidth = 15; // The width of the thumbnail. this. picHeight = 12; // The height of the thumbnail. this. autoplayer = 4; // automatic playback interval (seconds) this.tar get = "_ blank"; this. _ box = []; this. _ curIndex = 0;} PPTBox. prototype = {_ createMainBox: function () {var flas HBoxWidth = this. width * this. _ box. length; var html = "<div id = '" + this. uid + "_ mainbox 'class = 'mainbox' style = 'width:" + (this. width) + "px; height:" + (this. height) + "px; '>"; html + = "<div id ='" + this. uid + "_ flashbox 'class = 'flashbox' style = 'width:" + flashBoxWidth + "px; height:" + (this. height) + "px; '> </div>"; html + = "<div id ='" + this. uid + "_ imagebox 'class = 'imagebox' style = 'width:" + this. width + "px; height:" + (this. picH Eight) + "px; top:-" + (this. picHeight + 20) + "px; '> </div>"; html + = "</div>"; document. write (html) ;}, _ init: function () {var picstyle = ""; var eventstr = "PPTBoxHelper. instance ['"+ this. uid + "']"; var imageHTML = ""; var flashbox = ""; for (var I = 0; I <this. _ box. length; I ++) {var parame = this. _ box [I]; flashbox + = this. flashHTML (parame. url, this. width, this. height, I); imageHTML = "<div class = 'bitdiv" + (I = 0 )? "Curimg": "defimg") + "'title =" + parame. title + "src0000'bit01.gif '" + picstyle + "onclick = \" "+ eventstr + ". clickPic ("+ I +") \ "onmouseover = \" "+ eventstr + ". mouseoverPic ("+ I +") \ "> </div>" + imageHTML;} this. _ $ (this. uid + "_ flashbox "). innerHTML = flashbox; this. _ $ (this. uid + "_ imagebox "). innerHTML = imageHTML;}, _ play: function () {clearInterval (this. _ autoplay); var idx = this. _ curIndex + 1; if (idx> = this. _ box. length) {Idx = 0;} this. changeIndex (idx); var eventstr = "PPTBoxHelper. instance ['"+ this. uid + "']. _ play () "; this. _ autoplay = setInterval (eventstr, this. autoplayer * 1000) ;}, flashHTML: function (url, width, height, idx) {var isFlash = url. substring (url. lastIndexOf ('. ') + 1 ). toLowerCase () = "swf"; var html = ""; if (isFlash) {html = "<object classid = 'clsid: D27CDB6E-AE6D-11cf-96B8-444553540000 '" + "codebase = 'HTTP: // d Fill width = '"+ width +" 'height =' "+ height +" '> "+" <param name = \ "movie \" value = \ "" + url + "\"/> "+" <param name = 'quality 'value = 'high'/> "+" <param name = 'wmode' value = 'transparent'> "+ "<embed src = '" + url + "'quality = 'high' wmode = 'opaque' pluginspage = 'HTTP: // www.macromedia.com/go/getflashplayer' "+" type = 'application/x-shockwave-fl Ash 'width = "+ width +" height = '"+ height +"'> </embed> "+" </object> ";} else {var eventstr = "PPTBoxHelper. instance ['"+ this. uid + "']"; var style = ""; if (this. _ box [idx]. href) {style = "cursor: pointer"} html = " 0) {clearInterval (this. _ autoplay); var eventstr = "PPTBoxHelper. instance ['"+ this. uid + "']. _ play () "; this. _ autoplay = setInterval (eventstr, this. autoplayer * 1000) ;}, clickPic: function (idx) {var parame = this. _ box [idx]; if (parame. href & parame. href! = "") {Parameter open(parame.href,this.tar get) ;}}, add: function (imgParam) {this. _ box [this. _ box. length] = imgParam;}, show: function () {this. _ createMainBox (); this. _ init (); if (this. autoplayer> 0) {var eventstr = "PPTBoxHelper. instance ['"+ this. uid + "']. _ play () "; this. _ autoplay = setInterval (eventstr, this. autoplayer * 1000) ;}}var PPTBoxHelper = {count: 0, instance :{}, getId: function () {return '_ p Pt_box-'+ (this. count ++) ;}}; function moveElement (elementID, final_x, interval) {if (! Document. getElementById) return false; if (! Document. getElementById (elementID) return false; var elem = document. getElementById (elementID); if (elem. movement) {clearTimeout (elem. movement);} if (! Elem. style. left) {elem. style. left = "0px";} var xpos = parseInt (elem. style. left); if (xpos = final_x) {return true;} if (xpos <final_x) {var dist = Math. ceil (final_x-xpos)/5); xpos = xpos + dist;} if (xpos> final_x) {var dist = Math. ceil (xpos-final_x)/5); xpos = xpos-dist;} elem. style. left = xpos + "px"; var repeat = "moveElement ('" + elementID + "'," + final_x + "," + interval + ")"; elem. movement = setTimeout (repeat, interval );}
As follows: