배너 슬라이드 좀 봐주세요!
본문
<style>
.mini_b{width:160px; height: 65px;
background-color: darkorchid;
border:1px solid black;
position: relative;
z-index: 9998;}
.m_img {position:absolute;
top:100px; left:900px;
width:160px; height: 390px;
z-index: 9998;
background-color: darkgoldenrod;
}
.m_img li{width:160px; height: 65px; position: absolute;}
.mini_b img{ position: absolute;}
.mini_b m_g1{display: block;}
.mini_nav { cursor: pointer;
position: absolute;right:100px;}
#mini_prev{top:90px;}
#mini_next{top:120px;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function () {
$("#mini_prev").bind("click", function () {
$("#m_img").animate({
top: "-=65"
}, {
complete: function () {
$(this).find("li").first().appendTo($(this));
$(this).css({top: 0});
}
});
});
$("#mini_next").bind("click", function () {
$("#m_img").animate({
top: "-=65"
}, {
duration: 0,
complete: function () {
$(this).find("li").last().prependTo($(this));
}
}).animate({
top: "+=65"
});
});
});
</script>
<body>
<div class="mini_nav" id="mini_prev">
<a href="#"><img src="image/main/m_b1.jpg"></a>
</div>
<div class="mini_b" id="mini_b"> <!--mini_b-->
<ul class="m_img" id="m_img">
<li class="m_g1">
<a href="#">
<img src="image/main/gtg.jpg">
</a>
</li>
<li class="m_g2">
<a href="#">
<img src="image/main/gtg2.jpg">
</a>
</li>
<li class="m_g3">
<a href="#">
<img src="image/main/gtg.jpg">
</a>
</li>
<li class="m_g4">
<a href="#">
<img src="image/main/gtg2.jpg">
</a>
</li>
<li class="m_g5">
<a href="#">
<img src="image/main/gtg.jpg">
</a>
</li>
<li class="m_g6">
<a href="#">
<img src="image/main/gtg2.jpg">
</a>
</li>
<li class="m_g7">
<a href="#">
<img src="image/main/gtg.jpg">
</a>
</li>
</ul>
</div> <!--mini_b-->
<div class="mini_nav" id="mini_next">
<a href="#"><img src="image/main/m_b2.jpg"></a>
</div>
</body>
뭐가 잘 못 된건지 좀 알려주세요 ㅠㅠㅠㅠㅠ 이미지가 하나만 남고 다 숨어야하는데 overflow:hidden ,
display:block 쓰면 다 숨어버리고, 슬라이드 박스도 이미지랑 같이 슬라이드되서 움직이네요 ㅠㅠㅠ
버튼은 잘 먹혀요! 부탁드려요 ㅠㅠㅠ
