Question

我正在尝试在手机的png模型中放置一个简单的jQuery幻灯片，用于我们的应用程序的简单网站。我正在使用bootstrap并将一个jumbotron分成两列。我希望左侧的模型电话有淡化的屏幕截图，右侧有标识和说明。我正在使用this幻灯片。

Here is the js fiddle.

以下是我对html的了解

<body>
<div class="container">
  <div class="jumbotron text-center">
    <div class="row">

      <!-- Slideshow Left -->
      <div class="col-md-6">
        <div class="fadein">
          <img src="img/screenshot1.jpg">
          <img src="img/screenshot2.jpg">
          <img src="img/screenshot3.jpg">
        </div>
        <div class="phone">
          <img src="img/phone.png">
        </div> 
      </div>

      <!-- Description Right -->
      <div class="col-md-6">
        <h1>√oots</h1>
        <p>This is some shit about the game.</p>
      </div>
    </div>
  </div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

    <!-- Slideshow plugin -->
<script type="text/javascript">
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.fadein');}, 
      4000);
});
</script>
</body>

这是css

.jumbotron { 
    height: 600px; 
}

.container { 
    padding-top: 65px; 
}

.fadein { 
    position:relative; 
    width:500px; 
    height:332px; 
}

.fadein img { 
    position:absolute; 
    left:0; 
    top:0;
}

我进行了搜索和搜索，所有我能说的是有关css的绝对与相对需要做的事情。我也希望这个网站能够利用Bootstrap的响应功能，但是我可以看到我需要做一些特别的事情才能让幻灯片显示。也许我使用的一切都是荒谬的，你知道更好的方法吗？

Answer 1

这是一个干净的解决方案，如果您决定将来更改布局，将更容易处理。这更容易，因为您只需移动手机的容器，这也将移动屏幕内容，而无需重新定位其他所有内容。我主要只是让您的手机类成为幻灯片放映的容器，并使手机模型成为手机类的BG，而不是使用img标签。然后我添加了一个负z-index值，以使屏幕内容很好地适应手机。

（您可能需要考虑使图像与模型的屏幕尺寸相同，因此不会切割任何东西）。

http://jsfiddle.net/h82ukey4/

**CSS**

    @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 .jumbotron {
    height: 600px;
}
.container {
    padding-top: 65px;
}
.fadein {
    position:relative;
    width:311px;
    height:480px;
    top: 40px;
    z-index: -1; /* Important. */
}
.fadein img {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    opacity: 0.5;
}
.phone {
    width: 311px;
    height: 573px;
    background-image: url('http://www.smoothsand.com/gradeply/images/mockup%20galaxy%20nexus.png'); /* Important. */
}

这应该有用，检查小提琴。希望这会有所帮助。

Answer 2

您只需将幻灯片的偏移量（.fadein）更改为与图片（.phone）相同，然后进行相应调整以使其适合屏幕：

$('.fadein').offset({ 
    top: $('.phone').offset().top + 28,
    left: $('.phone').offset().left + 21 
});

以下是 fiddle 。

如何在png中定位jQuery幻灯片

2 个答案: