[英]How can I make a slideshow using HTML, CSS, and Javascript displaying an app's images on an image of an iPhone?
This is what I have so far 这就是我到目前为止
This is the code that I used to get this image on there: 这是我用来在其中获得该图像的代码:
<!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>
and here is the CSS I used for my div "slider" class 这是我用于div“ slider”类的CSS
.slider{
background-image: url('images/background.png');
height: 100%;
width: 50%;
position: absolute;
background-repeat: no-repeat;
}
So how can I make a div INSIDE of this div, which will allow me to display a slideshow of my app's images? 所以,我怎样才能使这个div,这将让我显示我的应用程序的影像的幻灯片播放的DIV 中 ? I want it to be very similar to these websites: 我希望它与这些网站非常相似:
I don't know how to fit these images the right way, can somebody please help? 我不知道如何正确地放置这些图像,有人可以帮忙吗?
If I understand you correctly, you are talking about something like this 如果我正确理解您的意思,那么您是在说这样的话
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.