티스토리 뷰

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>

 

배너좌우.zip
0.03MB

'WEB > JQuery' 카테고리의 다른 글

모바일 메뉴 더보기 클릭 JQuery  (0) 2025.01.10
jQuery 클릭히든뷰2  (0) 2025.01.10
jQuery 클릭히든뷰  (0) 2025.01.10
flexslider 이미지슬라이드 JQuery  (0) 2025.01.10
[이미지슬라이드] swiperjs 스크립트 정리  (0) 2024.10.31
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/03   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
글 보관함