JS 슬라이드쇼는 스크롤 내비게이션(자체 작성)_javascript 기술을 사용하여 원활하게 반복 및 회전할 수 있습니다.

최근에 다른 사람이 뭔가 바꾸는 걸 도와주다가 똑같은 게 하나도 없었는데 제가 직접 바꿔서 공유해 봤습니다. 먼저 효과를 보여드리겠습니다. index.html 페이지 표시 코드

코드 복사 코드는 다음과 같습니다. xmlns="http:// www.w3.org/1999/xhtml"> &lt ;SCRIPT 언어="JavaScript" src="js/16sucai.js"> /script> &lt ;/head> 이전 다음 name='1' src= "images/main_right_p.jpg"> 삼국시대의 주요 여성 인물 중 한 명입니다. 삼국시대 오나라에 속해 있었으며, 뛰어난 재능과 아름다움을 지닌 미인이었습니다.

> 서진(西晉)의 작가 반안(汉庵) 본명은 반월(汉舌)이다. 고대 중국에서 가장 유명한 미남이자 "금곡의 24인 친구" 중 첫 번째입니다.

> 명나라를 건국한 황제 주원장은 전국에 통일된 봉건정권을 세웠습니다.

🎜> 서한(西汉)을 건국한 황제 유방(劉波)의 첫 번째 부인인 루페이(魯飛)는 중국 역사상 최초로 권력을 잡은 여성 통치자였습니다.

🎜> 촉한나라 재상 제갈량은 삼국시대의 뛰어난 정치가, 전략가, 발명가, 군사 전략가였습니다.

🎜> label name='numBut' id='2'> ;/html>

해당 JS 파일 내용은 다음과 같습니다.

코드 복사

다음과 같습니다: //var tempi=0; 함수 ZoomPic() { this.initialize.apply(this, 인수); } ZoomPic.prototype = { initialize : 함수(id) { var _this = this; this.wrap = id 유형 === "string" ? document.getElementById(id) : id; this.oUl = this.wrap.getElementsByTagName("ul")[0]; this.aLi = this.wrap.getElementsByTagName("li"); this.spans = this.wrap.getElementsByTagName("라벨"); this.prev = this.wrap.getElementsByTagName("pre")[0]; this.next = this.wrap.getElementsByTagName("pre")[1]; this.timer = null; this.aSort = []; this.aSpan = []; this.iCenter = 2; this._doPrev = 함수() {return _this.doPrev.apply(_this)}; this._doNext = 함수() {return _this.doNext.apply(_this)}; this.options = [ {너비:50, 높이:212, 위쪽:55, 왼쪽:0, zIndex:1}, {너비:90, 높이:252, 위쪽:35, 왼쪽 :50, zIndex:2}, {너비:400, 높이:292, 위쪽:10, 왼쪽:140, zIndex:3}, {너비:90, 높이:252, 위쪽:35, 왼쪽 :540, zIndex:2}, {너비:50, 높이:212, 위쪽:55, 왼쪽:630, zIndex:1} ]; for (var i = 0; i for (var i = 0; i this.aSort.unshift(this.aSort.pop()); this.setUp(); this.addEvent(this.prev, "클릭", this._doPrev); this.addEvent(this.next, "클릭", this._doNext); this.doImgClick(); this.dospansClick(); this.timer = setInterval(function () { _this.doNext() }, 3000); this.wrap.onmouseover = 함수() { clearInterval(_this.timer) }; this.wrap.onmouseout = function () { _this.timer = setInterval(function () { _this.doNext() }, 3000); } }, doPrev : function () { this.aSort.unshift(this.aSort.pop());//删除数组最后一项，并且返回数组获取最后一位 this.setUp() }, doNext : function () { this.aSort.push(this.aSort.shift());//删除数组第一项，并且返回数组 删除第一位，然后把第一位push到最后一个上面 this.setUp() }, doImgClick : function () 🎜 >var _this = 이것; for (var i = 0; i { this.aSort[i].onclick = function () { //alert(this. 색인); if (this.index > _this.iCenter) { for (var i = 0; i _this.setUp() } else if(this.index { for (var i = 0; i _this.setUp() } } } },dospansClick:function(){ var _this = this; for (var i = 0; i { this.aSpan[i].onclick = function () { //alert (this.id); //alert(_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name);//获取到当前是第几个재中间 var cruuNum=_this.aSort[ _this.iCenter].getElementsByTagName('img')[0].name; // if (this.id > _this.iCenter) // { // for (var i = 0; i // _this.setUp() //alert(this.id '...' cruuNum); if(this.id-cruuNum>0){ for (var i = 0; i _this.setUp() }else{ //if(cruuNum==5){ //if(this.id-cruuNum>0){ for (var i = 0; i _this.setUp(); //}

