JavaScript_javascript 팁을 사용하여 유지 관리 가능한 슬라이드쇼 효과 코드 만들기

분명히 그 효과는 매우 실용적입니다. 이 효과에 대해 우리는 효과 라이브러리를 사용하는 방법을 설명하지 않지만 유사한 효과를 생성하고 이를 사용 가능하고 눈에 거슬리지 않으며 유지 관리 가능하게 유지하는 방법을 설명합니다(향후 유지관리자가 사용자를 수정할 필요가 없도록 스크립트의 경우 이미지 수정). , 모양 또는 텍스트 라벨).

1단계: 문제 분석
좋은 스크립트를 만들기 위한 첫 번째 단계는 달성하려는 것이 무엇인지 분석하는 것입니다. 우리는 사진 슬라이드쇼 효과를 만들고 싶고 유지 관리를 쉽게 유지하고 싶습니다.

슬라이드쇼 효과를 만드는 방법

웹사이트에서 슬라이드쇼를 만드는 방법에는 여러 가지가 있습니다.

문서에 모든 이미지를 포함합니다.
자바스크립트 없이 실행할 때 안전한 선택입니다. 또한 페이지가 로드되면 모든 이미지도 로드됩니다. 그러나 이 방법은 소수의 이미지에만 적용됩니다.

문서의 첫 번째 이미지를 포함하고 슬라이드쇼 기능을 생성하는 서버 측 스크립트가 있습니다.
이 역시 매우 안전하지만 최종 사용자에게는 매우 성가신 일입니다. 단지 다음 사진을 얻기 위해 전체 페이지를 로드하고 싶지 않기 때문입니다. 그러나 페이지 표시 및 광고 클릭에는 더 효과적이므로 많은 뉴스 사이트에서 이 방법을 사용합니다.

문서의 첫 번째 이미지를 포함하고 요청 시 추가 이미지를 로드합니다.
이 방법에서 짜증나는 점은 JavaScript에 의존해야 하며 사진 목록을 유지 관리하는 JavaScript 배열이 있어야 한다는 것입니다. 또한 사용자에게 어떤 일이 진행되고 있는지 보여주기 위해 로딩 표시기를 제공해야 합니다.

저희 경우에는 아래 사진 목록을 가져와서 앞으로 및 뒤로 버튼을 사용하여 슬라이드쇼 효과로 변환하고, 총 사진 수 중 현재 표시되는 사진이 무엇인지 알려주는 표시기를 사용합니다.

•  
• 

 
• 

>
• 

최종 출력은 슬라이드쇼 효과 예시와 같습니다.

종속성 검사

여기에는 JavaScript 생성에 의존하는 몇 가지 요소(텍스트 표시기, 정방향 및 하향 링크)가 있습니다. 솔루션을 계속 사용할 수 있도록 하려면 다음 몇 가지 사항을 확인해야 합니다.

이러한 요소는 JavaScript(사용자가 제공한다고 신뢰하는 기능)를 사용할 수 있는 경우에만 나타나야 합니다. 링크는 사용자가 우리에 대해 갖는 신뢰를 침해하는 어떤 일도 할 수 없습니다.
대화형 요소는 입력 장치에 관계없이 사용할 수 있어야 합니다(사용자가 마우스를 가지고 있는지 여부에 의존하지 마세요).
사용자가 다시 액세스할 수 없는 한 이미지를 숨겨서는 안 됩니다. 기술적으로 정방향 및 역방향 링크 없이 첫 번째 이미지만 표시하는 것은 대체 방법이지만 사용자가 모든 이미지를 다운로드하고 첫 번째 이미지만 보아야 하는 이유는 무엇입니까?
2단계: 스크립트 계획
문제를 평가하고 사용하려는 솔루션을 선택한 후에는 스크립트 계획을 시작할 수 있습니다. 기본적으로 우리 스크립트는 다음을 수행해야 합니다.

