WEB/JQuery
배너 좌우 이동 jQuery
silverline79
2025. 1. 10. 19:19
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!--[if lt IE 9]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!--<![endif]-->
<script>
$(document).ready(function () {
//메인상단배너
$(".btn_top_ba_next").click(function () {
if (!$("#top_ba li").last().is(":visible")) {
$("#top_ba li:visible").hide().next("li").fadeIn("80");
$(".btn_top_ba_prev").removeClass("off");
}
if ($("#top_ba li").last().is(":visible")) {
$(this).addClass("off");
}
return false;
});
$(".btn_top_ba_prev").click(function () {
if (!$("#top_ba li").first().is(":visible")) {
$("#top_ba li:visible").hide().prev("li").fadeIn("80");
$(".btn_top_ba_next").removeClass("off");
}
if ($("#top_ba li").first().is(":visible")) {
$(this).addClass("off");
}
return false;
});
});
</script>
<style>
/*상단배너*/
.top_ba_box { float: left; width: 224px; height: 114px; margin: 23px 0 23px 0; position: relative; }
#top_ba { float: left; width: 224px; height: 114px; }
#top_ba li { display: none; }
#top_ba li:first-child { display: block; }
#top_ba li img { width: 224px; height: 114px; }
#btn_top_ba { position: absolute; right: 0; bottom: 0; width: 36px; height: 15px; }
#btn_top_ba .btn_top_ba_prev { float: left; width: 18px; height: 15px; background-image: url(img/btn_top_ba_prev.gif); background-repeat: no-repeat; background-position: left top; text-indent: -9999px; display: inline-block; }
#btn_top_ba .btn_top_ba_next { float: left; width: 18px; height: 15px; background-image: url(img/btn_top_ba_next.gif); background-repeat: no-repeat; background-position: left top; text-indent: -9999px; display: inline-block; }
</style>
</head>
<body>
<div class="top_ba_box">
<ul id="top_ba">
<li><a href="#"><img src="img/top_ba01.jpg" alt="메인배너"></a></li>
<li><a href="#"><img src="img/top_ba02.jpg" alt="메인배너"></a></li>
<li><a href="#"><img src="img/top_ba03.jpg" alt="메인배너"></a></li>
<li><a href="#"><img src="img/top_ba04.jpg" alt="메인배너"></a></li>
</ul>
<div id="btn_top_ba"> <a class="btn_top_ba_prev" href="#">Prev</a> <a class="btn_top_ba_next" href="#">Next</a></div>
</div>
</body>
</html>