jQuery Plug-in move_banner
2021. 12. 20. 11:15ㆍStudy/Example & Plug-in
jQuery Plug-in move_banner
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/* temp CSS - str */
*{margin:0;padding:0;}
img{border:0;}
li{list-style:none;}
h1{width:100%;margin:30px 0 50px 0;}
#motionj_slide_01{ border:3px solid #CCC;}
/* temp CSS - end */
</style>
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.motionj.sbanner.js"></script>
<script>
$(document).ready(function(){
$('#motionj_slide_01').motionj_slide_banner({
width : 350, // 배너 이미지 너비
height : 150, // 배너 이미지 높이
speed : 500, // 슬라이딩 속도
delay : 3000, // 딜레이 시간
image : './images/', // 이미지 경로
pause : false // true is stop banner, false is auto moving banner
});
});
</script>
</head>
<body>
<div id="motionj_slide_01">
<ul>
<li><a href="#"><img src="images/a1.jpg" alt=''></a></li>
<li><a href="#"><img src="images/a2.jpg" alt=''></a></li>
<li><a href="#"><img src="images/a3.jpg" alt=''></a></li>
<li><a href="#"><img src="images/a4.jpg" alt=''></a></li>
<li><a href="#"><img src="images/a5.jpg" alt=''></a></li>
</ul>
</div>
</body>
</html>
'Study > Example & Plug-in' 카테고리의 다른 글
| jQuery Plug-in accordion (0) | 2021.12.20 |
|---|---|
| jQurey Plug-in fadeBanner (0) | 2021.12.20 |
| jQuery plug-in s3slider (0) | 2021.12.20 |
| jQuery Plug-in innerFade (0) | 2021.12.20 |
| jQuery Plug-in FancyBox (0) | 2021.12.20 |
