如何解决在背景中设置的此滑块中的故障

时间:2019-07-02 01:18:02

标签: javascript jquery html css

我目前正在该网站http://run-journey.com/上工作。 我在智能手机首页上的背景中放置了一个滑块。在执行诸如调整大小或滚动之类的操作之前,它似乎工作正常:滑块图像未显示到看上去有些毛刺的程度。在PC上调整窗口大小并在智能手机上滚动时,都会发生这种情况。

我已经检查了这个js文件,但我不知道是什么原因造成的。

这是滑块的html部分。

  <div class="vid_inner">           
      //some codes here           
  </div>

这是js代码。

  (function($) {
  // defaults
  $.fn.fullClip = function(options) {
    var settings = $.extend({
      current: 0,
      images: [],
      transitionTime: 1000,
      wait: 3000,
      static: false
    }, options);

    // preload images
    var i, end;
    for (i = 0, end = settings.images.length; i < end; ++i) {
        new Image().src = settings.images[i];
    }

    // sort out the transitions + specify vendor prefixes
    $('.vid_inner')
      .css('background', 'url(' + settings.images[settings.current] + ')')
      .css('-webkit-transition', + settings.transitionTime + 'ms ease-in-out')
      .css('-moz-transition', + settings.transitionTime + 'ms ease-in-out')
      .css('-ms-transition', + settings.transitionTime + 'ms ease-in-out')
      .css('-o-transition', + settings.transitionTime + 'ms ease-in-out')
      .css('transition', + settings.transitionTime + 'ms ease-in-out')

    // if only one image, set as static background
    if (settings.static) {
      $(this)
      .css('background', 'url(' + settings.images[settings.current] + ')');
      return;
    }

    // change the background image
    (function update() {
      settings.current = (settings.current + 1) % settings.images.length;
        $('.vid_inner').css('background', 'url(' + settings.images[settings.current] + ')');
        setTimeout(update, settings.wait);
    }());
}}(jQuery));



      onResize = function() {
    if($(window).width() < 1025) {
        $('.vid_inner').removeClass('topbg_none');
        $('.vid_inner').fullClip({
  images: ['sliderimg/slider1_top.jpg', '/sliderimg/slider2_top.jpg', '/sliderimg/slider3_top.jpg'],
  transitionTime: 1500,
  wait: 10000
});
    } else {
        $('.vid_inner').addClass('topbg_none');
    }
};

$(document).ready(onResize);
$(window).resize(onResize);

0 个答案:

没有答案