マウスのホイールを使って画像の切替を行う

タイトルの通りです。マウスのホイールをいじると画像が切り替わるjQueryの機能を作成してみました。

サンプルコードの実行結果はこちら

今回使用したプラグイン
・imagesloaded
・jquery.mousewheel

@charset "UTF-8";

    body{
        height: 100%;
        overflow:hidden;}

    *{margin:0;padding:0;}

    .scene{
        width:100%;
        height:100%;
        position:relative;}

    .sequencePhoto{position:absolute;}

        .sequencePhoto img{
            width:100%;
            height:100%;
            position:absolute;
            display:none;}

        .sequencePhoto img:first-child{
            display:inline;}

@charset "UTF-8";

body{

height: 100%;

overflow:hidden;}

*{margin:0;padding:0;}

.scene{

width:100%;

height:100%;

position:relative;}

.sequencePhoto{position:absolute;}

.sequencePhoto img{

width:100%;

height:100%;

position:absolute;

display:none;}

.sequencePhoto img:first-child{

display:inline;}

index.html

<!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>
    <script src="js/jquery.mousewheel.js"></script>
    
    <script src="js/imagesloaded.pkgd.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="js/sequencePhoto.js"></script>

</head>
<body>

<div class="scene" id="scene1st">
    <div class="sequencePhoto">
        <img src="img/seq/IMG_2960.MOV_000000000.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000001.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000002.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000003.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000004.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000005.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000006.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000007.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000008.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000009.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000010.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000011.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000012.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000013.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000014.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000015.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000016.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000017.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000018.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000019.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000020.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000021.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000022.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000023.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000024.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000025.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000026.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000027.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000028.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000029.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000030.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000031.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000032.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000033.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000034.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000035.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000036.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000037.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000038.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000039.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000040.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000041.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000042.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000043.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000044.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000045.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000046.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000047.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000048.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000049.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000050.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000051.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000052.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000053.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000054.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000055.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000056.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000057.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000058.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000059.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000060.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000061.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000062.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000063.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000064.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000065.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000066.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000067.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000068.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000069.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000070.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000071.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000072.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000073.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000074.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000075.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000076.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000077.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000078.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000079.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000080.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000081.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000082.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000083.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000084.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000085.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000086.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000087.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000088.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000089.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000090.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000091.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000092.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000093.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000094.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000095.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000096.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000097.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000098.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000099.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000100.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000101.jpg" alt="">
        <img src="img/seq/IMG_2960.MOV_000000102.jpg" alt="">
    </div>
</div>

</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

<!doctype html>

<html>

<head>

<title>マウスをホイールさせて画像を切り替える</title>

</head>

<body>

</div>

</body>

</html>

sequencePhoto.js

