이미지 슬라이드 질문
본문
function autoBanner1(){
$(".m_img ").stop().animate({"top":-75},1000, function(){ // 큰 이미지의 크기(214) + 좌우 여백(10)
$(".m_img ").append($(".m_img img:first-child"));
$(".m_img ").css({"top":0})
});
}
function autoBanner2(){
$(".m_img ").stop().animate({"top":75},1000, function(){
$(".m_img ").prepend($(".m_img img:last-child"));
$(".m_img ").css({"top":0})
});
}
var timer = setInterval("autoBanner1()",3000)
$(".mini_b").hover(
function(){
clearInterval(timer)
},
function(){
timer = setInterval("autoBanner1()",3000) // 다시 른쪽 사진이 보이게 하는 셋인터벌 실행
}
);
/////////////////////////////
.mini_b{width:200px; height:75px;position: relative;}
.mini_b .m_img {width:200px; height: 375px;
position: absolute;
top:0; left:0;}
.mini_b .m_img li{width:200px; height: 75px; }
.mini_b img{position:absolute;}
.mini_b .m_g1{display: block;}
.mini_nav { cursor: pointer;
position: absolute;
float:right;
right:412px;}
#mini_prev{top:129px;}
#mini_next{top:71px;}
/////////////////////////////////////////
<div class="mini_nav" id="mini_prev">
<a href="#"><img src="image/main/m_b2.jpg" style="border:1px solid #eee;"></a>
</div>
<div class="mini_b" style="width:200px; height: 75px; position:relative; z-index: 9990; top:70px; left:138px; overflow: hidden;"> <!--mini_b-->
<ul class="m_img" id="m_img">
<li class="m_g1">
<a href="#"></a>
</li>
<li class="m_g2">
<a href="#"></a>
</li>
<li class="m_g3">
<a href="#"></a>
</li>
<li class="m_g4">
<a href="#"></a>
</li>
<li class="m_g5">
<a href="#"></a>
</li>
</ul>
</div> <!--mini_b-->
<div class="mini_nav" id="mini_next">
<a href="#"><img src="image/main/m_b1.jpg" style="border:1px solid #eee;"></a>
</div>
이미지 슬라이드가 총 7장이 롤링이 되어야하는데
1번사진과 2번사진만 번갈아가며 나옵니다 ㅠㅠㅠ
뭐가 잘 못 된건지 혹시 알려주실 수 있나요 ㅠㅠㅠ 부탁드립니다 ㅠㅠ