jQuery Moodular - 이미지 회전,슬라이더, 터치 ,모자이크
Open API/Jquery2016. 11. 10. 09:27
반응형
site : http://www.gougouzian.fr/
Front & Back -end Developer
Plugin & method Url : http://www.gougouzian.fr/projects/jquery/moodular/
Test Url : http://www.uhoon.co.kr/test/885.html
license : MIT License / GPL - GNU General Public License
이미지 슬라이드 , 회전 , 터치도 지원한다고 합니다.
대형 배너나 이미지슬라이드등에 용이할것같습니다.
easing을 이용해서 다양한 effect를 지원하는 등..옵션이 상당히 많습니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>moodular </title>
</head>
<style type="text/css">
/* moodular */
#moodular { overflow: hidden }
#moodular, #moodular li { margin: 0; padding: 0; list-style: none; width: 900px; }
/* examples */
#moodular, #moodular li { height: 400px; }
#moodular li p { display: block; height: 400px; }
#moodular li p span { display: inline-block; padding: 10px 10px; color: #FFF; margin: 10px; }
#nav_wrapper { margin: 0; padding: 0; list-style: none; width: 80px; height: 20px; overflow: hidden }
#nav_wrapper li { text-align: center; }
#nav_wrapper li.active { color: #FFF; }
</style>
<body>
<ul id="moodular">
<li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo01.jpg);"><span>가나다라</span></p></li>
<li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo02.jpg);"><span>마바사아</span></p></li>
<li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo03.jpg);"><span>자차카</span></p></li>
<li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo04.jpg);"><span>타파하</span></p></li>
<li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo05.jpg);"><span>www.goodkiss.co.kr</span></p></li>
<li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo06.jpg);"><span>www.uhoon.co.kr</span></p></li>
</ul>
<!-- script -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="885/jquery.easing.1.3.js"></script>
<script src="885/moodular.js"></script>
<script>
jQuery(document).ready(function () {
var couleurs = ["rgba(219,56,92, 0.6)" ,
"rgba(104,197,255, 0.6)",
"rgba(151,90,193, 0.6)",
"rgba(193,70,136, 0.6)",
"rgba(168,123,187, 0.6)",
"rgba(41,186,116, 0.6)",
"rgba(148,189,36, 0.6)",
"rgba(240,61,44, 0.6)",
"rgba(56,155,217, 0.6)",
"rgba(32,187,185, 0.6)",
"rgba(32,169,255, 0.6)"];
jQuery('#moodular li p span').each(function() {
jQuery(this).css('background-color', couleurs[Math.floor(Math.random() * couleurs.length)]);
});
jQuery('#moodular').moodular({
/* core parameters */
// effects separated by space
effects: 'mosaic',
// controls separated by space
controls: 'keys',
// if you want some yummy transition
easing: 'easeOutExpo',
// step
step: 1,
// selector is to specify the children of your element (tagName)
selector: 'li',
// if timer is 0 the carrousel isn't automatic, else it's the interval in ms between each step
timer: 5000,
// speed is the time in ms of the transition
speed: 5000,
// queuing animation ?
queue: false,
/* parameters for controls or effects */
// keys control
keyPrev: 37, // left key
keyNext: 39, // right key
// mosaic effects
slices: [10, 4],
mode : 'random'//,
// others
//your_params : 'cause you can create your own effect or control'
});
});
</script>
</body>
</html>
댓글()
