This article describes the slide switching display effect implemented by JS. Share it for your reference, as follows:
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Pure JS slide version</title><style type="text/css">*{ margin:0; padding:0;}#banner {width:1000px;text-align:left; background:#ffff; margin:0 auto;}#banner img{ display:block; float:left;}.mainbox{ overflow:hidden; position:relative;}.flashbox{ overflow:hidden; position:relative;}.imagebox{ text-align:right;position:relative;z-index:999;}.bitdiv{display:inline-block;width:18px;height:18px;margin:0 10px 10px 0px;cursor:pointer;float:right;}.defimg{ background:url(styles/images/ppt_icon2.png);}.curimg{background:url(styles/images/ppt_icon1.png);}</style><script type="text/javascript" src="styles/js/ppt_ban.js"></script></head><body><div id="banner"> <script> var box =new PPTBox(); box.width = 1000; //width box.height = 226;//Height box.autoplayer = 3;//Autoplay interval time//box.add({"url":"Image address","title":"Hoom title","href":"Link address"}) box.add({"url":"styles/images/fck_04.jpg","href":"###","title":"Hoom prompt title 1"}); box.add({"url":"styles/images/fck_04.jpg","href":"###","title":"Hoom prompt title 1"}); box.add({"url":"styles/images/fck_04.jpg","href":"###","title":"suspension prompt title 1"}); box.add({"url":"styles/images/fck_04.jpg","href":"###","title":"suspension prompt title 1"}); box.show(); </script></div></body></html>js:
function PPTBox(){ this.uid = PPTBoxHelper.getId(); PPTBoxHelper.instance[this.uid] = this; this._$ = function(id){return document.getElementById(id);}; this.width = 400;//width this.height = 300;//height this.picWidth = 15;//small image width this.picHeight = 12;//small image height this.autoplayer = 4;//autoplay interval (seconds) this.target = "_blank"; this._box = []; this._curIndex = 0;}PPTBox.prototype ={ _createMainBox : function (){ var flashBoxWidth = 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.picHeight)+"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 parameter = this._box[i]; flashbox += this.flashHTML(parame.url,this.width,this.height,i); imageHTML="<div class='bitdiv "+((i==0)?"curimg":"defimg")+"' title ="+parame.title+" src='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://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0' 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-flash' height='"+height+"'></embed>" +" </object>"; } else { var eventstr = "PPTBoxHelper.instance['"+this.uid+"']"; var style = ""; if(this._box[idx].href){ style = "cursor:pointer" } html="<img src='"+url+"' style='width:"+width+"px;height:"+height+"px;"+style+"' onclick = /"+eventstr+".clickPic("+idx+")/"///>"; } return html; }, changeIndex : function(idx){ var parameter = this._box[idx]; moveElement(this.uid+"_flashbox",-(idx*this.width),1); var imgs = this._$(this.uid+"_imagebox").getElementsByTagName("div"); imgs[this._box.length-1-this._curIndex].className = "bitdiv defimg"; imgs[this._box.length-1-idx].className = "bitdiv curimg"; this._curIndex = idx; }, mouseoverPic:function(idx){ this.changeIndex(idx); if(this.autoplay>0){ clearInterval(this._autoplay); var eventstr = "PPTBoxHelper.instance['"+this.uid+"']._play()"; this._autoplay = setInterval(eventstr,this.autoplayer*1000); } }, clickPic:function(idx){ var parameter = this._box[idx]; if(parame.href&¶me.href!=""){ window.open(parame.href,this.target); } }, 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 '_ppt_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);}The renderings are as follows:
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm techniques", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm techniques", and "Summary of JavaScript mathematical operations usage"
I hope this article will be helpful to everyone's JavaScript programming.