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

给我的问题是，Tiles 在加载时似乎使用了图像的背景，然后隐藏了真实图像。我找不到更改瓷砖背景的方法，以便它们使用另一张图像的背景。//请查看 jsfiddle 以了解它如何与“单击按钮”一起工作以进一步了解它。

如果您对我如何解决我的问题有一个答案，请随时告诉我，并给我代码。但是，如果您能说明为什么它可以与您的代码一起使用，我将不胜感激。对于脚本编写者来说，代码有效很重要，但更重要的是要知道它为什么有效。！:-)

4

0 回答 0