gpt4 book ai didi

javascript - 如何使用 HTML、CSS 和 Javascript 制作幻灯片,在 iPhone 的图像上显示应用程序的图像?

转载 作者:行者123 更新时间:2023-11-28 02:49:20 25 4
gpt4 key购买 nike

这是我目前的情况

这是我用来获取这张图片的代码:

<!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,这将允许我显示我的应用程序图像的幻灯片?我希望它与这些网站非常相似:

  1. shazam.com
  2. instagram.com
  3. venmo.com

我不知道如何以正确的方式适合这些图像,有人可以帮忙吗?

最佳答案

如果我没理解错的话,你说的是这样的

JSFiddle Demo

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com