이 기사에서는 JS에서 슬라이드 쇼를 교대로 재생하는 효과에 대해 설명합니다. 다음과 같이 참조에 대해 공유하십시오.
<body><script language="javascript" type="text/javascript"><!--/****************************************************** Name: Image carousel class creation time: 2010-07-11 zhangty Example: There is a node named imgPlayer (or other ID is OK) in the page. pimgplayer.additem ( "테스트", "http://www.pomoho.com", "http://static.pomoho.com/static/samesong/images/logo5.jpg"); pimgplayer.additem ( "test2", "http://www.pomoho.com.cn", "http://static.pomoho.com/static/samesong/images/logo4.jpg"); pimgplayer.additem ( "test3", "http://www.pomoho.com.cn", "http://static.pomoho.com/static/samesong/images/logo3.jpg"); pimgplayer.init ( "imgplayer", 200, 230); Notes: Suitable for places where there is only one image carousel on a page.*********************************************************/var PImgPlayer = { _timer : null, _items : [], _container : null, _index : 0, _imgs : [], intervalTime : 5000, //Carousing interval init : 함수 (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; 텍스트 결정 : 없음;"; if (document.all) {linkstyle += "필터 :"; linkstyle += "progid : dximagetransform.microsoft.barn (duration = 0.5, motion = 'out', Orientation = 'vertical')"; linkstyle += "progid : dximagetransform.microsoft.barn (duration = 0.5, motion = 'out', Orientation = 'Horizontal')"; linkstyle += "progid : dximagetransform.microsoft.blinds (duration = 0.5, bands = 10, direction = 'down')"; linkstyle += "progid : dximagetransform.microsoft.checkerboard ()"; linkstyle += "progid : dximagetransform.microsoft.fade (duration = 0.5, 겹침 = 0)"; linkstyle += "progid : dximagetransform.microsoft.gradientWipe (duration = 1, gradientsize = 1.0, motion = 'reverse')"; linkstyle += "progid : dximagetransform.microsoft.inset ()"; linkstyle += "progid : dximagetransform.microsoft.iris (duration = 1, irisstyle = plus, motion = out)"; linkstyle += "progid : dximagetransform.microsoft.iris (duration = 1, irisstyle = plus, motion = in)"; linkstyle += "progid : dximagetransform.microsoft.iris (duration = 1, irisstyle = diamond, motion = in)"; linkstyle += "progid : dximagetransform.microsoft.iris (duration = 1, irisstyle = diamond, motion = in)"; linkstyle += "progid : dximagetransform.microsoft.iris (duration = 1, irisstyle = square, motion = in)"; linkstyle += "progid : dximagetransform.microsoft.iris (duration = 0.5, irisstyle = star, motion = in)"; linkstyle += "progid : dximagetransform.microsoft.radialwipe (duration = 0.5, wipestyle = clock)"; linkstyle += "progid : dximagetransform.microsoft.radialwipe (duration = 0.5, wipestyle = wedge)"; linkstyle += "progid : dximagetransform.microsoft.radialwipe (duration = 0.5, wipestyle = wedge)"; linkstyle += "progid : dximagetransform.microsoft.randombars (duration = 0.5, Orientation = Horizontal)"; linkstyle += "progid : dximagetransform.microsoft.randombars (duration = 0.5, Orientation = vertical)"; linkstyle += "progid : dximagetransform.microsoft.randomdissolve ()"; linkstyle += "progid : dximagetransform.microsoft.spiral (duration = 0.5, gridsizex = 16, gridsizey = 16)"; linkstyle += "progid : dximagetransform.microsoft.stretch (duration = 0.5, rectedstyle = push)"; linkstyle += "progid : dximagetransform.microsoft.strips (duration = 0.5, motion = right down)"; linkstyle += "progid : dximagetransform.microsoft.wheel (duration = 0.5, spokes = 8)"; LinkStyle += "progid : dximagetransform.microsoft.zigzag (duration = 0.5, gridsizex = 4, gridsizey = 40); 너비 : 100%; 높이 : 100%"; } // var ulstyle = "마진 : 0; 너비 :"+w+"px; 위치 : 절대; Z-index : 999; 오른쪽 : 5px; 필터 : Alpha (불투명 = 30, 마감력 = 90, style = 1); 오버 플로우 : Hidden; 하단 : -1px; 16px; 경계-발자국 : 1px 고체 #"; // var listyle = "margin : 0; List-Style-Type : none; margin : 0; 패딩 : 0; float : 오른쪽;"; // var basespacstyle = "clear : 둘 다; 둘 다 : 블록; 너비; 너비 : 23px; 선-높이 : 18px; font-size : 12px; font-family : '安'; 불투명도 : 0.6;"; BaseSpacstyle += "테두리 : 1px Solid #fff; Border-Right : 0; Border-Bottom : 0;"; Basespacstyle += "색상 : #fff; 텍스트-정렬 : 중심; 커서 : 포인터;"; // var ulhtml = ""; for (var i = this._items.length -1; i> = 0; i-) {var spanstyle = ""; if (i == this._index) {SpanStyle = BaseSpacStyle + "배경 :#ff0000;"; // 하단 번호의 색상을 초기화} else {SpanStyle = BaseSpacStyle + "배경 :#C0C0C0;"; // 하단 번호의 배경색 초기화} ulhtml+= "<li style =/" "+listyle+"/">"; ulhtml+= "<<span onmouseover =/"pimgplayer.mouseover (this);/"onMouseOut =/"pimgplayer.MouseOut (this);/"style =/"+spanstyle+"/"onclick =/"pimgplayer.play ("+i+"); herf =/"javascrip :/"javascript :/"javascript :/"herf =/"herf =/"herf =/"herf =/"herf =/"herf =/"herf =/" this._items [i] .title+"/"> "+(i+1)+"</span> "; ulhtml+="</li> ";} // var html ="<a href =/""+this. this._items [this._index] .link+"/"title =/"+this._items [this._index]. 대상 =/"_ 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._imer = 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-repeat center center'; // var listyle = "margin : 0; List-Style-Type : none; margin : 0; 패딩 : 0; float : 오른쪽;"; var basespacstyle = "clear : display : display : 블록; 너비 : 23px; 선-높이 : 18px; font-size : 12px; font-family : '安'; 불투명도 : 0.6;"; BaseSpacstyle += "테두리 : 1px Solid #fff; Border-Right : 0; Border-Bottom : 0;"; Basespacstyle += "색상 : #fff; 텍스트-정렬 : 중심; 커서 : 포인터;"; var ulhtml = ""; for (var i = this._items.length -1; i> = 0; i-) {var spanstyle = ""; if (i == this._index) {SpanStyle = BaseSpacStyle + "배경 :#ff0000;"; // 숫자의 색상} else {spanstyle = basespacstyle + "배경 :#c0c0c0;"; // 숫자의 배경색} ulhtml+= "<li style =/" "+listyle+"/">"; ulhtml+= "<<span onmouseover =/"pimgplayer.mouseover (this);/"onMouseOut =/"pimgplayer.MouseOut (this);/"style =/"+spanstyle+"/"onclick =/"pimgplayer.play ("+i+"); herf =/"javascrip :/"javascript :/"javascript :/"herf =/"herf =/"herf =/"herf =/"herf =/"herf =/"herf =/" this._items [i] .title + "/"> " + (i + 1) +"</span> "; ulhtml + ="</li> ";} this._container.getElementsByTagName ("ul ") if (this._index! = i-1) {obj.style.color = "#ff0000"}; "http://www.lashou.com/", "./images/1001.jpg"); "http://www.meituan.com/", "./images/1003.jpg");JavaScript 관련 컨텐츠에 대한 자세한 내용은이 사이트의 주제를 확인하십시오. "JavaScript Switching 효과 및 기술 요약", "JavaScript 검색 알고리즘 기술 요약", "JavaScript 애니메이션 효과 및 기술 요약", "Javascript 오류 및 디버깅 기술의 요약" "JavaScript 기술의 요약" "" "요약" "", Moal Scripply의 요약 "". JavaScript Traversal 알고리즘 및 기술 "및"JavaScript 수학 연산 사용 요약 "
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.