//} } // else{ // for (var i = 0; i // _this.setUp() // // }

// } // else if(this.id // { // for (var i = 0; i // _this.setUp() // }

// for (var i = 0; i // _this.aSort.push( _this.aSort.shift());//取第一个 // Alert(_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name 'aaa' this.id); // if(_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name==(this.id 1)){ // _this.setUp() // 부서지다; // } // }

} } }, setUp : function () { var _this = this; var i = 0; for (i = 0; i for (i = 0; i { this.aSort[i].index = i; //控system浮动层 if (i {

this.css(this.aSort[i], "display", "block"); this.doMove(this.aSort[i], this.options[i], 함수 () { _this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img") [0], {불투명도:100}, 함수() { _this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img")[0], {opacity:100}, 함수() { _this.aSort[_this.iCenter].onmouseover = 함수 ()//鼠标放上去 { _this.doMove(this.getElementsByTagName("div")[0], {bottom:0}) }; _this.aSort[_this.iCenter].onmouseout = 함수() { _this.doMove(this.getElementsByTagName("div")[0], {bottom:-100}) } }) }) }); } else { this.css(this.aSort[i], "display", "none"); this.css(this.aSort[i], "너비", 0); this.css(this.aSort[i], "높이", 0); this.css(this.aSort[i], "top", 37); this.css(this.aSort[i], "left", this.oUl.offsetWidth / 2) } if (i this.iCenter) // { this.css(this.aSort[i].getElementsByTagName("img")[0], "opacity", 30) this.aSort[i].onmouseover = 함수( ) { _this.doMove(this.getElementsByTagName("img")[0], {opacity:100}) }; this.aSort[i].onmouseout = 함수 () { _this.doMove(this.getElementsByTagName("img")[0], {opacity:35}) }; this.aSort[i].onmouseout(); } else { //中间 一直是2 //alert(this.aSort[i].text);//取消变亮事件 //alert (this.aSort[i].getElementsByTagName("img")[0].name); //变换颜color var ttSe=this.aSort[i].getElementsByTagName("img")[0].name; var numbuts= document.getElementsByName('numBut'); //alert(numbuts.length);

for(var t=0;t if(t==0){ if(ttSe==5){ numbuts[t ].className ='numbutLeftCen'; }else numbuts[t].className ='numbutLeft'; }else if(t==ttSe){ numbuts[t].className ='numbutCen'; }else if(t==numbuts.length){ //alert(t); numbuts[0].className ='numbutCen'; }else{ //전체 부분 클래스 numbuts[t].className='numbut'; } //var aObj = document.getElementById("a적ID"); //添加事件 //alert(tempi); // if(tempi==0){//alert(tempi); // if (window.addEventListener) {//Mozilla 시스템 // numbuts[t].addEventListener('click', _this.addClick(t 1), false); // } else if (window.attachEvent) {//IE // numbuts[t].attachEvent('onclick', this.addClick(t 1)); // } // } } //tempi ; this.aSort[i].onmouseover = this.aSort[i].onmouseout = null } } },addEvent : 함수(oElement, sEventType, fnHandler) { oElement.addEventListener를 반환 ? oElement.addEventListener(sEventType, fnHandler, false) : oElement.attachEvent("on" sEventType, fnHandler) }, css : 함수(oElement, attr, value) { if(인수 .length == 2) { oElement.currentStyle을 반환 ? oElement.currentStyle[attr] : getCompulatedStyle(oElement, null)[attr] } else if (arguments.length == 3) { 스위치(attr) { case "width": case "height": case "top": case "left": case "bottom": oElement.style[attr] = value " px"; 휴식; case "opacity" : oElement.style.filter = "alpha(opacity=" value ")"; oElement.style.opacity = 값 / 100; 휴식; 기본값 : oElement.style[attr] = 값; break } } }, doMove : 함수(oElement, oAttr, fnCallBack) { var _this = this; clearInterval(oElement.timer); oElement.timer = setInterval(function () { var bStop = true; for(oAttr의 var 속성) { var iCur = parseFloat(_this.css( oElement, 속성)); property == "opacity" && (iCur =parseInt(iCur.toFixed(2) * 100)) var iSpeed = (oAttr[property] - iCur) / 5; 🎜>iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

if (iCur != oAttr[property]) { bStop = false; _this.css(oElement, property, iCur iSpeed) } } if (bStop) { clearInterval(oElement.timer) fnCallBack && fnCallBack. 적용(_this, 인수) } }, 30) },addClick:function (num){ //alert(num); // if (this.index > _this.iCenter) // { // for (var i = 0; i // _this.setUp() // } } }; window.onload = function () { new ZoomPic("box"); }; 함수 tt(){ //alert(1);

}

좋아, 最后加上一些样式上的东西,就可以跑起来了;

复主代码 代码如下: 본문 { 여백: 0px; 패딩: 0px; } div { 여백: 0px; 패딩: 0px; } ul { 여백: 0px; 패딩: 0px; } li { 여백: 0px; 패딩: 0px; } h4 { 여백: 0px; 패딩: 0px; } p { 여백: 0px; 패딩: 0px; } body { 반복 없음 50% 0px rgb(0, 0, 0); 글꼴: 12px/1.8 arial; 색상: rgb(255, 255, 255); 글꼴 크기 조정: 없음; 글꼴 스트레치: 일반; } a { 배경: rgb(102, 102, 102); 패딩: 2px 5px; 색상: rgb(255, 255, 255); 텍스트 장식: 없음; } a:hover { 배경: rgb(255, 153, 0); } #box { 여백: 1px 자동 0px; 너비: 680px; 높이: 320px; 위치: 상대; } #box ul { 너비: 680px; 높이: 320px; 위치: 상대; } #box li { 배경: rgb(0, 0, 0); 목록 스타일: 없음; 테두리 반경: 3px; 테두리:0px 솔리드 rgb(0, 0, 0); 왼쪽: 377px; 상단: 146px; 너비: 0px; 높이: 0px; 오버플로: 숨김; 위치: 절대; Z-인덱스: 0; 커서: 포인터; } #box li div { 배경: rgb(0, 0, 0); 너비: 100%; 높이:40px; 하단: -100px; 위치: 절대; 불투명도: 0.7; } #box li div h4 { 글꼴: 12px/24px arial; 여백: 0px 10px; 테두리 하단 색상: rgb(51, 51, 51); 테두리 하단 너비: 1px; 테두리 하단 스타일: 단색; 글꼴 크기 조정: 없음; 글꼴 스트레치: 일반; } #box li div h4span { 색상: 빨간색; 왼쪽 여백: 10px; } #box li div p { 여백: 5px 10px 0px; 텍스트 들여쓰기: 2em; } .numbutLeft{너비: 15px; 높이: 5px; 배경색:#AFB7B6; 플로트: 왼쪽; 커서: 포인터;} .numbut{너비: 15px; 높이: 5px; 배경색:#AFB7B6; 플로트: 왼쪽; 왼쪽 여백: 5px; 커서: 포인터;} .numbutCen{너비: 15px; 높이: 5px; 배경색:#FF0000; 플로트: 왼쪽; 왼쪽 여백: 5px; 커서: 포인터;} .numbutLeftCen{너비: 15px; 높이: 5px; 배경색:#FF0000; 플로트: 왼쪽; 커서: 포인터;} .numbutdiv{높이: 10px;너비: 100%;색상: 빨간색;여백-상단: 0px; 패딩 상단: 0px} .ndv{높이: 10px;너비: 95px; 여백: 0 자동} #box .next { 배경 위치: -39px 0px; 오른쪽: -60px; } #copyright { text-align: center; 패딩 상단: 10px; } OOOOOKKK 了,奇特的效果就要出来了 ,还有一些不完美的地方,懒得去改了,有高手可以改改看,但希望分享哦。 效果如下: