728x90
제이쿼리를 이용한 간단한 슬라이드 배너를 소개해 드리겠습니다.
슬라이더를 검색하다가 간단한 슬라이더가 있어서 가져왔어요~
버튼을 누르면 화면이 이동하고 마우스를 올려놓지 않으면 자동으로 롤링됩니다.
그럼 소스 나갑니다.
<script type="text/javascript">
$(function() {
$('#main_bn').ulslide({
statusbar: true,
width: 450,
height: 338,
affect: 'slide',
axis: 'x',
navigator: '#main_bn_btn a',
duration: 400,
autoslide: 3000
});
});
</script>
<style type="text/css">
#wrap{position:relative; width:100%;}
a, a:hover, a:visited { text-decoration:none; }
ul li { list-style : none; }
#main_bn {
margin:0 auto;
width:450px;
height:338px;
}
#main_bn img {
width:100%;
height:auto;
}
#main_bn_btn {
list-style-type:none;
position:absolute;
bottom:5px; left:5px;
}
#main_bn_btn span {
float: left;
display:inline-block;
width:20px;
height:20px;
margin-right:5px;
}
</style>
<body>
<div id="wrap">
<ul id="main_bn">
<li>
<img src="./img/image_1.jpg" alt="" />
</li>
<li>
<img src="./img/image_2.jpg" alt="" />
</li>
<li>
<img src="./img/image_3.jpg" alt="" />
</li>
<div id="main_bn_btn">
<span><a href="#"><img src="./img/blt.png"></a></span>
<span><a href="#"><img src="./img/blt.png"></a></span>
<span><a href="#"><img src="./img/blt.png"></a></span>
</div>
</ul>
</div>
</body>
아래는 결과물 화면 캡쳐한 모습이에요.
반응형
'공부 > jQuery' 카테고리의 다른 글
| 제이쿼리 반응형 슬라이드 (swiper) (0) | 2023.01.08 |
|---|---|
| 제이쿼리 슬라이드 (bxSlider) (0) | 2023.01.08 |
| 제이쿼리 달력 달기 (datepicker) (0) | 2021.09.26 |
| 제이쿼리 레이어 팝업 (bpopup) (0) | 2021.09.26 |
| jQuery 자식요소 내 요소 선택 (0) | 2015.12.07 |
