js 이미지 슬라이드 하기 중 작동이 안되는 이유 알려주세요

js 이미지 슬라이드 하기 중 작동이 안되는 이유 알려주세요

QA

js 이미지 슬라이드 하기 중 작동이 안되는 이유 알려주세요

본문

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
            #container { 
            width:600px;
            margin:0 auto;
        }
        #prod-pic, #desc { 
            float:left;
        }
        #prod-pic {             
            margin:20px 20px auto 10px;
            padding:0;
        }
        #cup {             
            box-shadow:1px 1px 2px #eee;
            outline:1px dashed #ccc;            
            outline-offset: -7px;
        }
        #small-pic {
            margin-top:20px;
            list-style: none;
            padding:0;            
        }
        #small-pic > li {
            float:left;
            margin-right:10px;
        }
        .small {
            width:60px;
            height:60px;
        }
        #small-pic img:hover {
            cursor:pointer;
        }        
        #desc {  
            width:300px;
            padding-top:20px;
            margin-bottom:50px;
        }
        .bluetext {
            color:#4343ff;
            font-weight:bold;
        }
        #desc button {
            margin-top:20px;
            margin-bottom:20px;
            width:100%;
            padding:10px;
        }
        #desc ul {
            list-style:none;
        }
        #desc li{
            font-size:0.9em;
            line-height:1.8;
        } 
        #desc a {
            text-decoration: none;
            font-size:0.9em;
            color:blue;
            padding-left:40px;
        }
        hr {
            clear:both;
            border:1px dashed #f5f5f5;
        }
        #detail {
            padding-top:10px;
            display:none;
        }
        #detail li {
            font-size:0.9em;
            line-height:1.4;
        }
        h1 { 
            font-size:2em;
        }
        h2 {
            font-size:1.5em;
            color:#bebebe;
            font-weight:normal;
        }
        h3 {  
            font-size:1.1em;
            color:#222;
        }
        p { 
            font-size:0.9em;
            line-height:1.4;
            text-align: justify;
        }

    </style>
</head>
<body>
       <div id="container">
        <h1 id="heading">에디오피아 게뎁</h1>
        <div id="prod-pic">
            <img src="images/coffee-pink.jpg" alt="에디오피아 게뎁" id="cup" width="200" height="200">
            
            <div id="small-pic">
               <img src="images/coffee-pink.jpg" class="small" onclick="change()" name="jpg" id="img1"> 
                 <img src="images/coffee-blue.jpg" class="small"onclick="change()" name="jpg"id="img2">
                <img src="images/coffee-gray.jpg" class="small"onclick="change()" name="jpg"id="img3">
            </div>
        </div>
        <script>
          function slideShow() {
               var i;
              
                var x = document.getElementsByClassName("small");
               for(i=0;i<x.length;i++){
                  x[i].style.display = "none"; 
               }
            
               index++;
              if (index > x.length) {
                      index = 1;
               }
              x[index-1].style.display = "block"; 
    setTimeout(slideShow, 4000);  
           }
             
           </script>
        </div>
</body>
</html>

//쇼핑몰에서 흔히 볼수 있는 이미지 자동 변경 되는 문제를 풀다가  for문을 사용 해 보고 싶어 찾아서 풀어 보는데 안되는 이유가 뭔지 궁금합니다

 

var num = 0;
var imgArray = new Array();
imgArray.push("images/coffee-pink.jpg");
imgArray.push("images/coffee-gray.jpg");
imgArray.push("images/coffee-blue.jpg");
setInterval(change, 1000);
//console.log(imgArray);
function change() {
    

이 질문에 댓글 쓰기 :

답변 1

이 소스는 수정할게 많구요..

아래 링크를 참조하세요..

https://offbyone.tistory.com/148

답변을 작성하시기 전에 로그인 해주세요.
전체 1,178
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT