jquery touchmove이벤트 질문입니다.
스마트폰에서 화면 터치시 이미지를 슬라이드하려고 합니다.
움직이는 것까지는 됐는데 슬라이드가 한번이 되야하는데 2번이상으로 되서 컨트롤이 안되네요...
<!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" lang="ko" xml:lang="ko">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi /">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
#slideshow {
margin:0 auto;
width:100%;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:144px;
overflow:auto;
position:relative;
}
</style>
<script type="text/javascript">var nsc = "Mtop.all";</script>
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 144;
var slides = $('.slide');
var numberOfSlides = slides.length;
$('#slidesContainer').css('overflow', 'hidden');
slides
.wrapAll('<div id="slideInner"></div>')
.css({
'float' : 'left',
'width' : slideWidth
});
$('#slideInner').css('width', slideWidth * numberOfSlides);
var b = document.getElementById('box'),
xbox = b.offsetWidth / 2,
bstyle = b.style;
var slideWidth = b.offsetWidth;
b.addEventListener('touchmove', function(event) {
event.preventDefault();
if(event.targetTouches[0].pageX>xbox){
currentPosition = currentPosition + 1;
if(currentPosition>=0){
$('#slideInner').animate({
'marginLeft' : -144*currentPosition
});
}
}else{
currentPosition = currentPosition - 1;
if(currentPosition>=0){
$('#slideInner').animate({
'marginLeft' : -144*currentPosition
});
}
}
}, false);
});
</script>
<body style="margin:0; width:100%;" id="box">
<div id="slideshow">
<div id="slidesContainer">
<div class="slide"><img src="./img/portpolio/e_01.png"></div>
<div class="slide"><img src="./img/portpolio/e_02.png"></div>
<div class="slide"><img src="./img/portpolio/e_03.png"></div>
<div class="slide"><img src="./img/portpolio/e_04.png"></div>
<div class="slide"><img src="./img/portpolio/e_05.png"></div>
<div class="slide"><img src="./img/portpolio/e_06.png"></div>
<div class="slide"><img src="./img/portpolio/e_07.png"></div>
<div class="slide"><img src="./img/portpolio/e_08.png"></div>
<div class="slide"><img src="./img/portpolio/e_09.png"></div>
<div class="slide"><img src="./img/portpolio/e_10.png"></div>
<div class="slide"><img src="./img/portpolio/e_11.png"></div>
<div class="slide"><img src="./img/portpolio/e_12.png"></div>
<div class="slide"><img src="./img/portpolio/e_13.png"></div>
<div class="slide"><img src="./img/portpolio/e_14.png"></div>
<div class="slide"><img src="./img/portpolio/e_15.png"></div>
<div class="slide"><img src="./img/portpolio/e_16.png"></div>
<div class="slide"><img src="./img/portpolio/e_17.png"></div>
</div>
</div>
</body>
어느부분을 수정해야 슬라이딩이 한번씩 되나요?
움직이는 것까지는 됐는데 슬라이드가 한번이 되야하는데 2번이상으로 되서 컨트롤이 안되네요...
<!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" lang="ko" xml:lang="ko">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi /">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
#slideshow {
margin:0 auto;
width:100%;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:144px;
overflow:auto;
position:relative;
}
</style>
<script type="text/javascript">var nsc = "Mtop.all";</script>
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 144;
var slides = $('.slide');
var numberOfSlides = slides.length;
$('#slidesContainer').css('overflow', 'hidden');
slides
.wrapAll('<div id="slideInner"></div>')
.css({
'float' : 'left',
'width' : slideWidth
});
$('#slideInner').css('width', slideWidth * numberOfSlides);
var b = document.getElementById('box'),
xbox = b.offsetWidth / 2,
bstyle = b.style;
var slideWidth = b.offsetWidth;
b.addEventListener('touchmove', function(event) {
event.preventDefault();
if(event.targetTouches[0].pageX>xbox){
currentPosition = currentPosition + 1;
if(currentPosition>=0){
$('#slideInner').animate({
'marginLeft' : -144*currentPosition
});
}
}else{
currentPosition = currentPosition - 1;
if(currentPosition>=0){
$('#slideInner').animate({
'marginLeft' : -144*currentPosition
});
}
}
}, false);
});
</script>
<body style="margin:0; width:100%;" id="box">
<div id="slideshow">
<div id="slidesContainer">
<div class="slide"><img src="./img/portpolio/e_01.png"></div>
<div class="slide"><img src="./img/portpolio/e_02.png"></div>
<div class="slide"><img src="./img/portpolio/e_03.png"></div>
<div class="slide"><img src="./img/portpolio/e_04.png"></div>
<div class="slide"><img src="./img/portpolio/e_05.png"></div>
<div class="slide"><img src="./img/portpolio/e_06.png"></div>
<div class="slide"><img src="./img/portpolio/e_07.png"></div>
<div class="slide"><img src="./img/portpolio/e_08.png"></div>
<div class="slide"><img src="./img/portpolio/e_09.png"></div>
<div class="slide"><img src="./img/portpolio/e_10.png"></div>
<div class="slide"><img src="./img/portpolio/e_11.png"></div>
<div class="slide"><img src="./img/portpolio/e_12.png"></div>
<div class="slide"><img src="./img/portpolio/e_13.png"></div>
<div class="slide"><img src="./img/portpolio/e_14.png"></div>
<div class="slide"><img src="./img/portpolio/e_15.png"></div>
<div class="slide"><img src="./img/portpolio/e_16.png"></div>
<div class="slide"><img src="./img/portpolio/e_17.png"></div>
</div>
</div>
</body>
어느부분을 수정해야 슬라이딩이 한번씩 되나요?
|
댓글을 작성하시려면 로그인이 필요합니다.