Home/ Questions/Q 6145455
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T18:47:44+00:00

I want to do the same slideshow like in this site: http://groupme.com/iphone I would

  • 0

I want to do the same slideshow like in this site: http://groupme.com/iphone

I would like to do exectly the same with an iphone image and 5 different images inside of it that change with the same effects.
Some example code will be helpful or a jquery library as well.
Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    How about this? I can refine/add dots if you want.

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