슬라이드 목록이 존재하고 일부 이미지가 포함되어 있는지 확인합니다(이미지에 대해 슬라이드쇼 효과를 만드는 이유가 있습니까?).
모든 사진을 숨기되 첫 번째 사진은 숨기지 마세요.
정방향 및 역방향 링크와 현재 위치를 보여주는 표시기를 만듭니다.
링크가 현재 표시된 이미지 번호를 늘리거나 줄이려면 이벤트 핸들러를 추가하세요.
슬라이드 효과가 범위를 초과하지 않도록 주의하세요. 사진 번호가 0보다 작을 경우 마지막 사진이 되어야 하며, 그 반대의 경우도 마찬가지입니다.
다양한 기능 처리

이 문제를 처리할 수 있는 몇 가지 방법이 있습니다. 그 중 하나는 DOM을 사용하여 각 LI 항목을 반복하고 숨기는 것입니다. 이 이벤트 리스너 함수에서는 먼저 이전에 표시된 LI(있는 경우)를 숨기고 현재 LI를 표시합니다.

참고: 이미지 대신 LI를 표시하고 숨기는 것이 더 합리적입니다. 이를 통해 관리자는 일부 제목과 같은 다른 요소를 각 슬라이드에 추가할 수 있습니다.

이 방법의 문제점은 JavaScript에서 필요한 스타일 변경을 한다는 것입니다. 즉, 스크립트에서 표시를 블록에서 없음으로 변경하는 것보다 더 복잡한 스타일 변경이 필요한 경우 스크립트는 더욱 체계적이지 않게 됩니다(성능과 동작이 분리되지 않음).

스타일은 CSS 파서에 맡깁니다.

더 깔끔한 접근 방식은 모든 모양 변경 사항(모든 목록 항목을 다운로드한 후 일부 목록 항목 숨기기)을 브라우저의 CSS 파서에 맡기는 것입니다. 이 예에서는 슬라이드쇼에서 CSS 규칙을 사용하여 모든 목록 항목을 쉽게 숨기고 현재 항목의 스타일을 특정 클래스로 재정의할 수 있습니다.

HTML:

• 

"
• 

img src="img /plat3.jpg" alt="욕실" />

•  
• 

CSS ：


#slideshow li{
display:none;
}
#slideshow li.current{
display:block;
}
유일한 문제는 CSS와 JavaScript를 비활성화하면 방문자는 다른 이미지에 액세스할 수 없습니다. 따라서 JavaScript를 사용할 수 있는 경우에만 이러한 스타일을 적용해야 합니다. 요령은 JavaScript를 사용할 수 있는 경우 슬라이드의 UL에 클래스(예: js )를 적용하는 것입니다. 이를 통해 JavaScript를 사용할 수 있는 경우에만 CSS에서 간단히 수정하여 효과를 표시할 수 있습니다.

CSS:


#slideshow.js li{
display:none
}
#slideshow.js li.current{
display:block;
}
이 클래스의 후크는 슬라이드쇼의 정적 버전과 동적 버전을 제공하는 데도 사용할 수 있습니다. 완전히 다른 모습입니다.

우리 스크립트에서 해야 할 일은 현재 클래스를 제거하거나 추가하여 현재 사진과 이전 사진을 표시하고 숨기는 것뿐입니다.

우리 스크립트가 같은 페이지의 다른 스크립트에 영향을 미치지 않도록 하기 위해 기본 개체를 만들고 그 개체의 모든 메서드와 속성을 구성합니다. 이렇게 하면 init() 함수가 동일한 이름을 가진 다른 함수를 덮어쓰거나 재정의하지 않도록 보장됩니다.

JavaScript:


