スライドショー

: jQuery

スライドショーに色々な機能を付けてみた。

2015/10/29 スライドショー

詳細はサンプルコードにコメントアウトしました。サンプルコードの実行結果はこちら CSSのサンプルコードは以下です。今回はコードが長いので、CSSとHTMLに分けています。 [crayon-675ae ...

jQueryでスライドショーを作ってみる

2015/10/29 スライドショー

タイトルの通りです。簡単なスライドショーを作成してみました。サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>スライドショーを作ってみる</title>
   
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/ui/jquery-ui.js"></script>

    <style>
        *{margin:0;padding:0;}
        
        .slideShow{
            position:relative;
            width:320px;
            height:180px;
            overflow:hidden;
        }
        .slideShow img{
            position:absolute;
            left:0;
            display:none;
        }
    </style>

</head>
<body>
<div class="slideShow">
    <img src="../img/0.JPG">
    <img src="../img/1.JPG">
    <img src="../img/2.JPG">
    <img src="../img/3.JPG">    
</div>
    
<script>
$(function(){
    
    /*
    each.～の箇所
    jQueryがHTMLの中から「.slideShow」というクラスを持った
    要素を探してきて、それぞれに対してこの括弧内の処理を実行する。
    
    今回のサンプルでは「.slideShow」は一つだけなので処理は一回だけです。
    */
    $(".slideShow").each(function(){
        
        //全てのスライド
        var $slide = $(this).find("img"),
            
        //現在のスライドを示す番号を格納
            currentNum = 0;
        
        //スライドを徐々に表示する
        $slide.eq( currentNum ).fadeIn();
        
        //2000/1000=２秒間隔で「showNextSlide」を呼び出す
        setInterval( showNextSlide,2000);
        
        function showNextSlide(){
            /*
                $slide.lengthは、$slideの要素数が入っています。
                今回は画像が４枚なので「４」が格納されています。                
            */
            var nextSlideNum =( currentNum + 1 ) % $slide.length;
            
            //スライドを徐々に非表示する
            $slide.eq( currentNum ).fadeOut();

            //次のスライドを徐々に表示する            
            $slide.eq( nextSlideNum ).fadeIn();
            
            //現在の見ている画像番号に、「次の」番号を格納する
            currentNum = nextSlideNum;
        }
    });
});
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>スライドショーを作ってみる</title>

<style>

*{margin:0;padding:0;}

.slideShow{

position:relative;

width:320px;

height:180px;

overflow:hidden;

}

.slideShow img{

position:absolute;

left:0;

display:none;

}

</style>

</head>

<body>

</div>

$(function(){

each.～の箇所

jQueryがHTMLの中から「.slideShow」というクラスを持った

要素を探してきて、それぞれに対してこの括弧内の処理を実行する。

今回のサンプルでは「.slideShow」は一つだけなので処理は一回だけです。

$(".slideShow").each(function(){

//全てのスライド

var $slide = $(this).find("img"),

//現在のスライドを示す番号を格納

currentNum = 0;

//スライドを徐々に表示する

$slide.eq( currentNum ).fadeIn();

//2000/1000=２秒間隔で「showNextSlide」を呼び出す

setInterval( showNextSlide,2000);

function showNextSlide(){

$slide.lengthは、$slideの要素数が入っています。

今回は画像が４枚なので「４」が格納されています。

var nextSlideNum =( currentNum + 1 ) % $slide.length;

//スライドを徐々に非表示する

$slide.eq( currentNum ).fadeOut();

//次のスライドを徐々に表示する

$slide.eq( nextSlideNum ).fadeIn();

//現在の見ている画像番号に、「次の」番号を格納する

currentNum = nextSlideNum;

}

});

</script>

</body>

</html>