幻燈片

我想做同樣的幻燈片一樣在這個網站：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

回答

相關問題