Question

我正在尝试创建动态的整页背景图片。我发现DirectorySlider插件适用于常规图像，但我似乎无法修改背景图像。

我想创建一个背景图片，因为图片必须适合浏览器视图（全宽和高度），所以我想使用background-size：100％100％属性。

这是我到目前为止的代码。

(function($){
   var directorySlider = function(element, options)
   {
       var elem = $(element),
           obj = this,
           elemId = elem[0].id;

       // Merge config settings
       var config = $.extend({
           animation: 'slide',
           filebase: 'slide_',
           extension: 'jpg',
           speed: 1000,
           timeout: 4000,
           directory: null,
           numslides: null,
           height: null,
           width: null
       }, options || {});

       // set slideshow dimensions if set
       if (config.height) {
        $(elem).css('height', config.height);
       }
       if (config.width) {
        $(elem).css('width', config.width);
       }

       $(elem).css('overflow', 'hidden');

       // Get slides
       var slides = [],
       slideNumber = 1;

       while(slideNumber <= config.numslides){
         slides.push($(".background-image").css("background-image", 'url(' + config.directory + config.filebase + slideNumber + '.' + config.extension + ');' ) );
         slideNumber++;
       }

       // append slideshow
       // apply slide wrap 1st
       var slideWrap = $('<div class="' + elemId + '-slide-wrap" ></div>');
           slideWrap.appendTo(elem);

        // append slide and position absolutley
       $.each(slides, function(index, val) {
         $(val).css({
           position: 'absolute',
           top: 0,
           left: 0
         }).appendTo(slideWrap);
       });

    setInterval(function(){
       var firstSlide = elem.find('img:first-child'),
           lastSlide = elem.find('img:last-child');
       // Apply animation
       switch(config.animation){

        case 'fade':
            $(lastSlide).animate({
              opacity: 0},
              config.speed, function() {
              $(this).insertBefore(firstSlide).css('opacity', 1);
            });
        break;

        case 'uncover':
            lastSlide.animate({
              marginLeft: -$(this).width()},
              config.speed, function() {
              $(this).insertBefore(firstSlide).css('marginLeft', 0);
            });
            break;
        default:
            $(lastSlide).animate({
              opacity: 0},
              config.speed, function() {
              $(this).insertBefore(firstSlide).css('opacity', 1);
            });
       }
    }, config.timeout);

   };

   $.fn.directorySlider = function(options)
   {
       return this.each(function()
       {
           var element = $(this);

           // Return early if this element already has a plugin instance
           if (element.data('directoryslider')) return;

           // pass options to plugin constructor
           var directoryslider = new directorySlider(this, options);

           // Store plugin object in this element's data
           element.data('directoryslider', directoryslider);

       });
   };
})(jQuery);

.background-image {
  display: inline-block;
  position: fixed;
  background-image: url('../backgroundimages/verticaal/slide_1.jpg');
  background-color: red;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}

<div id="slider-main"></div>

<div class="w-section background-image">
  </div>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
  

  if (window.innerHeight > window.innerWidth){
    alert("portrait!");
    $('#slider-main').directorySlider({
    animation: 'fade',
    filebase: 'slide_',
    directory: '../backgroundimages/verticaal/',
    extension: 'jpg',
    numslides: 2,
    height: sizeContent
});
}
});
  </script>

动态背景图像取决于方向

0 个答案: