Question

我想在此网站中执行相同的幻灯片演示：http://groupme.com/iphone

我想用iphone图像和其中5个不同的图像完全相同，它们会以相同的效果发生变化。一些示例代码也很有用，或者jquery库也是如此。感谢。

Answer 1

这个怎么样？如果你愿意，我可以改进/添加点。

<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>

Answer 2

查看来源有什么问题？

iphone图像内的图像幻灯片

2 个答案: