세로로 흐르는 슬라이드로 변경
본문
<style type="text/css">
.RollDiv{margin:0 auto; width:260px; height:100%;border:1px solid red;overflow:hidden;}
.RollDiv > ul{overflow:hidden;height:100%;width:260px list-style:none; margin:0; padding:0; }
.RollDiv > ul > li{ float:left; display:block;}
.RollDiv > ul > li > img{ width:260px; height:auto;margin-bottom:20px;}
</style>
<div class="slide_wrap">
<div class="RollDiv">
<ul>
<li href=""><img src="http://placehold.it/260x80" /></li>
<li href=""><img src="http://placehold.it/260x120" /></li>
<li href=""><img src="http://placehold.it/260x60" /></li>
<li href=""><img src="http://placehold.it/260x70" /></li>
<li href=""><img src="http://placehold.it/260x60" /></li>
<li href=""><img src="http://placehold.it/260x60" /></li>
<li href=""><img src="http://placehold.it/260x60" /></li>
</ul>
</div>
</div>
<script>
// moveType (0:left / 1:right)
var moveType = 1;
// 이동시간간격 3초
var moveSpeed = 3000;
// 움직이는 작업중 다시 명령 받지 않음
var moveWork = false;
// 일시정지 flag
var movePause = false;
function imgMove(){
if(moveWork==false){
// 0d\일경우 left방향
if(moveType==0){
// 맨처음 이미지의 폭
var aWidth = $(".RollDiv > ul > li:first").width();
// 롤링마지막에 맨처음의 a태그 추가
$(".RollDiv > ul").append("<li href=\""+$(".RollDiv > ul > li:first").attr("href")+"\">" + $(".RollDiv > ul > li:first").html()+ "</li>");
// 맨처음이미지를 왼쪽으로 이동시킨다.
$(".RollDiv > ul > li:first").animate({marginLeft:-aWidth},{duration:moveSpeed,step:function(){
// 이동중 만약 일시정지 flag가 true라면
if(movePause==true){
// 이동을 멈춘다
$(this).stop();
}
},complete:function(){
// 이동을 마친후 첫번째 a태그를 지워버린다
$(this).remove();
// 이미지 움직이는것을 다시 실행
imgMove();
}});
}else{
// 마지막 a태그의 폭
var aWidth = $(".RollDiv > ul > li:last").width();
// a태그 앞에 마지막의 a태그를 생성한다 단 스타일은 마지막 a태그의 폭만큼 빼준다
$("<li href=\"" + $(".RollDiv > ul > li:last").attr("href")+ "\" style=\"margin-left:-" + aWidth + "px\">" + $(".RollDiv > ul > li:last").html()+ "</li>").insertBefore(".RollDiv > ul > li:first")
// 맨처음 a태그의 margin-left를 다시 0으로 맞춰준다.
$(".RollDiv > ul > li:first").animate({marginLeft:0},{duration:moveSpeed,step:function(){
// 이동중 만약 일시정지 flag가 true라면
if(movePause==true){
// 이동을 멈춘다
$(this).stop();
}
},complete:function(){
// 이동을 마친후 마지막 a태그를 지워버린다
$(".RollDiv > ul > li:last").remove();
// 이미지 움직이는것을 다시 실행
imgMove();
}});
}
}
}
function goMove(){
// 일시정지가 풀려있을 경우를 대비하여 일시정지를 풀러준다
movePause=false;
// 0d\일경우 left방향
if(moveType==0){
imgMove();
}else{
$(".RollDiv > ul > li:first").animate({marginLeft:0},{duration:moveSpeed,step:function(){
// 이동중 만약 일시정지 flag가 true라면
if(movePause==true){
// 이동을 멈춘다
$(this).stop();
}
},complete:function(){
// 이동을 마친후 마지막 a태그를 지워버린다
//$(".RollDiv > div > a:last").remove();
// 이미지 움직이는것을 다시 실행
imgMove();
}});
}
}
imgMove();
$('.slide_wrap').mouseover(function(){
movePause=true;
});
$('.slide_wrap').mouseleave(function(){
goMove();
});
</script>
세로로 흐르는 슬라이드를 찾다가 못찾아서ㅜ
가로로 흐르는 슬라이드를 찾아서 적용했는데요ㅜ
저걸 세로로 흐르게 하려면 어떻게 수정해야 하는지 알수 있을까요?
스크립트 초보라ㅜ 도와주세요
!-->
답변을 작성하시기 전에 로그인 해주세요.