我想做同样的幻灯片一样在这个网站:http://groupme.com/iphone幻灯片
我想这样做exectly与iPhone图像和它内部的5个不同的图像同样以相同的这种变化效果。 一些示例代码也会有帮助或者jQuery库。 谢谢。
我想做同样的幻灯片一样在这个网站:http://groupme.com/iphone幻灯片
我想这样做exectly与iPhone图像和它内部的5个不同的图像同样以相同的这种变化效果。 一些示例代码也会有帮助或者jQuery库。 谢谢。
这个怎么样?如果你愿意,我可以改进/添加点。
<html>
<head>
<style>
.mask {
position: absolute;
left: 31;
top: 122;
width: 239;
height: 342;
overflow: hidden;
}
.canvas {
position: relative;
width: 2195;
height: 342;
}
.page {
width: 239;
height: 342;
float:left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var $canvas
$(function(){
$canvas=$("div.canvas")
setInterval(scroll, 5000);
});
function scroll(){
if ($canvas.position().left!=-956){
$canvas.animate({left: "-=239"});
}else{
$canvas.animate({left: 0});
}
}
</script>
</head>
<body>
<img src="http://groupme.com/images/apps/iphone.png">
<div class="mask">
<div class="canvas">
<div class="page">a</div>
<div class="page">b</div>
<div class="page">c</div>
<div class="page">d</div>
<div class="page">e</div>
</div>
</div>
</body>
</html>
这正是我想要的,非常感谢你! – Ben
真棒答案,完美的作品! – vinigarcia87
小提琴:https://jsfiddle.net/Grezzo/86soo0ea/2/ – Grezzo