DEMO

ダウンロード

ダウンロードはGitHubから。

yamartino/CSSDevices

ダウンロードしたフォルダにある「devices.css」「devices.js」と「jQuery」を読み込みます。

<link rel="stylesheet" type="text/css" href="devices.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="devices.js"></script>

フレームを表示するだけならCSSだけ読み込めば使えます。
画像をフェードで表示させたり、スライドで切り替えなどする場合はJavaScriptも読み込みます。

使い方

iPhoneフレームだったら下記のように指定します。 

<div class="cd-iphone-6 cd-gold">
  <div class="cd-body">
    <div class="cd-sound"></div>
    <div class="cd-sleep"></div>
    <div class="cd-camera"></div>
    <div class="cd-ear"></div>
    <div class="cd-home"></div>
    <div class="cd-screen">
      <img src="http://media.idownloadblog.com/wp-content/uploads/2014/09/GoodReader-4.5-for-iOS-iPhone-screenshot-004.jpg">
    </div>
  </div>
</div>

一番外のdivでiPhoneの機種や色など指定できます。
ここではカラーに「cd-gold」を指定してますが、何も指定しない場合Blackになります。

スライドで表示

スライドで表示する例です。
クラスやデータ属性でフェード方法やタイミングなど制御します。 

<div class="cd-iphone-6 cd-gold">
  <div class="cd-body">
    <div class="cd-sound"></div>
    <div class="cd-sleep"></div>
    <div class="cd-camera"></div>
    <div class="cd-ear"></div>
    <div class="cd-home"></div>
    <div class="cd-screen cd-transition-slider cd-smart-loader" data-pause-speed="4000" data-transition-speed="500">
      <img src="01.jpg">
      <img src="02.jpg">
      <img src="03.jpg">
    </div>
  </div>
</div>

アプリを紹介するページなどで使えそうですね。
他にもスライド方法とかサイズとかいろいろとカスタマイズして表示できますので公式サイトの方を確認してください。

yamartino/CSSDevices