Question

我已经使用jquery.featured.carousel.js文件和一些css创建了功能轮播滑块。

这是我的jsfiddle LINK。

在localhost中运行这些源代码时，每次刷新页面时都需要在调整窗口大小时获取响应视图。

这是我的javascript：

<script type="text/javascript">
      $(document).ready(function() {
 initSlider();

                }); 
  $( window ).resize(function() {
    initSlider();

  });

  function initSlider()
  {
    if ($( window ).width() < 1004 &&  $( window ).width() > 900)
    {
    var carousel = $("#carousel").featureCarousel({
          // include options like this:
          // (use quotes only for string values, and no trailing comma after last option)
          // option: value,
          // option: value,
        trackerIndividual:false,
        trackerSummation: false,
        autoPlay:0, 
        largeFeatureWidth :   .8,
        largeFeatureHeight:     .8,
        smallFeatureWidth:    .3,
        smallFeatureHeight:     .3,    
        topPadding:           20,    
        sidePadding:          30
        });

  }
    else if ($( window ).width() < 900 &&  $( window ).width() > 768)
    {
    var carousel = $("#carousel").featureCarousel({
          // include options like this:
          // (use quotes only for string values, and no trailing comma after last option)
          // option: value,
          // option: value,
        trackerIndividual:false,
        trackerSummation: false,
        autoPlay:0, 
        largeFeatureWidth :   .7,
        largeFeatureHeight:     .7,
        smallFeatureWidth:    .2,
        smallFeatureHeight:     .2,    
        topPadding:           40,    
        sidePadding:          30
        });

  }
    else if ($( window ).width() < 768 &&  $( window ).width() > 680)
    {
    var carousel = $("#carousel").featureCarousel({
          // include options like this:
          // (use quotes only for string values, and no trailing comma after last option)
          // option: value,
          // option: value,
        trackerIndividual:false,
        trackerSummation: false,
        autoPlay:0, 
        largeFeatureWidth :   .577,
        largeFeatureHeight:     .577,
        smallFeatureWidth:    .19999,
        smallFeatureHeight:     .19999,    
        topPadding:           40,    
        sidePadding:          30
        });

  }
    else if ($( window ).width() < 680 &&  $( window ).width() > 580)
    {
    var carousel = $("#carousel").featureCarousel({
          // include options like this:
          // (use quotes only for string values, and no trailing comma after last option)
          // option: value,
          // option: value,
        trackerIndividual:false,
        trackerSummation: false,
        autoPlay:0, 
        largeFeatureWidth :   .488,
        largeFeatureHeight:     .488,
        smallFeatureWidth:    .111,
        smallFeatureHeight:     .111,    
        topPadding:           60,    
        sidePadding:          30
        });

  }
   else if ($( window ).width() < 580 &&  $( window ).width() > 412)
    {
    var carousel = $("#carousel").featureCarousel({
          // include options like this:
          // (use quotes only for string values, and no trailing comma after last option)
          // option: value,
          // option: value,
        trackerIndividual:false,
        trackerSummation: false,
        autoPlay:0, 
        largeFeatureWidth :   .388,
        largeFeatureHeight:     .388,
        smallFeatureWidth:    .1,
        smallFeatureHeight:     .1,    
        topPadding:           70,    
        sidePadding:          30
        });

  }
    else if ($( window ).width() < 412 &&  $( window ).width() > 250)
    {

    var carousel = $("#carousel").featureCarousel({

          // include options like this:
          // (use quotes only for string values, and no trailing comma after last option)
          // option: value,
          // option: value,
        trackerIndividual:false,
        trackerSummation: false,
        autoPlay:0, 
        largeFeatureWidth :   .3,
        largeFeatureHeight:     .3,
        smallFeatureWidth:    .06,
        smallFeatureHeight:     .06,    
        topPadding:           80,    
        sidePadding:          10
        }); 

  }
    else
    {
      var carousel = $("#carousel").featureCarousel({
          // include options like this:
          // (use quotes only for string values, and no trailing comma after last option)
          // option: value,
          // option: value,
        trackerIndividual:false,
        trackerSummation: false,
        autoPlay:0, 
        largeFeatureWidth :   0,
        largeFeatureHeight:     0,
        smallFeatureWidth:    .3,
        smallFeatureHeight:     .3,    
        topPadding:           20,    
        sidePadding:          20

        });

    }
  }
    </script>

在上面的代码中，我使用：

$( window ).resize(function() {
    initSlider();

  });

当我删除此代码时，它的工作原理相同。

注意：对于此轮播响应式视图，我无法使用css媒体查询。

我可以知道，如何设置宽度或如何修改我的代码以获取响应式视图而不必每次都刷新页面？

任何想法都会受到高度赞赏。

感谢。

Answer 1

首先，您应该将setTimeout放在resize功能上，以便在调整页面大小时不会在每个像素上调用该功能。

做这样的事情：

$(window).resize(function() {
  if(this.resizeTO) clearTimeout(this.resizeTO);
  this.resizeTO = setTimeout(function() {
    $(this).trigger('resizeEnd');
  }, 50);
});
$(window).bind('resizeEnd', function() {
  initSlider();
});

此外，我不认为每次调整大小时重新初始化轮播设置是个好主意。在转盘上应该有一个选项，您可以在其中设置值而无需再次初始化它。可悲的是，在检查功能旋转木马时，它并没有我所能看到的。

您可以通过使用css媒体查询来实现这一点，因为在元素上添加了类，例如centerImage，imageRight和imageLeft，您应该可以控制它。

响应设计javascript中的特色轮播滑块

1 个答案: