如何使用HTML，CSS和Javascript制作幻灯片显示，以在iPhone的图像上显示应用程序的图像？

Question

这就是我到目前为止

这是我用来在其中获得该图像的代码：

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet"type="text/css"href="index.css"/>
      <title>My Title</title>
   </head>
<body>
  <div class="slider">
  </div>

</body> 
</html>

这是我用于div“ slider”类的CSS

.slider{
background-image: url('images/background.png');
height: 100%;
width: 50%;
position: absolute;
background-repeat: no-repeat;
}

所以，我怎样才能使这个div，这将让我显示我的应用程序的影像的幻灯片播放的DIV 中？ 我希望它与这些网站非常相似：

shazam.com
instagram.com
venmo.com

我不知道如何正确地放置这些图像，有人可以帮忙吗？

Answer 1

如果我正确理解您的意思，那么您是在说这样的话

JSFiddle演示

 var $canvas $(function(){ $canvas=$("div.canvas") setInterval(scroll, 5000); }); function scroll(){ if ($canvas.position().left!=-1195){ $canvas.animate({left: "-=239"}); }else{ $canvas.animate({left: 0}); } }

 .mask { position: absolute; left: 31px; top: 122px; width: 239px; height: 342px; overflow: hidden; } .canvas { position: relative; width: 2195px; height: 342px; } .page { width: 239px; height: 342px; float:left; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <img src="https://d3sq5bmi4w5uj1.cloudfront.net/images/brochure/apps/iphone.png"> <div class="mask"> <div class="canvas"> <div class="page" style="background: red;"><img src="https://www.w3schools.com/w3images/fjords.jpg"/></div> <div class="page" style="background: blue;"><img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067"/></div> </div> </div>

如何使用HTML，CSS和Javascript制作幻灯片显示，以在iPhone的图像上显示应用程序的图像？

问题描述

1 个解决方案

解决方案1
0 2017-10-14 18:31:52

如何使用HTML，CSS和Javascript制作幻灯片显示，以在iPhone的图像上显示应用程序的图像？

问题描述

1 个解决方案

解决方案1 0 2017-10-14 18:31:52

解决方案1
0 2017-10-14 18:31:52