Question

我想设置滑块不要放大浏览器以保持固定并且是完整的窗口/屏幕宽度和高度，我尝试了很多不同的方法但它不能像我想要的那样工作。我把尺寸放回去就像我开始的那样。在这里我的代码有人可以告诉你怎么做。提前谢谢

<div id="slider">
<div id="container">
    <div class="photos" id="photo1"></div>
    <div class="photos" id="photo2"></div>
    <div class="photos" id="photo3"></div>
    <div class="photos" id="photo4"></div>
    <div class="photos" id="photo5"></div>
</div>
</div>

html, body{
    background: #fff;
    overflow:hidden;
    width:100%;
    height:100%;
}
#slider{
    position: absolute;
    float: left;
    margin: 0;
    width: 1400px;
    height: 700px;
    overflow: hidden;
} 

#container{
    position: relative;
    float: left;
    margin: 0;
    height: 700px;
}
.photos{
    position: relative;
    float: left;
    margin: 0;
    width: 1400px;
    height: 700px;
}

#photo1{background: url(../img/1.jpg) no-repeat; background-size: cover;}
#photo2{background: url(../img/2.jpg) no-repeat; background-size: cover;}
#photo3{background: url(../img/3.jpg) no-repeat; background-size: cover;}
#photo4{background: url(../img/4.jpg) no-repeat; background-size: cover;}
#photo5{background: url(../img/5.jpg) no-repeat; background-size: cover;}

var pos = 1;
var max = 5;
var anime = 0;
var leftNumber = 0;
var time = 4000;

$('#container').css('width', 1400*max+'px');
setInterval('slide()',time);

function slide(){
    leftNumber = pos*-1400;
    $('#container').animate({left: leftNumber+'px'}, {queue: false, duration: time, easing:'easeInOutCubic'});

    pos = pos + 1;
    if(pos == max){
        pos = 0;
    }
}

Answer 1

<强> LIVE DEMO

你的CSS：

*{margin:0; padding:0;}

html, body{
  width:100%;
  height:100%;
}
#slider{
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
} 
#container{
  position:relative;
  height:100%;
  white-space:nowrap; /* in order to place inline-block DIV side by side */
  font-size:0px; /* remove whitespace gap */
}
.photos{
  position: relative;
  display: inline-block; /* to place them side by side */
  width: 100%;
  height: 100%;
  background: none no-repeat fixed 50% 50% / cover;
}    
#photo1{background-image: url(../img/1.jpg);}
#photo2{background-image: url(../img/2.jpg);}
#photo3{background-image: url(../img/3.jpg);}
#photo4{background-image: url(../img/4.jpg);}
#photo5{background-image: url(../img/5.jpg);}

你的JS：

  var winW = $(window).width();      // get window width = left animation
  var $cont = $('#container');       // cache your elements
  var $photo =  $('.photos', $cont); // cache your elements
  var max = $photo.length;           // count slides
  var pos = 0;                       // Start from position 0
  var pause = 2000;
  var slideTime = 1000;

  function slide(){   
      $cont.animate({ left: -(++pos%max)*winW }, {
        queue:false, duration:slideTime, easing:'easeInOutCubic'
      });
  }
  // the Reminder % is used to loop back to 0

  // User might resize the window so re-calculate that var value
  $(window).on('load resize', function(){ winW = $(this).width(); });

  setInterval(slide, pause); // (don't pass string "slide()" but function name)

无法设置滑块以修复全屏Jquery

1 个答案: