웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)
js y-banner_rolling 본문
<html>
<head>
<script>
//배열에 이미지 주소 넣기
var img_arr=new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg");
var tmp=0; //현재 출력되는 이미지
var tot=img_arr.length-1; // 전체 배열의 갯수
var timer //setInterval을 담을 변수
var direction=1; //방향 1이면 정방향 -1이면 역방향
function roll(val){
if(!val){
val=direction;
}else{
direction=val;
}
tmp=tmp+val;
//tmp 가 0보다 작으면 tmp 에는 마지막 배열
//tmp 가 마지막 배열 숫자보다 크면 0
if(tmp<0){
tmp=tot;
}else if(tmp>tot){
tmp=0;
}
//target에 img_arr에 tmp 값 넣기
document.getElementById("target").src="img/"+img_arr[tmp];
}
//timer멈춤
function stopRoll(){
window.clearInterval(timer);
}
//페이지 접속시 배열0의 이미지를 target에 넣는다
//페이지 접속시 startRoll()을 실행
window.onload=function(){
document.getElementById("target").src="img/"+img_arr[0];
startRoll();
}
//3초 마다 한번씩 roll()함수 실행
function startRoll(){
timer=window.setInterval("roll()",3000);
}
</script>
</head>
<body>
<div id="wrap">
<div id="contents" >
<img src="img/arrow_1.jpg" style="cursor:pointer" onclick="roll(-1)">
<img id="target" onmouseover="stopRoll()" onmouseout="startRoll()" style="cursor:pointer">
<img src="img/arrow_2.jpg" style="cursor:pointer" onclick="roll(1)">
</div>
</div>
</body>
</html>
확인:http://azit4u.phps.kr/script/roll.php
'javascript' 카테고리의 다른 글
| 팝업띄우기 (0) | 2011.11.30 |
|---|---|
| js 펼침 메뉴 만들기 (0) | 2011.11.09 |
| js 글자수 체크 하기 (0) | 2011.11.09 |