간단히 만드는 이미지 롤링 소스입니다.
js 파일
jquery-1.8.3.min.js<style type="text/css">
/* 터치 슬라이드*/
#MainImg{
width:700px;
height:400px;
margin:0 auto;
/*background:url(/image/main_title_img01.jpg) no-repeat center top;*/
}
#main_content { width:100%; margin:0 auto; }
#touchSlider { width:700px; height:400px; margin:0 auto; position:relative; overflow:hidden; }
#touchSlider ul { width:100%; height:400px; position:absolute; top:0; left:0; overflow:hidden; }
#touchSlider ul li { width:700px; height:400px; font-size:14px; color:#fff; }
.Dnone { display:none; }
</style>
<script src="./jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./jquery.touchSlider.js"></script>
<div id='MainImg'>
<div id="touchSlider">
<ul>
<li style='background:red;'><img src="./image/01.jpg" border='0' alt='01'></li>
<li style='background:green;'><img src="./image/02.jpg" border='0' alt='02'></li>
<li style='background:black;'><img src="./image/03.jpg" border='0' alt='03'></li>
</ul>
</div>
<div class="Dnone"><button type="button" id="btn_prev" class="btn_prev"></button><button type="button"id="btn_next" class="btn_next"></button></div>
</div>
<script type="text/javascript">
<!--
var counttime = 5000; //롤링 속도
var timerprocess = null;
$("#touchSlider").touchSlider({
flexible : true,
btn_prev : $("#touchSlider").next().find(".btn_prev"),
btn_next : $("#touchSlider").next().find(".btn_next")
});
function sliderRClick(){ $('#btn_next').click(); }
function sliderLClick(){ $('#btn_prev').click(); }
function sliderRstart(){
sliderstop();
timerprocess = setInterval(sliderRClick,counttime);
}
function sliderLstart(){
sliderstop();
timerprocess = setInterval(sliderLClick,counttime);
}
function sliderstop(){ clearInterval(timerprocess); }
//$('#touchSlider').swipeleft(function(){ sliderRstart(); }); //마우스 우클릭 이동
//$('#touchSlider').swiperight(function(){ sliderLstart(); }); //마우스 좌클릭 이동
$(document).ready(function(){
sliderRstart();
});
//-->
</script>
