N-takデザインブログ

WEBで培った作品や技術を公開しています。

超簡単。初心者がお手軽に使えるスライドショー!!のまとめ

自身の作品サイトでも使っているスライドショーです。

お手軽に実装したい方はコピペでどうぞ。

 

 

①<head>内に以下scriptを埋め込んでください。

<script>

$(function(){

  var $item = $("#imgSwitch");

  var $interval = 4000;

  var $fadeTime = 1000;

  

  $item.each(function() {

     $item.children(':gt(0)').hide();

      setInterval(function() {

        $item.children().eq(0).fadeOut($fadeTime)

        .next().fadeIn($fadeTime)

        .end().appendTo($item);

      }, $interval);

  });

});

</script>

 

 

②スライドショーさせたいところに以下divを埋め込んでください。

<div id="imgSwitch">

<img scr="あなたのフォルダにある画像">

</div>

 

 ③CSSに以下を追加してください。

#imgSwitch { position:relative;left:30px;top:10px;}

#imgSwitch img {position:absolute;width::200px;height:auto;}

 

以上です。

超お手軽簡単です。

 

 サンプルサイトはこちら

   iPhoneカバーケース

f:id:r4m0khksticiibypvp4k:20131016162201g:plain

☆☆どうでしょうか?できたでしょうか?☆☆

 

補足

var $interval = 4000;→数字が小さいほど切り替えが早くなります。

var $fadeTime = 1000;→数字が小さいほどフェードが早くなります。

 

 

では、また次回です。