반응형
[JavaScript를 이용한 초간단 슬라이드 만들기]
인터넷을 돌아다니다가 유튜브에서 자바스크립트 기초 강좌중에 간단한 슬라이드 만들기가 있어서 가져왔습니다.
원래 강좌에 간단한 CSS 박스만 추가해서 만들어 봤습니다. 아래쪽에 유튜브 강좌도 링크 했습니다.
code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#slide {
border:1px solid #000;
border-radius: 10px;
box-shadow: 3px 3px 5px #333;
}
#content{
font-size: 12px;
margin:30px 0;
text-align:center;
}
</style>
<script type="text/javascript">
var image1=new Image();
image1.src="test00.jpg";
var image2=new Image();
image2.src="test11.jpg";
var image3=new Image();
image3.src="test22.jpg";
</script>
</head>
<body>
<div id="content">
<img id="slide" src="test00.jpg" name="slide" width="600" height="350"><br/>
[JavaScript를 이용한 초간단 슬라이드 만들기]
</div>
<script type="text/javascript">
var step=1;
function slideit(){
document.images.slide.src=eval("image"+step+".src");
if (step<3)
step++;
else
step=1;
setTimeout("slideit()",2500);
}
slideit();
</script>
</body>
</html>
반응형
