Question

你好，我有一个幻灯片的问题，这不是我想要的工作。

基本上我有两个图像，我需要是整页宽度（100％）。然后，当浏览器重新调整大小/缩小时，我需要它们保持在div的中心/顶部，但边缘会被裁掉。

我已经设法使用第一个div标签，但是一旦动画调整大小能力停止，我只是得到一个水平滚动条。

有什么想法吗？我卡住了！

    #animatedbannerkitchen {
    float: left;
    height: 381px;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
}
.slideshow
{
    float: left;
    height: 381px;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
}
#bannerone {
    background-image: url(purchase-tableware.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    float: left;
    width: 100%;
    position: relative;
    height: 381px;
    background-size: cover; 
}
#bannertwo {
    background-image: url(tasty-plate.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    float: left;
    width: 100%;
    position: relative;
    height: 381px;
    background-size: cover; 
}






 <!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>

<!--  initialize the slideshow when the DOM is ready scrollLeft -->
<script type="text/javascript"> 
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade',
        speed: 1500,
         slideResize: false,
        timeout: 7000// choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});
</script>

最后是身体内容

<div id="animatedbannerkitchen">
  <div class="slideshow">
    <div id="bannerone"></div>
    <div id="bannertwo"></div>

  </div>
</div>

任何帮助将不胜感激

Answer 1

$(window).onLoad(function(){
  var windowWidth = $(window).width();
  $('#bannerone').css('background-width', windowWidth);
  $('#bannertwo').css('background-width', windowWidth);
});

或者

$(window).onLoad(function(){
      var bannerOneWidth= $('#bannerone').width();
      $('#bannerone').css('background-width', bannerOneWidth);
      var bannerTwoWidth= $('#bannertwo').width();
      $('#bannertwo').css('background-width', bannerTwoWidth);
    });

可以使jQuery 100％宽度同时保持动画

1 个答案: