- 시작화면입니다.
- 다음버튼을 클릭하시면 다음사진으로 넘어갑니다. (여기까진 순조로와요)
- 자 그럼 시간을 설정해보도록하겠습니다 1(sec)~5(sec)까지 선택할수있습니다
- 4초로 지정해놓은다음 시작을 누르면 4초가흐른뒤 슬라이드돼며 이미지가 바뀝니다.
아래는 위의 스크립트입니다.
<HTML>
<HEAD>
<TITLE>happycgi</TITLE>
<script language="javascript">
<!--
var sel1=3000;
var slide=true;
var cnt=0;
var currentImage=1;
var timeout=0;
var pic1= new Array();
var pic=new Array();
var p_title=new Array();
pic1[1] = "http://demo.happycgi.com/jini/pick1.jpg";
p_title[1] = "설명 1";
pic1[2] = "http://demo.happycgi.com/jini/pick2.jpg";
p_title[2] = "설명 2";
pic1[3] = "http://demo.happycgi.com/jini/pick3.jpg";
p_title[3] = "설명 3";
pic1[4] = "http://demo.happycgi.com/jini/pick4.jpg";
p_title[4] = "설명 4";
pic1[5] = "http://demo.happycgi.com/jini/pick5.jpg";
p_title[5] = "설명 5";
pic1[6] = "http://demo.happycgi.com/jini/pick7.jpg";
p_title[6] = "설명 6";
pic1[7] = "http://demo.happycgi.com/jini/pick8.jpg";
p_title[7] = "설명 7";
pic[1]=new Image();
pic[1].src=pic1[1];
isNext = false;
function p_speed() {
sel=speedid.selectedIndex;
sel1=speedid.options[sel].value;
}
function go() {
if (!slide) {
nextImage1();
}
}
function loadImage(imgNum) {
if (imgNum >= 0) {
title1.innerHTML=p_title[currentImage];
}
if (slide && !isNext) {
imgsrc.filters.blendTrans.apply();
document.imgsrc.src= pic[imgNum].src;
imgsrc.filters.blendTrans.duration=0.5;
imgsrc.filters.blendTrans.play();
nextImage1();
} else {
document.imgsrc.src= pic[imgNum].src;
isNext = false;
}
}
function nextImage() {
if (currentImage < pic.length-1) {
currentImage++;
} else {
currentImage=1;
}
isNext = true;
loadImage(currentImage);
}
function nextImage1() {
if (currentImage < pic1.length-1) {
currentImage++;
} else {
currentImage = 1;
}
slide = true;
timeout = setTimeout("loadImage(currentImage)",sel1);
}
function preload() {
for (i = 2; i < pic1.length; i++) {
pic[i]=new Image();
pic[i].src=pic1[i];
}
}
function prevImage() {
if (currentImage <= pic1.length-1) {
currentImage--;
if(currentImage < 1) {
currentImage=currentImage+pic1.length;
currentImage--;
}
}
isNext = true;
loadImage(currentImage)
}
function still() {
clearTimeout(timeout);
slide=false;
}
//-->
</script>
<body onload="nextImage1();preload();">
<center>
<img src="http://demo.happycgi.com/jini/pick1.jpg" width="280" height="200" id="bg" name=imgsrc oncontextmenu="return false;" style="filter: blendTrans(duration=1)">
<br>
<input type="button" value="이전" OnClick="prevImage()">
<input name="button" type="button" onClick="nextImage()" value="다음">
<input type="button" value="정지" OnClick="still()">
<input type="button" value="시작" OnClick="go()">
<select name="speedid" Onchange="p_speed()">
<option value=1000> 1 (sec)
<option value=2000> 2 (sec)
<option value=3000 selected> 3 (sec)
<option value=4000> 4 (sec)
<option value=5000> 5 (sec)
</select>
<br>
<!-- 이미지 설명부분을 출력시키는 부분 //-->
<font id="title1">설명 1</font>
|
