この記事では、JSでスライドショーを順番にプレイする効果について説明します。次のように、参照のために共有してください。
<body> <スクリプト言語= "javascript" type = "text/javaScript"> <！ - /*************************************************************************************************************************** Zhangty例：Imgplayer（またはId is ok）という名前のnode node node node node node node nodeがあります。 pimgplayer.additem（ "test"、 "http://www.pomoho.com"、 "http://static..com/static/samesong/images/logo5.jpg"）; pimgplayer.additem（ "test2"、 "http://www.pomoho.com.cn"、 "http://static.pomoho.com/static/sames/images/logo4.jpg"）; pimgplayer.additem（ "test3"、 "http://www.pomoho.com.cn"、 "http://static.pomoho.com/static/sames/images/logo3.jpg"）; pimgplayer.init（ "imgplayer"、200、230）;注：ページにカルーセルが1つしかない場所に適しています。*************************************************************/{_timer：null、_items：[]、_container：null、_index：_Intex：_imgs：0、_imgs：0、_imgs：0、_imgs：0、_imgs：0、_imgs ：function（objid、w、h、time）{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 = "relative"; this._container.style.overflow = "hidden"; //this._container.style.border = "1px solid #fff"; var linkstyle = "display：block; text-decoration：none;"; if（document.all）{linkstyle += "filter："; linkStyle += "progid：dmimagetransform.microsoft.barn（duration = 0.5、motion = 'out'、orientation = 'vertical'）"; linkStyle += "progid：dmimagetransform.microsoft.barn（duration = 0.5、motion = 'out'、orientation = 'Horizontal'）"; linkStyle += "progid：dmimagetransform.microsoft.blinds（duration = 0.5、bands = 10、direction = 'down'）"; linkStyle += "progid：dmimagetransform.microsoft.checkerboard（）"; linkStyle += "progid：dmimagetransform.microsoft.fade（duration = 0.5、overlap = 0）"; linkStyle += "progid：dmimagetransform.microsoft.gradientwipe（duration = 1、gradiantize = 1.0、motion = 'reverse'）"; linkStyle += "progid：dmimagetransform.microsoft.inset（）"; linkStyle += "progid：dmimagetransform.microsoft.iris（duration = 1、irisstyle = plus、motion = out）"; linkStyle += "progid：dmimagetransform.microsoft.iris（duration = 1、irisstyle = plus、motion = in）"; linkStyle += "progid：dmimagetransform.microsoft.iris（duration = 1、irisstyle = diamond、motion = in）"; linkStyle += "progid：dmimagetransform.microsoft.iris（duration = 1、irisstyle = diamond、motion = in）"; linkStyle += "progid：dmimagetransform.microsoft.iris（duration = 1、irisstyle = square、motion = in）"; linkStyle += "progid：dmimagetransform.microsoft.iris（duration = 0.5、irisstyle = star、motion = in）"; linkStyle += "progid：dmimagetransform.microsoft.radialwipe（duration = 0.5、wipeStyle = clock）"; linkStyle += "progid：dmimagetransform.microsoft.radialwipe（duration = 0.5、wipeStyle = wedge）"; linkStyle += "progid：dmimagetransform.microsoft.radialwipe（duration = 0.5、wipeStyle = wedge）"; linkStyle += "progid：dmimagetransform.microsoft.randombars（持続時間= 0.5、方向=水平）"; linkStyle += "progid：dmimagetransform.microsoft.randombars（持続時間= 0.5、方向=垂直）"; linkStyle += "progid：dmimagetransform.microsoft.randomdissolve（）"; linkStyle += "progid：dmimagetransform.microsoft.spiral（duration = 0.5、gridsizex = 16、gridsizey = 16）"; linkStyle += "progid：dmimagetransform.microsoft.stretch（duration = 0.5、stretlestyle = push）"; linkStyle += "progid：dmimagetransform.microsoft.strips（duration = 0.5、motion = rightdown）"; linkStyle += "progid：dmimagetransform.microsoft.wheel（duration = 0.5、spokes = 8）"; linkStyle += "progid：dmixtagetransform.microsoft.zigzag（duration = 0.5、gridsizex = 4、gridsizey = 40）; width：100％; height：100％"; } // var ulstyle = "マージン：0;幅："+w+"px;位置：絶対; z-index：999;右：5px;フィルター：alpha（ofacity = 30、finishopacity = 90、style = 1）; // var listyle = "margin：0; list-style-type：none; margin：0; padding：0; float：right;"; // var basespacstyle = "clear：blote; display：block; width：23px; line-height：18px; font-size：12px; font-family： '安'; ofacity：0.6;"; baseSpacstyle += "border：1px solid #fff; border-right：0; border-bottom：0;"; baseSpacstyle += "color：#fff; text-align：center; cursor：pointer;"; // var ulhtml = ""; for（var i = this._items.length -1; i> = 0; i-）{var spanstyle = ""; if（i == this._index）{spanstyle = baseSpacstyle + "background：＃ff0000;"; //下部番号の色の初期化//下部番号の背景色の初期化} ulhtml+= "<li style =/" "+listyle+"/">"; ulhtml+= "<onmouseover =/" pimgplayer.mouseover（this）;/"onmouseout =/" pimgplayer.mouseout（this）;/"style =/"+spanstyle+"/" onclick =/"pimgplayer.play（"+i+"）; this._items [i] .title+"/"> "+（i+1）+" </span> "; ulhtml+=" </li> ";} // var html =" <a href =/""+this._items [this._index] .link+"/" tittitems]ターゲット=/"_ 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 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）; } 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 + '）No-Reepeat Center Center'; // var listyle = "margin：0; list-style-type：none; margin：0; padding：0; float：right;"; VAR BASESPACSTYLE = "CLEAR：BOTH; display：block; width：23px; line-height：18px; font-size：12px; font-family： '安'; opacity：0.6;"; baseSpacstyle += "border：1px solid #fff; border-right：0; border-bottom：0;"; baseSpacstyle += "color：#fff; text-align：center; cursor：pointer;"; var ulhtml = ""; for（var i = this._items.length -1; i> = 0; i-）{var spanstyle = ""; if（i == this._index）{spanstyle = baseSpacstyle + "background：＃ff0000;"; //数字の色} else {spanstyle = baseSpacstyle + "background：＃c0c0c0;"; //数字の背景色} ulhtml+= "<li style =/" "+listyle+"/">"; ulhtml+= "<onmouseover =/" pimgplayer.mouseover（this）;/"onmouseout =/" pimgplayer.mouseout（this）;/"style =/"+spanstyle+"/" onclick =/"pimgplayer.play（"+i+"）; this._items [i] .title + "/"> " +（i + 1） +" </span> "; ulhtml + =" </li> ";} this._container.getelementsbytagname（" ul "）[0] .innerhtml = ulhtml;}、マウスオーバー：var i = parsent（obj） if._index！= i-1）{obj.style.color = "＃ff0000"; 「http://www.lashou.com/ "、" ./images/1001.jpg "）; 「http://www.meituan.com/ "、" ./images/1003.jpg "）; pimgplayer.init（" imgadplayer "、715、95）;JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください：「JavaScriptの切り替え効果とテクニックの要約」、「JavaScript検索アルゴリズムスキルの要約」、「JavaScriptアニメーション効果とテクニックの要約」、「Javascriptエラー、および「Debugging Techniques」の概要」の要約「Javascript Datasmy氏」の概要をご覧ください。 JavaScriptトラバーサルアルゴリズムとテクニック」、および「JavaScriptの数学的操作の使用法の要約」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。