<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<script type="text/javascript">
<!--
Function.prototype.bind = function() {	var _$=this,args =[],object=null;	for(var i=0,len=arguments.length;i<len;i++) args[i]=arguments[i];object = args.shift();return  function(){return _$.apply(object, args);}}
Function.prototype.bindForEvent=function(obj) {var _$=this;return function(e){var body=document.body||document.documentElement;var hEvent=(e||window.event);hEvent['element']=hEvent.target||hEvent.srcElement;hEvent['cX']=hEvent.pageX||(hEvent.clientX+(body.scrollLeft-body.clientLeft));hEvent['cY']=hEvent.pageY||hEvent.clientY+body.scrollTop-body.clientTop;return _$.call(obj, hEvent);}}

//-->
</script>
<script language="javascript" type="text/javascript" src="xwz.vroll.js" charset="UTF-8"></script>
<style>
OL, LI{margin:0px}
OL{border:red 1px dotted}
LI{list-style-type: none;margin:0px;float: left;width:100px;height:100px;padding-top:6px;list-style-type:none;text-align:center}
</style>


		<div id='new_arrival' style='height:124px;width:210px;position:relative;text-overflow:ellipsis;border:green 1px solid'>

<ol>

				<li>
					<div><img src='images/21.jpg' border='0'></div>
					<div style='font-size:8pt;font-family:Tahoma'><b>테스트1</b></div>
				</li>

				<li>
					<div><img src='images/21.jpg' border='0'></div>
					<div style='font-size:8pt;font-family:Tahoma'><b>테스트1</b></div>
				</li>
</ol>
<ol>

				<li>
					<div><img src='images/22.jpg' border='0'></div>
					<div style='font-size:8pt;font-family:Tahoma'><b>테스트2</b></div>
				</li>

				<li>
					<div><img src='images/22.jpg' border='0'></div>
					<div style='font-size:8pt;font-family:Tahoma'><b>테스트2</b></div>
				</li>
</ol>
<ol>

				<li>
					<div><img src='images/23.jpg' border='0'></div>
					<div style='font-size:8pt;font-family:Tahoma'><b>테스트3</b></div>
				</li>

				<li>
					<div><img src='images/23.jpg' border='0'></div>
					<div style='font-size:8pt;font-family:Tahoma'><b>테스트3</b></div>
				</li>
</ol>
<ol>

				<li>
					<div><img src='images/21.jpg' border='0'></div>
					<div style='font-size:8pt;font-family:Tahoma'><b>테스트4</b></div>
				</li>

				<li>
					<div><img src='images/21.jpg' border='0'></div>
					<div style='font-size:8pt;font-family:Tahoma'><b>테스트4</b></div>
				</li>
</ol>
<ol>

				<li>
					<div><img src='images/22.jpg' border='0'></div>
					<div style='font-size:8pt;font-family:Tahoma'><b>테스트5</b></div>
				</li>

				<li>
					<div><img src='images/22.jpg' border='0'></div>
					<div style='font-size:8pt;font-family:Tahoma'><b>테스트5</b></div>
				</li>
</ol>
<ol>
				<li>
					<div><img src='images/23.jpg' border='0'></div>
					<div style='font-size:8pt;font-family:Tahoma'><b>테스트6</b></div>
				</li>

				<li>
					<div><img src='images/23.jpg' border='0'></div>
					<div style='font-size:8pt;font-family:Tahoma'><b>테스트6</b></div>
				</li>
</ol>
		</div>

<script type="text/javascript">
<!--
var xroll1=new xwzVRoll('new_arrival', 'ol', 120);
xroll1.setDirection('dn');
xroll1.setDelaytime(1);
xroll1.on();
function changeDir(obj){
	if(obj.value=='UP'){
		xroll1.setDirection('up');
		obj.value='DN';
	}else if(obj.value=='DN'){
		xroll1.setDirection('dn');
		obj.value='UPDOWN';
	}else{
		xroll1.setDirection('updn');
		obj.value='UP';
	}
}
function changeTime(val){
	xroll1.setDelaytime(val)
}
function changePeriod(val){
		xroll1.setPeriod(val)
}
//-->
</script>
<div style="margin:10px">
<input type="button" onclick="changeDir(this)" value="UP" style="border:#CACACA 1px solid">
<select onchange="changeTime(this.value)">
<option value="1">1초 정지</option>
<option value="2">2초 정지</option>
<option value="3" selected>3초 정지</option>
<option value="4">4초 정지</option>
<option value="5">5초 정지</option>
<option value="6">6초 정지</option>
<option value="7">7초 정지</option>
</select>
<select onchange="changePeriod(this.value)">
<option value="15">빠르게</option>
<option value="30" selected>보통</option>
<option value="60">느리게</option>
</select>
</div>