jQurey Plug-in fadeBanner
2021. 12. 20. 11:20ㆍStudy/Example & Plug-in
jQurey Plug-in fadeBanner
<!DOCTYPE html>
<html lang="ko">
<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>
*{margin:0;padding:0;}
img{border:0;}
li{list-style:none;}
</style>
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.motionj.fadeBanner.js"></script>
<script>
$(document).ready(function(){
$('#motionj_fade_01').motionj_fadeBanner({
width : 250, //이미지의 너비
height: 300, // 이미지의 높이
speed : 500, // fade 속도 조절.
delay : 2000 // 모션이 되는 중간 딜레이
});
});
</script>
</head>
<body>
<div id="motionj_fade_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>
<p>
<span><img src="images/1_off.gif" alt="" /></span>
<span><img src="images/2_off.gif" alt="" /></span>
<span><img src="images/3_off.gif" alt="" /></span>
<span><img src="images/4_off.gif" alt="" /></span>
<span><img src="images/5_off.gif" alt="" /></span>
</p>
</div>
</body>
</html>
'Study > Example & Plug-in' 카테고리의 다른 글
| jQuery Plug-in slide_left (0) | 2021.12.20 |
|---|---|
| jQuery Plug-in accordion (0) | 2021.12.20 |
| jQuery Plug-in move_banner (0) | 2021.12.20 |
| jQuery plug-in s3slider (0) | 2021.12.20 |
| jQuery Plug-in innerFade (0) | 2021.12.20 |
