【jQuery】左右ボタンクリックで画像を横にスライドさせて表示

投稿者: | 2021年5月4日
0件のコメント
JQueryアイキャッチ画像

本日はJavascriptとjQueryで左右のボタンを押したら、画像が横にスライド表示できる方法を解説していきたいと思います。

まずは下記の完成後の左右のボタンをクリックして、どのような動作になるかをご確認ください。

今回は1～5までの数字5枚の画像を使用します。

 

【完成後】

画像が表示されない場合はCtrl + F5 キーを押してみてください。

 

 

それではいってみましょう！

 

手順

作成手順

・HTMLで左右ボタンと画像領域を作成

・画像を配列に格納

・画像をロード時に追加挿入

・左のボタンのクリック時の動作を作成

・右のボタンのクリック時の動作を作成

大まかですが、このような流れで作成していきます。

 

HTML

まずはHTMLで左ボタンと右ボタンと画像挿入領域を作成します。

➀左矢印のボタン

➁右矢印のボタン

➂sampleImg14506のulを作成しておいて子の最後尾に、後程jQueryでliタグを自動挿入します。

 

画像パス

今回は5枚のサンプル画像を用意して配列に格納します。

※画像がない場合はページ下の今回使用した画像をダウンロードしてご使用してもOKです。

後でimgのsrc属性に画像パスを挿入するために、変数化して配列に格納します。

1
2
3
4
5
6
7
let imgSample1 = '111.png';
let imgSample2 = '222.png';
let imgSample3 = '333.png';
let imgSample4 = '444.png';
let imgSample5 = '555.png';
 
let imgAry14506 = [imgSample1, imgSample2, imgSample3, imgSample4, imgSample5];

 

画像を挿入（jQuery）

➀繰り返し処理の（For）で画像の個数分、処理をします。

➁jQueryのappendでsampleImg14506 > ulの、子の最後尾にliのimgを追加していきます。この時にsrc属性に画像配列のimgAry14506[i]（画像パス）が挿入されます。

1
2
3
4
5
//ロード時に画像を表示
for (let i = 0; i < imgAry14506.length; i++) { //➀繰り返し処理（For）
    //➁appendで追加
    $('.sampleImg14506>ul').append('<li><img src="'+imgAry14506[i]+'"></li>');
};

 

左ボタンの処理（画像を右に移動させる）

左ボタンを作成して左ボタンを1回押す度に左の余白を設定すると、画像を右に移動させることが可能になります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let i = 0; //➀左右クリックの増減数
let moveSide14506 = -221; //➁横の移動幅
 
//➂左クリックイベント
$('.borderLeft14506').click(function() {
    // ➃左右クリックの増減が0より大きかったら処理
    if (i > 0) {
        i = i - 1; //➄右クリック回数を1個減らす
        let leftCnt14506 = moveSide14506 * i; //➅移動幅の合計
    
        //➆jQueryの:firstでliタグの先頭をanimateさせる
        $(".sample14506 li:first").animate({
            marginLeft: leftCnt14506 //➇左マージンを指定して右に移動させる
        }, {
            duration: 500 //➈移動速度
        });
    };
});

左ボタン解説

➀変数i（クリック数）で初期値を0に設定します。

（左右のクリック回数を求める為に使用します）

➁変数moveSide14506 で横の移動距離を設定します。

➂クリックイベントで左クリックした時の処理をします。

➃右ボタンが押された時のみ処理を実行するようにifで制御します。

（この処理をしないと永遠に左ボタンが有効になってしまい画像が表示領域からなくなってしまいます）

➄右クリックした回数を左ボタンを押す度に1個マイナスして右クリックした合計を差し引いて、0になった時に左ボタンが動作しないようにします。

➅移動幅をクリックした回数分（i）掛けて移動幅の合計を算出します。

（➇でマージンleft（左の余白設定）に使用するためにこの作業を実施します）

➆sample14506の子要素の画像liの先頭（li:first）を基準にanimateで移動させる処理を行います。

➇marginLeftで左のマージン（余白）をleftCnt14506（移動幅合計）で画像を右に移動させる設定をします。

➈右に画像が移動する際の速度（duration）を設定します。

 

右ボタンの処理（画像を左に移動させる）

右ボタンを作成して右ボタンを1回押す度に左の余白を設定すると、画像を左に移動させることが可能になります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let imgLen14506Waru = imgAry14506.length-1; //➀配列画像数-1を取得
 
//➁右クリックイベント
$('.borderRight14506').click(function() {
    if (i < imgLen14506Waru) { //➂配列の画像分右クリックを有効にする
 
        i = i + 1; //➃右クリックする度にクリック数(i)を1プラスする
 
        //➄移動幅の合計×クリック数(i)でマージンleft(余白)の数字を算出
        let leftCnt14506 = moveSide14506 * i;
 
        $(".sample14506 li:first").animate({ //➅li要素の先頭をアニメートさせる
            marginLeft: leftCnt14506 //➆左マージンを設定して左に移動させる
        }, {
            duration: 500 //➇移動速度
        });
    };
});

右ボタン解説

➀配列画像imgAry14506の配列数-1を取得します。

➁クリックイベントで右ボタンがクリックされた時の処理を記述します。

