幻灯片

我想做同样的幻灯片一样在这个网站：http://groupme.com/iphone 幻灯片

我想这样做exectly与iPhone图像和它内部的5个不同的图像同样以相同的这种变化效果。一些示例代码也会有帮助或者jQuery库。谢谢。

2011-07-07 Ben

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

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

来源

2011-07-07 14:48:11 Grezzo

这正是我想要的，非常感谢你！ – Ben

真棒答案，完美的作品！ – vinigarcia87

小提琴：https：//jsfiddle.net/Grezzo/86soo0ea/2/ – Grezzo

查看源代码有什么问题？

来源

2011-07-07 12:16:44 Grezzo

我试过，但无法弄清楚。我看到它在许多网站必须是一个jQuery库，但我无法在谷歌中找到它。 – Ben

我会看看，我敢肯定我以前见过类似 – Grezzo

也许[Dot Slider]（http://plugins.jquery.com/project/Dot-Slider-simple-easy-to-use-图片幻灯片）可能是你正在寻找的东西？ – Grezzo

回答

相关问题