<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> eyes of siche </title>
<script type="text/javascript">
<!--
var rollSec1Now = 0;
var rollSecCountNow = 0;
var rollSecPlayNow = 1;
var rollSecPlayType;
var rollSecPlayer;
function rollSecInit(){
var imgList = document.getElementById('rollSec1').getElementsByTagName('li');
for(var i=0;i<imgList.length;i++){
imgList[i].style.left = document.getElementById('rollSec1').offsetWidth*i + rollSec1Now + 'px';
}
}
function rollSecPrev(click){
rollSecPlayNow = (click=='click')? 1 : 0 ;
rollSecPlay('stop');
rollSecCountNow--;
var count = document.getElementById('rollSec1').getElementsByTagName('li').length-1;
if(rollSecCountNow<0){
rollSecCountNow = count;
rollSec1Now = document.getElementById('rollSec1').offsetWidth * count * -1;
} else {
rollSec1Now = rollSec1Now + document.getElementById('rollSec1').offsetWidth;
}
rollSecInit();
if(click=='click') {
rollSecPlay('stop', 'prev');
} else {
rollSecPlay('start', 'prev');
}
}
function rollSecNext(click){
rollSecPlayNow = (click=='click')? 1 : 0 ;
rollSecPlay('stop');
rollSecCountNow++;
var count = document.getElementById('rollSec1').getElementsByTagName('li').length-1;
if(rollSecCountNow>count){
rollSec1Now = 0;
rollSecCountNow = 0;
} else {
rollSec1Now = rollSec1Now - document.getElementById('rollSec1').offsetWidth;
}
rollSecInit();
if(click=='click') {
rollSecPlay('stop', 'next');
} else {
rollSecPlay('start', 'next');
}
}
function rollSecPlay(play, type){
rollSecInit();
rollSecPlayNow = (play=='stopBtn')? 0 : 1 ;
if(type=='next'){
functionType = 'rollSecNext()';
rollSecPlayType = type;
} else {
functionType = 'rollSecPrev()';
rollSecPlayType = type;
}
(play=='start' && rollSecPlayNow==1)? rollSecPlayer = setInterval(functionType,1000) : clearTimeout(rollSecPlayer);
}
//-->
</script>
<style type="text/css">
#rollSec1 { position: relative; overflow: hidden; width: 300px; height: 300px; margin: 0; }
#rollSec1 li { width: 300px; height: 300px; position: absolute; }
#rollSec1 li.n1 { background-color: red; }
#rollSec1 li.n2 { background-color: blue; }
#rollSec1 li.n3 { background-color: yellow; }
#rollSec1 li.n4 { background-color: gray; }
#rollSec1 li.n5 { background-color: green; }
div { text-align: center; border: 1px solid blue; width: 400px; padding: 50px 0; }
a { margin-top: 20px; padding: 5px; border: 1px solid red; display: inline-block; }
</style>
</head>
<body>
<div onmouseover="rollSecPlay('stop',rollSecPlayType);" onmouseout="rollSecPlay('start',rollSecPlayType);">
<ul id="rollSec1">
<li class="n1">1</li>
<li class="n2">2</li>
<li class="n3">3</li>
<li class="n4">4</li>
<li class="n5">5</li>
</ul>
<a href="javascript:;" onclick="rollSecPrev('click'); return false;">이전</a>
<a href="javascript:;" onclick="rollSecNext('click'); return false;">다음</a>
</div>
<script type="text/javascript">
<!--
rollSecPlay('start','next');
//-->
</script>
</body>
</html>
보통 롤링은 한방향으로 순차적으로 롤링이 된다 허나 이놈은 처음에 오른쪽으로 순차적으로 돌다가 마지막으로 이전을 눌렀으면 반대로 즉, 왼쪽으로 롤링이 되고 다음을 누르면 다시 처음과 같이 순차적으로 즉, 오른쪽으로 롤링이 된다.. -_-;;
그렇게 해달라고 해서 만들어서 쓰긴 했으나.... 왜 이런게 필요 한거야...?? -_-;;
난림으로 한달전쯤에 만들어 써서 기억도 잘 안나고.. 대충 정리만 해서 올린다.
스크립트 초초초초보를 위해 스크립트 중 rollSecPlay 함수 안쪽 제일 하단에 setInterval(functionType,1000) 요놈. 요놈 안에 1000 이놈은 1초를 의미 한다. 롤링 속도는 이놈을 맛깔나게 조절 필요.
Posted by siche