➂配列画像imgAry14506の配列の数だけ右ボタンがクリックで動作できるようにします。

（これをやらないと右クリックが永遠に効いて、左の余白が広がっていってしまうのでこの処理をifで制御します）

➃右クリックする度にプラスしていって、クリック回数(i)の合計を算出します。

➄moveSide14506（移動幅）×クリック数(i)で左のマージン幅を算出します。

（➆でマージンleft（左の余白設定）に使用するためにこの作業を実施します）

➅.sample14506の子要素li:first（この先頭）を基準にanimateで移動処理します。

➆marginLeft(左の余白)をleftCnt14506（移動幅合計）に設定することにより左に移動することになります。

➇durationで移動速度を設定します。

 

CSSの処理

・sample14506の画像表示部分だけ表示させて隠します。

sample14506　→　overflow: hidden;

 

・ulの部分をマイナス設定して画像を半分隠します。

・矢印ボタンはこちら

・回転角度はこちら

 

わからない場合は次の全サンプルコードをコピペしてご自身でCSSのパラメータを動かしてご確認してみてください。

 

全サンプルコード

コピペで即試せます

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
<!DOCTYPE html>
<html lang="jn">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <title>ボタンで画像スライド切り替え</title>
    <style>
        .sample14506 {
            position: relative;
            width: 225px;
            height: 195px;
            border: solid 3px;
            overflow: hidden;
        }
 
        .sampleImg14506 {
            padding-left: 0px;
            margin-top: 0;
        }
        .sampleImg14506 ul {
            margin-left: -40px;
            margin-right: -250px;
        }
        .sample14506 ul li {
            display: inline;
            padding-left: 5px;
            line-height: 100px;
        }
        .borderLeft14506 {
            position: absolute;
            top: 85px;
            left: 0;
            background: black;
            height: 20px;
            width: 20px;
            cursor: pointer;
        }
        .borderRight14506 {
            position: absolute;
            top: 85px;
            left: 205px;
            background: black;
            height: 20px;
            width: 20px;
            cursor: pointer;
        }
        .borderLeftIn14506 {
            /* 線の書式 */
            border-top: 3px solid yellow;
            border-left: 3px solid yellow;
            /* 線の長さ */
            width: 8px;
            height: 8px;
            /* 回転角度 */
            transform: rotate(-45deg);
            margin-top: 4px;
            margin-left: 4px;
        }
        .borderRightIn14506 {
            /* 線の書式 */
            border-top: 3px solid yellow;
            border-left: 3px solid yellow;
            /* 線の長さ */
            width: 8px;
            height: 8px;
            /* 回転角度 */
            transform: rotate(-225deg);
            margin-top: 4px;
            margin-left: 4px;
        }
    </style>
</head>
 
<body>
    <div class="sample14506">
        <div class="borderLeft14506">
            <div class="borderLeftIn14506"></div>
        </div>
        <div class="borderRight14506">
            <div class="borderRightIn14506"></div>
        </div>
        <div class="sampleImg14506">
            <ul></ul>
        </div>
    </div>
 
<script>
    //画像パス
    let imgSample1 = '111.png';
    let imgSample2 = '222.png';
    let imgSample3 = '333.png';
    let imgSample4 = '444.png';
    let imgSample5 = '555.png';
 
    let imgAry14506 = [imgSample1, imgSample2, imgSample3, imgSample4, imgSample5];
 
    //ロード時に画像を表示
    for (let i = 0; i < imgAry14506.length; i++) {
        $('.sampleImg14506>ul').append('<li><img src=' + imgAry14506[i] + '></li>');
    };
 
    let i = 0; //左右クリックの増減数
    let moveSide14506 = -221; //横の移動幅
 
    //左クリックイベント
    $('.borderLeft14506').click(function() {
        // 左右クリックの増減が0より大きかったら処理
        if (i > 0) {
            i = i - 1; //右クリック回数を1個減らす
            let leftCnt14506 = moveSide14506 * i; //移動幅の合計
            $(".sample14506 li:first").animate({
                marginLeft: leftCnt14506 //左マージンを指定して右に移動させる
            }, {
                duration: 500 //移動速度
            });
        };
    });
 
 
    let imgLen14506 = imgAry14506.length; //画像の配列数
    let imgLen14506Waru = imgAry14506.length-1; //配列の合計÷表示画像数
 
    //右クリックイベント
    $('.borderRight14506').click(function() {
        if (i < imgLen14506Waru) { //右クりックの合計回数より少なかったら処理
            i = i + 1; //左クリック回数を1個増やす
            let leftCnt14506 = moveSide14506 * i; //移動幅の合計
 
            $(".sample14506 li:first").animate({ //li要素の先頭をアニメートさせる
                marginLeft: leftCnt14506 //左マージンを指定して左に移動させる
            }, {
                duration: 500 //移動速度
            });
        };
    });
</script>
</body>
</html>

 

今回使用した画像5枚

111 222 333 444 555

 

まとめ

画像の余白を上手く設定することで画像が横に移動することが分かったかと思います。

あとは左右ボタンのクリック数をカウントして制御しないと永遠に画像が移動していくので、その点も注意して作成すればスムーズに作成できるかと思います。

以上です。