0

素晴らしいエフェクトを使ってスライドショーを作ろうとしています。スライス機能を作りながら画像をスライドさせようとしています。画像スライドショーのスライス機能は正常に動作しますが、スライス機能を使用しているときに画像を変更する方法がわかりません。

HTML:

<div class="sliced">
   <img id='img1' src="../Images/germany.png" />
   <img id='img2' src="../Images/test.png" />
</div>

CSS:

.sliced {
position: relative;
width: 640px; 
height: 400px;
}
.sliced img {
position: absolute;
width: 640px; 
height: 400px;
}
.tile { 
float: left;
opacity: 1;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
.tile-animated {
    opacity: 0;
}
.css3-preload .sliced * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
}

および JAVASRIPT:

;(function( $, window ) {
var _defaults = {
x      : 2, // number of tiles in x axis
y      : 2, // number of tiles in y axis
random : true, // animate tiles in random order
speed  : 2000 // time to clear all times
  };
* range Get an array of numbers within a range
* @param min {number} Lowest number in array
 * @param max {number} Highest number in array
 * @param rand {bool} Shuffle array
* @return {array}
  */



function range( min, max, rand ) {
var arr = ( new Array( ++max - min ) )
  .join('.').split('.')
  .map(function( v,i ){ return min + i})
return rand
  ? arr.map(function( v ) { return [ Math.random(), v ] })
     .sort().map(function( v ) { return v[ 1 ] })
  : arr
  }
// Prevent css3 transitions on load
$('body').addClass('css3-preload')
$( window ).load(function(){ $('body').removeClass('css3-preload') })
  $.fn.sliced = function( options ) {

var o = $.extend( {}, _defaults, options );

return this.each(function() {

  var $container = $(this);
  /*---------------------------------
   * Make the tiles:
   ---------------------------------*/

  var width = $container.width(),
      height = $container.height(),
      $img = $container.find('img'),
      n_tiles = o.x * o.y,
      tiles = [], $tiles;

  for ( var i = 0; i < n_tiles; i++ ) {
    tiles.push('<div class="tile" id="tile'+i+'"/>');
  }
  $tiles = $( tiles.join('') );

  // Hide original image and insert tiles in DOM
  $img.hide().after( $tiles );

  // Set background

  $tiles.css({
    width: width / o.x,
    height: height / o.y,
    backgroundImage: 'url('+ $img.attr('src') +')'
  });

  // Adjust position
  $tiles.each(function() {
    var pos = $(this).position();
    $(this).css( 'backgroundPosition', -pos.left +'px '+ -pos.top +'px' );
  });

  /*---------------------------------
   * Animate the tiles:
   ---------------------------------*/

  var tilesArr = range( 0, n_tiles, o.random ),
      tileSpeed = o.speed / n_tiles; // time to clear a single tile

  // Public method
  $container.on( 'animate', function() {

    tilesArr.forEach(function( tile, i ) {
      setTimeout(function(){
        $tiles.eq( tile ).toggleClass( 'tile-animated' );
      }, i * tileSpeed );
    });

  });

});

  };

}( jQuery, window ));
$('.sliced').sliced({ x: 20, y: 15, speed: 1000 });


var timeCounter = 0;
var timeOut = window.setInterval(function(){
        if(timeCounter==0){
            $('.sliced').trigger('animate');
            timeCounter = 1100;
        } 
        if(timeCounter==1100) {
            window.setTimeout(function(){
                $('.sliced').trigger('animate');
            }, timeCounter);
            timeCounter = 0;
        }
}, 5000);

この画像のスライド スライス効果はhttp://jsfiddle.net/elclanrs/4nsJE/にあります。コードを少し変更したので、5 秒ごとにループします。

私の問題は、ロード時にタイルが画像の背景を使用しているように見え、実際の画像が隠されていることです。タイルの背景を変更して、他の画像の背景を使用する方法が見つかりません。// jsfiddle を見て、「クリックボタン」でどのように機能するかを確認し、さらに理解してください。

私の問題を解決する方法について回答がある場合は、お気軽に教えてください。コードを教えてください。ただし、コードで機能する理由を説明していただければ幸いです。コードが機能することはスクリプターにとって重要ですが、それよりも重要なのは、なぜ機能するのかを知ることです。:-)

4

0 に答える 0