div 한개로 이미지슬라이드를 구현할 수 있나요?
본문
안녕하세요.
다름이 아니라 div 또는 img 태그 1개로 슬라이드를 구현할 수 있는지 궁금해서 질문드렸습니다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>일정시간 지나면 이미지 변환</title>
<script type="text/javascript">
<!--
var img=new Array();
img[0]=new Image(); img[0].src="http://madalla.kr/script/img/a1.jpg";
img[1]=new Image(); img[1].src="http://madalla.kr/script/img/a2.jpg";
img[2]=new Image(); img[2].src="http://madalla.kr/script/img/a3.jpg";
var interval=1500;
var n=0;
var imgs = new Array(img[0].src,img[1].src,img[2].src);
function rotate()
{
if(navigator.appName=="Netscape" && document.getElementById)
{
document.getElementById("slide").src=imgs[n];
}
else document.images.slide.src=imgs[n];
(n==(imgs.length-1))?n=0:n++;
setTimeout("rotate()",interval);
}
// -->
</script>
</head>
<style>
.slide {
transition-property : transform;
transition : all 0.5sec;
overflow-x:visible;
}
</style>
<body onload="rotate()" class="slide">
<center><br /><br />
<img src="http://madalla.kr/script/img/a1.jpg" id="slide">
</body>
를 통해 1개씩 이미지를 바꾸는건 가능했는데 슬라이드 처럼 할수 있는 지 알려주시면 감사하겠습니다.
답변 2
가능한지는 잘 모르겠습니다만, 매우 어려울 것 같습니다.
이미지 슬라이더 라이브러리를 사용하는 것을 추천하겠습니다.
img태그를 div로 깜싸고 영역을 정해주어야지 안그러면 페이지 전체를 대상으로 슬라이드를
해야하지 않겟어요?
position:absolute를 주고 left 값을 변화 시키면 슬라이드 됩니다
그런데 이런건 jquery를 이용하면 아주 간단합니다
특히 up down 은 slideUp() / slideDown() 만 해주면 됩니다
답변을 작성하시기 전에 로그인 해주세요.
