질문/조언질답게시판
<script>
    var index = 0;   //이미지에 접근하는 인덱스
    window.onload = function(){
        slideShow();
    }
    
    function slideShow() {
    var i;
    var x = document.getElementsByClassName("slide1");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";   //처음에 전부 display를 none으로 한다.
    }
    index++;
    if (index > x.length) {
        index = 1;  //인덱스가 초과되면 1로 변경
    }   
    x[index-1].style.display = "block";  //해당 인덱스는 block으로
    setTimeout(slideShow, 4000);   //함수를 4초마다 호출
}
</script>

<input checked="checked" id="tab1" name="tabs" type="radio" /><!--디폴트 메뉴-->
<label for="tab1">탭메뉴1</label>
<input id="tab2" name="tabs" type="radio" />
<label for="tab2">탭메뉴2</label>


<section id="content1">
    <div class="cgp-panel cgp-1box">
        <div class="cgp-pcontents">
            <div class="cgp-2box float-left">
                <div id="splash-m1" class="splash">
                    <ul class="slides">
                        <img class="slide1" src="/outpage/test1.png" >
                        <img class="slide1" src="/outpage/test2.png" >
                        <img class="slide1" src="/outpage/test3.png" >
                        <img class="slide1" src="/outpage/test4.png" >
                    </ul>
                </div>
            </div>
            <div class="cgp-2box float-right">
                <img src="./img/12345.png" width="404" height="768" alt="그림 설명" />

            </div>
        </div>
    </div>
</section>

<section id="content2">
    <div class="cgp-panel cgp-1box">
        <div class="cgp-pcontents">
            <div class="cgp-2box float-left">
                <div id="splash-m1" class="splash">
                    <ul class="slides">
                        <img class="slide2" src="/outpage/test11.png" >
                        <img class="slide2" src="/outpage/test22.png" >
                        <img class="slide2" src="/outpage/test33.png" >
                    </ul>
                </div>
            </div>
            <div class="cgp-2box float-right">
                <img src="./img/network-1.png" width="404" height="768" alt="그림 설명" />

            </div>
        </div>
    </div>
</section>

 

var x = document.getElementsByClassName("slide1");
이부분을 바꾸면 한줄 더 추가해서 slide1 에서 slide2로 바꿔서 추가했는데 

이미지가 안바뀌는데 어디를 바꿔주거나 더 추가해줘야 할까요?

  • profile

    이미지 바뀌는 소스인데 탭메뉴에 적응했더니 잘 안되는데 소스좀 봐주세요

    var x = document.getElementsByClassName("slide1"); 이부분을 바꾸면 한줄 더 추가해서 slide1 에서 slide2로 바꿔서 추가했는데   이미지가 안바뀌는데 어디를 바꿔주거나 더 추가해줘야 할까요?

    > 요즘 제가 문맥 이해 능력이 떨어지나보네요. ㅠ

  • profile

    1. 이미지 바뀌는 소스인데

    > 저게 어느 부분이 이미지가 바뀌는 소스인거죠?

    >> content1에 slide 영역에 있는 slide1이 함수가 실행할 때마다 기본적으로 감춰져있던 이미지들이 하나씩 보여지는 구조군요...

    2. 탭메뉴에 적응(적용?)했더니

    > 어디에 탭메뉴에 적용되어있나요?

    >> 탭메뉴에 적용했다는 말이 무슨 뜻인지요..

    3. var x 이 부분을 바꾸면 한줄 더 추가해서 slide1에서 slide2로 바꿔서 추가했는데

    > 뭘 어떻게 뭘 추가하고 뭘 바꿔서 추가했다는 거죠? 

    >> var x 이 부분을 var y라고 정의해서 slide2로 수정한다던가 그래야 하는데 위 코드는 아직 그게 적용되어있진 않네요..

    4. 이미지가 안 바뀌는데 어디를 바꿔주거나 더 추가해줘야 할까요?

    > 뭘 어떻게 하고 싶으시다는건지... 구체적으로 클래스명이나 이미지 파일명을 적어주시면 좋겠지만..

    >> 코드를 아마 적용하신 걸 안 올리신거 같네요. 

    적어주신 코드 내용은 탭과는 전혀 관련이 없어보이구요..

    탭을 바꾸면 tab1에 해당하는 이미지가 출력되고, 또 다른 탭을 선택하면

    tab1은 감추고, tab2에 해당하는 이밎가 출력되는 코드를 원하시는 것 같긴 한데요.

     

    적어주신 코드 내용은...음..

     

    1. 

    window.onload = function(){
            slideShow();
        }

    윈도우가 온로드될 때 slideShow() 라는 함수를 실행시킨다.

     

    2. 

    function slideShow() {
        var i;
        var x = document.getElementsByClassName("slide1");
        for (i = 0; i < x.length; i++) {
           x[i].style.display = "none";   //처음에 전부 display를 none으로 한다.
        }
        index++;
        if (index > x.length) {
            index = 1;  //인덱스가 초과되면 1로 변경
        }   
        x[index-1].style.display = "block";  //해당 인덱스는 block으로
        setTimeout(slideShow, 4000);   //함수를 4초마다 호출
    }
     
    2.1.
    var i;
     
    > i가 있다.
     
        var x = document.getElementsByClassName("slide1");
    > x는 저 slide1이란 클래스명을 가진 아이다.
        for (i = 0; i < x.length; i++) {
           x[i].style.display = "none";   //처음에 전부 display를 none으로 한다.
        }
    > i는 0이고, x(slide1이란 클래스를 가진 아이의 갯수)만큼, i를 계속 증가시킨다.
    >
    slide1[0] display:none 적용
    slide1[1] display:none 적용
    slide1[2] display:none 적용
    slide1[3] display:none 적용
     
    index++
    > slideShow()함수가 처음 실행될 때는 1, 두번째 실행하면 2, (계속 증가)
     
    if (index > x.length)
    > index가 x 갯수보다 많을 경우...
    index = 1;
    > index = 1 로 정의..
     
    저기 html 코드에서 x 갯수가 4개인데, i가 x보다 많으려면
    이 slideShow()함수가 5번째 실행되고 나면 다시 index=1로 재정의되는 겁니다.
      
        x[index-1].style.display = "block";  //해당 인덱스는 block으로
     
    x[1-1].style.display='block'; -> x[0] display:block
    x[2-1].style.display='block'; -> x[1] display:block
    x[3-1].style.display='block'; -> x[2] display:block
    x[4-1].style.display='block'; -> x[3] display:block
    x[1-1].style.display='block'; -> x[0] display:block
    ...계속 반복
     
        setTimeout(slideShow, 4000);   //함수를 4초마다 호출
    4초마다 slideShow 함수를 실행

     

     

     

    slides 라는 영역에 있는 slide1이라는 클래스를 가진 이미지가

    첫번째부터 순서대로 감춰졌다 보여졌다 하면서

    겉으로 보기에 바뀐다는 말씀이셨군요..^^;;

     

    그러면 저기에 content2에 slide2를 그냥 html 코드만 추가해놓으셨는데요

    자바스크립트에서는 저기서 x에 해당하는 slide2를 지정하는 함수가 없어요..

     

    그래서 x만(slide1만) 바뀌고 있는 거에요

     

    https://jsfiddle.net/eond/8wvnpjxz

    이게 스마트한 방법은 아닌데... y를 추가해주면..이렇게 됩니다.