我想将滑块设置为不要在浏览器上缩放以保持固定,并保持整个窗口/屏幕的宽度和高度,但我尝试了许多不同的方法,但它并不能像我想要的那样工作。 我像开始时一样放回了尺寸。 在这里我的代码可以告诉我该怎么做。 提前致谢

<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;
    }
}

===============>>#1 票数:1 已采纳

现场演示

您的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)

  ask by Jay translate from so

未解决问题?本站智能推荐: