다양한 이펙트를 지닌 이미지 슬라이드
페이지 정보
작성일17-03-08 01:24 조회5,542회관련링크
- 예제파일 760회 연결
본문
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>타일슬라이드</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="/script/slide4/js/jquery.tiles.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css"/>
<link rel="stylesheet" href="/script/slide4/css/jquery.tiles.min.css"/>
<link rel="stylesheet" href="/script/slide4/css/styles.css" media="screen"/>
</head>
<body>
<section>
<div class="title">
<!--<h3>» default</h3>-->
<label>Effect:</label>
<select id="effects-select">
<option value="default">default</option>
<option value="simple">simple</option>
<option value="left">left</option>
<option value="up">up</option>
<option value="leftright">leftright</option>
<option value="updown">updown</option>
<option value="switchlr">switchlr</option>
<option value="switchud">switchud</option>
<option value="fliplr">fliplr</option>
<option value="flipud">flipud</option>
<option value="reduce">reduce</option>
<option value="360">360</option>
</select>
<div class="code">
<code>x: 6</code>
<code>y: 4</code>
<code>random: true</code>
</div>
<button type="button" class="start action">Play</button>
<button type="button" class="stop action">Stop</button>
</div>
<div class="slider-wrap">
<div class="slider">
<img src="http://madalla.kr/script/slide/images/a1.jpg"/><p><strong>slider1:</strong> 안녕하세요! Design Madalla입니다. </p>
<img src="http://madalla.kr/script/slide/images/a2.jpg"/><p><strong>slider2:</strong> 안녕하세요! Design Madalla입니다.</p>
<img src="http://madalla.kr/script/slide/images/a3.jpg"/><p><strong>slider3:</strong> 안녕하세요! Design Madalla입니다.</p>
<img src="http://madalla.kr/script/slide/images/a4.jpg"/><p><strong>slider4:</strong> 안녕하세요! Design Madalla입니다.</p>
</div>
</div>
</section>
<br /><br />
<center>
<a href="/script/slide4/slide4.zip" target="_blank" style="padding:11px 15px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none;vertical-align:middle;border-radius:3px;width:128px;font-size:15px;font-weight:bold;font-family:'Nanum Gothic';">전체파일 다운로드</a><center>
<script>
var $slider = $('.slider-wrap');
var html = $slider.html();
// Options
var defaults = {
thumbSize: 20,
onSlideshowEnd: function(){ $('.stop, .start').toggle() }
};
var effects = {
'default': { x:6, y:4, random: true },
simple: { x:6, y:4, effect: 'simple', random: true },
left: { x:1, y:8, effect: 'left' },
up: { x:20, y:1, effect: 'up', rewind: 60, backReverse: true },
leftright: { x:1, y:8, effect: 'leftright' },
updown: { x:20, y:1, effect: 'updown', cssSpeed: 500, backReverse: true },
switchlr: { x:20, y:1, effect: 'switchlr', backReverse: true },
switchud: { x:1, y:8, effect: 'switchud' },
fliplr: { x:20, y:1, effect: 'fliplr', backReverse: true },
flipud: { x:20, y:3, effect: 'flipud', reverse: true, rewind: 75 },
reduce: { x:6, y:4, effect: 'reduce' },
360: { x:1, y:1, effect: '360', fade: true, cssSpeed: 600 }
};
$('#effects-select').change(function() {
var effect = $(this).val();
$slider.fadeTo( 0,0 ).html( html );
$('.stop').hide();
$('.start').show();
setTimeout(function() {
$('.slider').tilesSlider( $.extend( {}, defaults, effects[ effect ] ) );
$slider.fadeTo( 0,1 );
$('body').removeClass('tiles-preload');
}, 100 );
$('.code').empty().html(function() {
var e = effects[ effect ], c = [];
for ( var i in e ) {
if ( i !== 'effect' ) {
c.push('<code>'+ i +': '+ e[i] +'</code>');
}
}
return c.join('');
});
});
$('.start').click(function() {
$(this).hide();
$('.stop').show();
$('.slider').tilesSlider('start')
});
$('.stop').click(function() {
$(this).hide();
$('.start').show()
$('.slider').tilesSlider('stop')
});
$('.slider').tilesSlider( $.extend( {}, defaults, effects['default'] ) );
</script>
</body>
</html>
![http://madalla.kr/script/slide/images/a1.jpg"/><p><strong>slider1:</strong](http://madalla.kr/script/slide/images/a1.jpg"/><p><strong>slider1:</strong){kind=link}
![http://madalla.kr/script/slide/images/a2.jpg"/><p><strong>slider2:</strong](http://madalla.kr/script/slide/images/a2.jpg"/><p><strong>slider2:</strong){kind=link}
![http://madalla.kr/script/slide/images/a3.jpg"/><p><strong>slider3:</strong](http://madalla.kr/script/slide/images/a3.jpg"/><p><strong>slider3:</strong){kind=link}
![http://madalla.kr/script/slide/images/a4.jpg"/><p><strong>slider4:</strong](http://madalla.kr/script/slide/images/a4.jpg"/><p><strong>slider4:</strong){kind=link}