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() {