$(function(){
    
    initScene();
    
    function initScene(){
        
        //変数宣言
        var 
        $container = $("#scene1st .sequencePhoto"),
        $photos = $container.find("img"),
            
        //扱う画像の総数
        allPhotoNum = $photos.length,
            
        //現在表示中の画像の番号
        currentPhotoNum = 0,
            
        //アニメーションの進行状況を格納する変数
        animeCnt = 0,
            
        //アニメーションの速度
        velocity = 0,
            
        //アニメーションを管理するタイマー
        timer = null,
            
        //画像のアスペクト比率
        photoAspectRatio = 1920 / 1080;
        
        /* 
            コンテナ上で、マウスのホイールを操作した際に
            発生するイベントはこの関数内で行う
        */
        $container.on("mousewheel",
                     function(event,delta){
            if( delta < 0 ){                
                /*
                    変数 velocityはアニメーションの
                    速度と方向を表します。
                    初期値は０：アニメーションは停止
                    正の値：順方向にアニメーションが変わる
                    負の値：逆方向にアニメーションが変わる
                    
                    イベントハンドラは、
                    マウスホイールがどのくらい回転したかの
                    数値を持っている
                */
                
                //　velocity = velocity + 1.5　と同じ
                velocity += 1.5;
            }else{
                if( delta > 0 ) velocity -= 1.5;
            }
            
            startAnimation();
        });
        
        //　アニメーションを開始する関数
        function startAnimation(){
            /* 
                タイマーが起動していない場合は
               animateSequence関数を
               一定時間ごとに行うように設定する
            */
            if( !timer ) timer = setInterval(
            animateSequence, 1000 /30 ); 
        }
        
        // アニメーションを停止する関数
        function stopAnimation(){
            clearInterval( timer );
            timer = null;
        }
        
        function animateSequence(){
            
            //新しく表示する画像の番号を格納
            var nextPhotoNum;
            
            //加算された 変数velocityの値を徐々に小さくする
            velocity *= 0.9;
            
            /*
                変数velocity　*0.9を行い続けても
                限りなく０に近づくだけなので、
                限りなく０になったかどうかを判定
            */
            if( -0.00001 < velocity && 
                velocity < 0.00001 ){
                //アニメーションを停止
                stopAnimation();
            }else{
                /*
                    変数animeCntの値を
                    読み込んだ画像の総数内の値にするための調整
                */
                animeCnt = ( animeCnt + velocity ) % allPhotoNum;
            }
            
            // カウンターの数値を整数へ変換
            nextPhotoNum = Math.floor( animeCnt );
            
            //現在表示中の画像番号　と　次に表示する画像番号が異なるか判定
            if( currentPhotoNum !== nextPhotoNum ){
                
                //次の画像を表示
                $photos.eq( nextPhotoNum ).show();
                
                //表示中の画像は非表示
                $photos.eq( currentPhotoNum ).hide();
                
                //現在表示中の画像の番号を更新
                currentPhotoNum = nextPhotoNum;
            }
        }
        
        $(window).on("resize",function(){
           
            var $window = $(this),
                winWidth  = $window.width(),
                winHeight = $window.height();
            
            /*
                画像とウィンドウのアスペクト比を比較し
                画像のアスペクト比が大きいかどうか判定
            */
            if( photoAspectRatio > winWidth / winHeight ){
                $container.css({
                    width: winHeight * photoAspectRatio,
                    height:"100%",
                    top: 0,
                    left: ( winWidth - winHeight
                          * photoAspectRatio ) / 2
                });
            }else{
                $container.css({
                    width:"100%",
                    height: winWidth / photoAspectRatio,
                    top: ( winHeight - winWidth
                         / photoAspectRatio ) / 2,
                    left:0
                });
            }
        });
        
        $(window).trigger("resize");
    }
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

$(function(){

initScene();

function initScene(){

//変数宣言

var

$container = $("#scene1st .sequencePhoto"),

$photos = $container.find("img"),

//扱う画像の総数

allPhotoNum = $photos.length,

//現在表示中の画像の番号

currentPhotoNum = 0,

//アニメーションの進行状況を格納する変数

animeCnt = 0,

//アニメーションの速度

velocity = 0,

//アニメーションを管理するタイマー

timer = null,

//画像のアスペクト比率

photoAspectRatio = 1920 / 1080;

コンテナ上で、マウスのホイールを操作した際に

発生するイベントはこの関数内で行う

$container.on("mousewheel",

function(event,delta){

if( delta < 0 ){

変数 velocityはアニメーションの

速度と方向を表します。

初期値は０：アニメーションは停止

正の値：順方向にアニメーションが変わる

負の値：逆方向にアニメーションが変わる

イベントハンドラは、

マウスホイールがどのくらい回転したかの

数値を持っている

//　velocity = velocity + 1.5　と同じ

velocity += 1.5;

}else{

if( delta > 0 ) velocity -= 1.5;

}

startAnimation();

});

//　アニメーションを開始する関数

function startAnimation(){

タイマーが起動していない場合は

animateSequence関数を

一定時間ごとに行うように設定する

if( !timer ) timer = setInterval(

animateSequence, 1000 /30 );

}

// アニメーションを停止する関数

function stopAnimation(){

clearInterval( timer );

timer = null;

}

function animateSequence(){

//新しく表示する画像の番号を格納

var nextPhotoNum;

//加算された変数velocityの値を徐々に小さくする

velocity *= 0.9;

変数velocity　*0.9を行い続けても

限りなく０に近づくだけなので、

限りなく０になったかどうかを判定

if( -0.00001 < velocity &&

velocity < 0.00001 ){

//アニメーションを停止

stopAnimation();

}else{

変数animeCntの値を

読み込んだ画像の総数内の値にするための調整

animeCnt = ( animeCnt + velocity ) % allPhotoNum;

}

// カウンターの数値を整数へ変換

nextPhotoNum = Math.floor( animeCnt );

//現在表示中の画像番号　と　次に表示する画像番号が異なるか判定

if( currentPhotoNum !== nextPhotoNum ){

//次の画像を表示

$photos.eq( nextPhotoNum ).show();

//表示中の画像は非表示

$photos.eq( currentPhotoNum ).hide();

//現在表示中の画像の番号を更新

currentPhotoNum = nextPhotoNum;

}

$(window).on("resize",function(){

var $window = $(this),

winWidth = $window.width(),

winHeight = $window.height();

画像とウィンドウのアスペクト比を比較し

画像のアスペクト比が大きいかどうか判定

if( photoAspectRatio > winWidth / winHeight ){

$container.css({

width: winHeight * photoAspectRatio,

height:"100%",

top: 0,

left: ( winWidth - winHeight

* photoAspectRatio ) / 2

});

}else{

$container.css({

width:"100%",

height: winWidth / photoAspectRatio,

top: ( winHeight - winWidth

/ photoAspectRatio ) / 2,

left:0

});

}

});

$(window).trigger("resize");

}

});