这是我目前的情况
这是我用来获取这张图片的代码:
<!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 INSIDE 这个 div，这将允许我显示我的应用程序图像的幻灯片？我希望它与这些网站非常相似:
- shazam.com
- instagram.com
- venmo.com
我不知道如何以正确的方式适合这些图像，有人可以帮忙吗？
最佳答案
如果我没理解错的话，你说的是这样的
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>关于javascript - 如何使用 HTML、CSS 和 Javascript 制作幻灯片，在 iPhone 的图像上显示应用程序的图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46747880/