스크립트
< 자료공유 < 스크립트
스크립트자료실

다양한 이펙트를 지닌 이미지 슬라이드

페이지 정보

작성일17-03-08 01:24 조회2,632회

본문

<!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>&raquo; 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> 

 

  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기