<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
/*
rolling page by hong..
*/
var leftCt = 0;
$(function(){
$("#album").attr("top", "0");
imgStart("R");
});
function imgStart(tp){
clearInterval($("#imgList").attr("timer"));
if(tp == "R"){ // 오른쪽 이동
imgRight();
$("#imgList").attr("timer", setInterval("imgRight()", 3000)); // 멈춰있는 시간
}else{ // 왼쪽이동
if(leftCt == 0){
var leng = $("#imgList div").size();
$("#imgList").css("left",parseInt($("#imgList div").eq(0).width()*-1));
$("#imgList>div").eq(parseInt(leng-1)).clone().prependTo($("#imgList"));
$("#imgList>div").eq(leng).remove();
leftCt = 1;
}
imgLeft();
$("#imgList").attr("timer", setInterval("imgLeft()", 3000));
}
}
function imgRight(){
$("#imgList").animate({
left : parseInt($("#imgList div").eq(0).width() * -1)
},300,function(){
$("#imgList").css("left", "0px");
$("#imgList>div").eq(0).clone().appendTo($("#imgList"));
$("#imgList>div").eq(0).remove();
});
}
function imgLeft(){
var leng = $("#imgList div").size();
$("#imgList").animate({
left : 0
},300,function(){
$("#imgList").css("left", "0px");
$("#imgList").css("left",parseInt($("#imgList div").eq(0).width()*-1));
$("#imgList>div").eq(parseInt(leng-1)).clone().prependTo($("#imgList"));
$("#imgList>div").eq(leng).remove();
});
}
</script>
<style>
/*
이미지 사이즈 맞춰서 수정해주세요... (#viewArea)
*/
#viewArea {position:relative; width:108px; height:78px;overflow:hidden;}
#imgList {position:absolute; width:2000px; left:0px; top:0px;}
#imgList div {float:left; margin:0px; padding:0px;}
</style>
<div id="viewArea">
<div id="imgList">
<div><img src='http://icon.daum-img.net/top/cms/news/2010/03/nano15306019099820072.jpeg'></div>
<div><img src='http://icon.daum-img.net/top/cms/news/2010/03/nano15302571111964072.jpg'></div>
<div><img src='http://icon.daum-img.net/top/cms/news/2010/03/nano15304347571481072.jpeg'></div>
</div>
</div>
<div>
<span onClick="imgStart('L')"><</span>  <span onClick="imgStart('R')">></span>
</div>
<script>
/*
rolling page by hong..
*/
var leftCt = 0;
$(function(){
$("#album").attr("top", "0");
imgStart("R");
});
function imgStart(tp){
clearInterval($("#imgList").attr("timer"));
if(tp == "R"){ // 오른쪽 이동
imgRight();
$("#imgList").attr("timer", setInterval("imgRight()", 3000)); // 멈춰있는 시간
}else{ // 왼쪽이동
if(leftCt == 0){
var leng = $("#imgList div").size();
$("#imgList").css("left",parseInt($("#imgList div").eq(0).width()*-1));
$("#imgList>div").eq(parseInt(leng-1)).clone().prependTo($("#imgList"));
$("#imgList>div").eq(leng).remove();
leftCt = 1;
}
imgLeft();
$("#imgList").attr("timer", setInterval("imgLeft()", 3000));
}
}
function imgRight(){
$("#imgList").animate({
left : parseInt($("#imgList div").eq(0).width() * -1)
},300,function(){
$("#imgList").css("left", "0px");
$("#imgList>div").eq(0).clone().appendTo($("#imgList"));
$("#imgList>div").eq(0).remove();
});
}
function imgLeft(){
var leng = $("#imgList div").size();
$("#imgList").animate({
left : 0
},300,function(){
$("#imgList").css("left", "0px");
$("#imgList").css("left",parseInt($("#imgList div").eq(0).width()*-1));
$("#imgList>div").eq(parseInt(leng-1)).clone().prependTo($("#imgList"));
$("#imgList>div").eq(leng).remove();
});
}
</script>
<style>
/*
이미지 사이즈 맞춰서 수정해주세요... (#viewArea)
*/
#viewArea {position:relative; width:108px; height:78px;overflow:hidden;}
#imgList {position:absolute; width:2000px; left:0px; top:0px;}
#imgList div {float:left; margin:0px; padding:0px;}
</style>
<div id="viewArea">
<div id="imgList">
<div><img src='http://icon.daum-img.net/top/cms/news/2010/03/nano15306019099820072.jpeg'></div>
<div><img src='http://icon.daum-img.net/top/cms/news/2010/03/nano15302571111964072.jpg'></div>
<div><img src='http://icon.daum-img.net/top/cms/news/2010/03/nano15304347571481072.jpeg'></div>
</div>
</div>
<div>
<span onClick="imgStart('L')"><</span>  <span onClick="imgStart('R')">></span>
</div>
'web standard > jquery' 카테고리의 다른 글
| 가로&세로 슬라이드 (0) | 2011.04.04 |
|---|---|
| jquery 예제모음 (0) | 2011.03.22 |
| 베너 슬라이드&버튼이동 (0) | 2011.02.22 |
| [jquery]네임태그이동 (0) | 2011.02.22 |
| jquery를 이용한 온오프 (0) | 2010.11.23 |