slideshow = {
current:0, // 현재 슬라이드 인코딩
init:function(){
// 초기화 및 설정 이벤트 처리 함수
},
show:function(e){
      // 이벤트 리스너  
  }
}  
세 번째 단계, 기본 도구 방법(필수 도구)
이제 , 우리는 스크립트를 계획하고 구축하기 위한 프레임워크를 가지고 있습니다. 이제 이 기능을 수행하는 데 필요한 몇 가지 도구에 대해 생각해 볼 시간입니다. 최소한 DOM 스크립트의 도우미 라이브러리에는 다음이 포함되어야 합니다.

이벤트 핸들러를 등록하는 방법으로 현재 John Resig의 addEvent() 메서드를 사용하고 있습니다.
CSS 스타일 이름을 추가하고 제거하는 방법.
HTML 요소의 기본 동작을 재정의하는 메서드입니다. 링크의 대상 페이지가 표시되는 것을 원하지 않고 스크립트를 실행하기만 하면 됩니다.
주 개체에 이러한 유틸리티 메서드를 추가하고 시작합니다.

JavaScript:


slideshow = {
current:0, // 현재 슬라이드 코딩
init:function(){
// 이벤트 핸들러 함수 초기화 및 설정
},
show:function(e){
// 이벤트 리스너
},
addEvent:function(obj, type, fn) {
if (obj.attachEvent) {
obj['e' type fn] = fn
obj[type fn] = function( ){
                obj['e' type fn]( window.event ); 
                                                    obj.attachEvent('on' type, obj[type fn] );
        } else
            obj.addEventListener( type, fn, false );
    },
    removeClass:function(o,c){
        var rep=o.className.match(' ' c)?' ' c:c;
        o.className=o.className.replace(rep,”);
    },
    addClass:function(o,c){
        var test = new RegExp("(^|\s)" c ”(\s|$)").test(o.className );
        if(!test){o.className =o.className?' ' c:c;}
    },
    cancelClick:function(e){
        if (window.event){
           window.event.cancelBubble = true;
            window.event.returnValue = false;
        }
        if (e && e.stopPropagation && e.preventDefault){
            e.stopPropagation();
            e.preventDefault();
        }
    }
}
当文档完全载完，第一件事情就是需要执行 init() 방법：

JavaScript：


슬라이드쇼 = {
    현재:0, // 当前幻灯文编码
    init:function(){
        // 初始화화设置事件处函数
리    },  표시:함수(e) {
       // 事件监听器
    },
    addEvent:function( obj, type, fn ) {
        if ( obj.attachEvent ) {
           obj['e ' fn 입력] = fn;
            obj[type fn] = function(){
               obj['e' type fn]( window.event );
            }
            obj.attachEvent('on' type, obj[type fn] );
        } else
            obj.addEventListener( type, fn, false );
    },
    removeClass:function(o,c){
        var rep=o.className.match(' ' c)?' ' c:c;
        o.className=o.className.replace(rep,”);
    },
    addClass:function(o,c){
        var test = new RegExp("(^|\s)" c ”(\s|$)").test(o.className );
        if(!test){o.className =o.className?' ' c:c;}
    },
    cancelClick:function(e){
        if (window.event){
           window.event.cancelBubble = true;
            window.event.returnValue = false;
        }
        if (e && e.stopPropagation && e.preventDefault){
            e.stopPropagation();
            e.preventDefault();
        }
    }
}

Slideshow.addEvent(window,'load',slideshow.init);
4단계: 스크립트(스크립트)
이제 모든 메서드 도구가 준비되었으며 창이 로드되면 init() 호출 , 이 메서드의 인스턴스화를 시작할 수 있습니다.

참고: 이는 전체 스크립트가 아닌 init() 메서드일 뿐입니다. 줄 번호 때문에 스크립트를 복사하여 붙여넣으면 오류가 발생합니다.


1: init:function(){
2: if(document.getElementById && document.createTextNode){
3: var list = document.getElementById(' '); 🎜> 4:         if(list){
5:           Slideshow.items = list.getElementsByTagName('li');          if(slideshow .all > 1){
8:       슬라이드쇼. addClass(목록, 'js ');           }
12:     slideshow.show();
13:  }
14: },
2번째 줄은 DOM 지원 여부를 감지합니다.
라인 3과 4에서는 ID가 슬라이드쇼인 요소를 검색하려고 합니다. 정의되지 않은 경우 나머지 메소드는 실행되지 않습니다.
5행과 6행은 목록 항목과 목록 항목 수를 검색하여 각각 items 및 all 속성에 저장합니다.
7행에서는 목록 항목이 하나 더 있는지 확인합니다. 목록 항목이 너무 많지 않으면 나머지는 실행되지 않습니다.
8행에서는 js 스타일 클래스 이름을 목록에 추가하여 달라야 하는 목록 항목과 스타일을 숨깁니다.
9번째 줄에서 createNav()를 호출하고 이 목록을 매개변수로 제공합니다.
12번째 줄에서 show()를 호출하여 미리 정의된 현재 속성으로 미닫이 문을 표시합니다.
createNav() 메소드는 DOM 스크립트를 사용하여 슬라이드쇼가 제대로 작동하는 데 필요한 HTML을 생성합니다.


1: createNav:function(o){
2: var p = document.createElement('p')
3: Slideshow.addClass(p, 'slidenav') ;
4: Slideshow.prev = document.createElement('a');
5: Slideshow.prev.setAttribute('href', '#')
6: var templabel = document.createTextNode ('<');
7: Slideshow.prev.appendChild(templabel)
8: Slideshow.addEvent(slideshow.prev, 'click', Slideshow.show)
9: p.appendChild(slideshow.prev);
10:   slideshow.count = document.createElement('span') )
12: Slideshow.count.appendChild(templabel); AppendChild(slideshow.count);
14: Slideshow.next = document.createElement('a')
15:       Slideshow.next.setAttribute('href', '#');
16: var templabel = document.createTextNode('>>');  
17:      Slideshow.next.appendChild(templabel )
18: Slideshow.addEvent(slideshow.next, 'click', Slideshow.show) ;
19: p.appendChild(slideshow.next);
20: o.parentNode.insertBefore(p , o);
21: },
라인 2와 3, P를 생성하세요. 전체 슬라이드 탐색을 포함하는 요소를 만들고 Slidenav라는 ​​클래스를 적용합니다.
4행과 5행에서는 새 링크 요소를 생성하여 prev라는 속성에 저장하고 href 속성을 #으로 설정합니다. 링크가 실제 링크로 나타나도록 하고 키보드를 활성화해야 합니다.
6행에서는 새 텍스트 레이블을 만듭니다.
7번째 줄, 링크에 텍스트 라벨을 추가합니다.
8번째 줄에 show() 청취 메서드를 가리키는 이벤트 처리 함수를 추가합니다.
9번째 줄, 단락에 새 링크를 추가합니다.
10행에서는 카운터를 시작하여 SPAN 요소를 생성하고 이를 count 속성과 함께 저장합니다.
11행에서는 전체에서 현재 슬라이드의 위치를 ​​표시하는 새 텍스트 노드를 만듭니다. 인간 계산은 0이 아닌 1부터 시작하므로 현재 속성에 1을 추가해야 합니다.
12번째 줄, SPAN에 새 하위 노드로 텍스트를 추가합니다.
13번째 줄, 단락에 SPAN 요소를 추가합니다.
14~19행은 기본적으로 4~9행의 복사본입니다. 이번에 링크를 다시 생성할 때 유일한 차이점은 다음 속성에 저장되는 텍스트 라벨입니다.
20번째 줄, 문서의 초기 그림 목록 앞에 최근 생성된 단락을 삽입합니다.
생성된 모든 태그가 필요하며, 남은 것은 링크를 클릭할 때 호출되는 리스너 메서드 show()를 정의하는 것뿐입니다.


1: show:function(e){
2: if(this === Slideshow.next || this === Slideshow.prev){
3: 슬라이드쇼. RemoveClass(slideshow.items[slideshow.current], 'current');
4: var addto = (this === Slideshow.next) ? 1: -1> 5: Slideshow.current = 슬라이드쇼. 현재 추가
6: if (slideshow.current & lt; 0) {
7: Slideshow.current = (SlideShow.all-1)
8: 🎜> 9: if (SLIDESHOW.current > Slideshow.all-1){
10:       slideshow.current = 0 ) ' / ' Slideshow.all)
14: Slideshow.count.replaceChild(templabel, Slideshow.count.firstChild); 🎜>15: Slideshow.addClass(slideshow.items[slideshow.current], '현재' ;
2번째 줄, 클릭한 요소가 하향 링크인지 정방향 링크인지 감지합니다(addEvent()에 의해 반환됨).
3번째 줄, 현재 표시된 슬라이드에서 현재 클래스를 제거합니다. 이제 클릭한 링크가 있으므로 이것이 가능합니다.
4행에서는 이 속성과 다음 속성을 비교하여 현재 카운터를 늘릴지 줄여야 할지 결정합니다.
5번째 줄, 카운터를 수정하세요.
6~11행, 카운터가 범위를 절대 벗어나지 않도록 결정하고, 첫 번째 슬라이드에 있을 때 앞으로 링크를 클릭하면 마지막으로 설정되고, 마지막 슬라이드에 있을 때는 을 클릭합니다. 역방향 링크의 경우 첫 번째 링크로 설정됩니다.
13행과 14행에서는 새 카운터 텍스트를 생성하고 이전 텍스트를 바꿉니다.
15행에서는 current라는 클래스를 설정하여 새로운 현재 슬라이드를 표시합니다.
라인 16, cancelClick()을 호출하여 링크의 기본 동작을 방지합니다.
대본 내용이 전부입니다. 이제 이 스크립트는 작동하지만 여전히 유지 관리가 불가능합니다.

5단계: 유지 관리 용이
스크립트는 완벽하게 작동하고 분리되어 있으며 흠잡을 데가 없습니다. 진짜 문제는 지금은 유지관리가 쉽지 않다는 것이다.

아마도 스크립트 애플리케이션의 가장 큰 문제는 모든 관리자가 JavaScript를 이해하지 못하고 스크립트에서 수정이 필요한 부분을 기꺼이 찾는다는 것입니다.

관리자가 이를 방지하는 가장 안전한 방법은 스크립트 및 CSS에 사용되는 이름과 ID를 스크립트 기능에서 분리하는 것입니다. 또한 텍스트 레이블은 변경될 수 있으므로 사용된 스크립트와 분리하는 것이 좋습니다. 예를 들어 스크립트가 다른 언어로 현지화되는 경우입니다.

도구 방법 재사용

가장 먼저 해야 할 일은 다른 스크립트에서 재사용할 수 있는 기본 스크립트에서 유틸리티 기능을 분리하는 것입니다. 아마도 대부분의 JavaScript 라이브러리가 시작되는 곳일 것입니다.

tools.js：


/* 도우미 메서드 */
tools = {
addEvent:function(obj, type, fn) {
if ( obj.attachEvent ) {
                obj['e' type fn]                                                                    >                                                                 🎜> },
RemoveClass :function(o,c){
var rep=o.className.match(' ' 다) ?' ' c:c;
o.className=o.className.replace(rep,”),
addClass:function(o,c){
var test = new RegExp (”(^|\s)” c “(\s|$)”).test(o.className) ;
if(!test){o.className =o.className?' c:c; }
},
cancelClick:function(e){
if (window.event){
window.event.cancelBubble = true;
window.event.returnValue = false; > }
if (e && e.stopPropagation && e.preventDefault) {
e.stopPropagation()
e.preventDefault()
}
}
}
CSS 클래스 및 ID - 모양

다음 단계는 모양 클래스와 ID를 별도의 포함 파일로 분리하는 것입니다. 다른 스크립트에서는 이를 사용할 가능성이 없으므로 슬라이드쇼 네임스페이스에서 안전한지 확인하십시오. 또한 간단한 설명 메모를 작성하는 데 방해가 되지도 않습니다.

slideshow-css.js:


slideshow.css = {
/*
슬라이드 효과에 사용되는 클래스와 ID입니다.
여기에서 원하는 항목을 수정할 수 있습니다.
이름 주위에는 따옴표를 사용하고 쉼표로 끝나야 합니다(마지막 이름 제외).
*/

showID :'slideshow',
DynamicClass :'js',
SlideNavigationClass :'slidenav',
currentClass :'current'
}
텍스트 레이블 - 최종 사용자에게 설명

마지막으로 슬라이드쇼 네임스페이스를 다시 사용하여 텍스트 레이블을 별도의 포함 파일에 넣어 보겠습니다.

slideshow-labels.js:


slideshow.labels = {
/*
슬라이드 효과에 사용되는 텍스트 레이블입니다.
여기에서 원하는 항목을 수정할 수 있습니다.
이름 주위에는 반드시 따옴표를 사용하세요.
끝에 쉼표가 없습니다.
*/

이전 : '<<',
다음 : '>>',
counterpider : ' of '
}
메인 스크립트 변경

그런 다음 내장된 데이터에 의존하는 대신 이 정보를 사용하도록 메인 스크립트를 수정해야 합니다. 변경 사항이 많지 않으며 검색 및 바꾸기로 쉽게 수행할 수 있습니다.

slideshow.js:


slideshow = {
current:0,
init:function(){
if(document.getElementById && document.createTextNode ){
var list =document.getElementById(slideshow.css.showID);
if(list){
Slideshow.items = list.getElementsByTagName('li') > 슬라이드쇼. items.length; if(slideshow.all > 1){
tools.addClass(list, Slideshow.css.dynamicClass)
Slideshow.createNav(list)
     } 
}
               Slideshow.show();
tools .addClass(p, Slideshow.css.slideNavigationClass);
Slideshow.prev = document.createElement('a'); .prev.setAttribute('href', '#');
var templabel = document.createTextNode(slideshow.labels.previous)
Slideshow.prev.appendChild(templabel)
tools.addEvent( Slideshow.prev, 'click', Slideshow.show);
p.appendChild(slideshow.prev)
Slideshow.count = document.createElement('span')
templabel =document.createTextNode( (slideshow.current 1) Slideshow.labels.counterpider Slideshow.all)
Slideshow.count.appendChild(templabel)
p.appendChild(slideshow.count)
Slideshow.next = document.createElement ('a');
Slideshow.next.setAttribute('href' , '#');
var templabel = document.createTextNode(
Slideshow.labels.next); .appendChild(templabel);
tools.addEvent(slideshow.next, 'click', Slideshow.show)
p.appendChild(slideshow.next)
o.parentNode.insertBefore(p, o );
},
show:function(e){
if(this === Slideshow.next || this === Slideshow.prev){
tools.removeClass(slideshow.items [slideshow.current],
Slideshow.css.currentClass);
var addto = this === Slideshow.next ? 1 : -1> Slideshow.current = Slideshow.current addto;if(slideshow.current < 0){
Slideshow.current = (slideshow.all-1);
슬라이드쇼 .current = 0; .count.replaceChild(templabel, Slideshow.count.firstChild); > tools.addClass(slideshow.items[slideshow.current], Slideshow.css.currentClass)
tools.cancelClick(e)
}
}
tools.addEvent(window,'load ',slideshow.init);
이러한 파일은 향후 관리자가 문제 없이 스크립트로 작업할 수 있도록 하는 데 필요한 모든 파일입니다. 파일 이름은 무엇인지 명확해야 하며 시간이 지남에 따라 표준 스크립트가 되어야 합니다.