이미지 바뀌는 소스인데 탭메뉴에 적응했더니 잘 안되는데 소스좀 봐주세요
CMS/프레임워크 | 사용안함 |
---|---|
개발 언어 | 사용안함 |
<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 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로 바꿔서 추가했는데
이미지가 안바뀌는데 어디를 바꿔주거나 더 추가해줘야 할까요?
댓글 2
이미지 바뀌는 소스인데 탭메뉴에 적응했더니 잘 안되는데 소스좀 봐주세요
var x = document.getElementsByClassName("slide1"); 이부분을 바꾸면 한줄 더 추가해서 slide1 에서 slide2로 바꿔서 추가했는데 이미지가 안바뀌는데 어디를 바꿔주거나 더 추가해줘야 할까요?
> 요즘 제가 문맥 이해 능력이 떨어지나보네요. ㅠ
1. 이미지 바뀌는 소스인데
> 저게 어느 부분이 이미지가 바뀌는 소스인거죠?
>> content1에 slide 영역에 있는 slide1이 함수가 실행할 때마다 기본적으로 감춰져있던 이미지들이 하나씩 보여지는 구조군요...
2. 탭메뉴에 적응(적용?)했더니
> 어디에 탭메뉴에 적용되어있나요?
>> 탭메뉴에 적용했다는 말이 무슨 뜻인지요..
3. var x 이 부분을 바꾸면 한줄 더 추가해서 slide1에서 slide2로 바꿔서 추가했는데
> 뭘 어떻게 뭘 추가하고 뭘 바꿔서 추가했다는 거죠?
>> var x 이 부분을 var y라고 정의해서 slide2로 수정한다던가 그래야 하는데 위 코드는 아직 그게 적용되어있진 않네요..
4. 이미지가 안 바뀌는데 어디를 바꿔주거나 더 추가해줘야 할까요?
> 뭘 어떻게 하고 싶으시다는건지... 구체적으로 클래스명이나 이미지 파일명을 적어주시면 좋겠지만..
>> 코드를 아마 적용하신 걸 안 올리신거 같네요.
적어주신 코드 내용은 탭과는 전혀 관련이 없어보이구요..
탭을 바꾸면 tab1에 해당하는 이미지가 출력되고, 또 다른 탭을 선택하면
tab1은 감추고, tab2에 해당하는 이밎가 출력되는 코드를 원하시는 것 같긴 한데요.
적어주신 코드 내용은...음..
1.
윈도우가 온로드될 때 slideShow() 라는 함수를 실행시킨다.
2.
slides 라는 영역에 있는 slide1이라는 클래스를 가진 이미지가
첫번째부터 순서대로 감춰졌다 보여졌다 하면서
겉으로 보기에 바뀐다는 말씀이셨군요..^^;;
그러면 저기에 content2에 slide2를 그냥 html 코드만 추가해놓으셨는데요
자바스크립트에서는 저기서 x에 해당하는 slide2를 지정하는 함수가 없어요..
그래서 x만(slide1만) 바뀌고 있는 거에요
https://jsfiddle.net/eond/8wvnpjxz
이게 스마트한 방법은 아닌데... y를 추가해주면..이렇게 됩니다.