Question

我正在尝试制作一些效果很好的幻灯片。我试图在制作切片功能时使图像滑动。图像幻灯片的切片功能工作正常，但我似乎无法弄清楚如何在使用切片功能时更改图像。

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;
}

AND 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秒循环一次。

给我的问题是，Tiles在加载时似乎使用了图像的背景，然后隐藏了真实图像。我找不到改变图块背景的方法，因此他们将使用其他图像的背景。 //请查看jsfiddle以了解它如何使用“点击按钮”来理解它。

如果您对如何解决我的问题有一个答案，请随时告诉我，并给我代码。但是，如果你能解释为什么它适用于你的代码，我将不胜感激。代码工作对脚本编程很重要，但更重要的是知道代码的工作原理。： - ）

使用切片效果时图像滑动

0 个答案: