この記事では、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プログラミングに役立つことを願っています。