この記事では、JSによって実装されたスライドスイッチングディスプレイ効果について説明します。次のように、参照のために共有してください。
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>純粋なjsスライドバージョン</titte> <スタイル= <スタイル= "パディング：0;}＃banner {width：1000px; text-align：left;背景：#ffff;マージン：0 auto;}＃banner img {display：block;フロート：左;}。メインボックス{オーバーフロー：hidden;位置：相対;}。フラッシュボックス{オーバーフロー：hidden;位置：相対;}。imagebox {text-align：right; position：relative; z-index：999;}。bitdiv {display：inline-block; width; width：18px; height：18px; margin：0 10px 10px; cursor：pointer; float：right;}。背景：url（styles/images/ppt_icon2.png）;} pptbox（）; box.width = 1000; // width box.height = 226; // height box.autoplayer = 3; // autoplay interval time // box.add（{"url"： "imageアドレス"、 "タイトル"： "hoom title"、 "href"： "linkアドレス"}） 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"： "サスペンションプロンプトタイトル1"}）; box.add（{"url"： "styles/images/fck_04.jpg"、 "href"： "###"、 "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間隔（秒）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>" px; 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 = /" "+eventtr+"。 onmouseover =/"+eventstr+"。 "+i+"）/"> div>"+imagehtml; ClearInterval（this._autoplay）; _curindex+1; setinterval（this.autoplayer*1000）、flashhtml：var isflash = url.substring（url.lastindexof（ '。'）+1） ClassID = 'CLSID：D27CDB6E-AE6D-11CF-96B8-444553540000' "+" codebase = 'http：//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version = 7,0,19,0'+ height = '"+height+"'> "+" <param name =/"movie/" value =/"+url+"/"/>"+"<param name = 'quality' value = 'high'/>"+"<param name = 'wmode' value = 'transparent'>"+"<embed src = '+url" PluginsPage = 'http：//www.macromedia.com/go/getflashplayer' "+" type = 'application/x-shockwave-flash' height = '"+height+"'> </embed> "+" </object> ";} else {var events =" pptboxhelper.instance [" if（this._box [idx] .href）{style = "cursor：pointer"} html = "<img src = '"+url+"' style = 'width："+width+"px; height："+height+"px;"+style+"' onclick =/"+"/" } 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 dimg"; 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））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 = setimeout（繰り返し、間隔）;}レンダリングは次のとおりです。
JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください：「JavaScriptの切り替え効果とテクニックの要約」、「JavaScript検索アルゴリズム技術の要約」、「JavaScriptアニメーション効果とテクニックの要約」、「JavaScriptエラーの要約、Javascript Techniques "Debugging Datas and Algorith and Algorith and Algorith and"の要約」 「JavaScriptの数学的操作の概要」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。