スライドする画像
最終更新日時 :
1人が閲覧中
スライドする画像
| 設定 タイトル「スライドする画像」 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <title>スライドする画像</title> |
| CSS 箱(スライダー)の 横「100％」 はみ出し「見えない」 箱(スライド)を 横に並べる スライドの画像の 横「100％」 フレックス縮む「なし」 | <style> .スライダー { width: 100%; overflow: hidden; } .スライド { display: flex;} .スライド img { width: 100%; flex-shrink:0;} |
| 中身 箱(スライダー) ・箱(スライド) ・・画像「○○.png」 ・・画像「△△.png」 ・・画像「××.png」 ・・画像「○○.png」 | </style></head><body> <div class="スライダー"> <div class="スライド"> <img src="〇〇.png" alt="画像1"> <img src="△△.png" alt="画像2"> <img src="××.png" alt="画像3"> <img src="〇〇.png" alt="画像1"> </div> </div> |
| JS 読み込み時実行 数字=1 スライダー幅=箱(スライダー)の横 ブラウザサイズ変更時→スライダー幅=箱(スライダー)の横 ３秒ごとにスライドプログラムを実行 スライドプログラム 数字が１なら 箱(スライド)のCSSを左に移動「数字×スライダー幅」移動時間「0.5秒」 数字=2 数字が2なら 箱(スライド)のCSSを左に移動「数字×スライダー幅」移動時間「0.5秒」 数字=3 数字が3なら 箱(スライド)のCSSを左に移動「数字×スライダー幅」移動時間「0.5秒」 数字=1 1秒後に実行→ 数字が１なら 箱(スライド)のCSSを左に移動「0」移動時間「0秒」 終了 | <script> $(function() { let 数字 = 1; let スライダー幅 = $('.スライダー').width(); $(window).on('resize', function() { スライダー幅 = $('.スライダー').width(); }); setInterval(スライド移動プログラム, 3000); function スライド移動プログラム() { if (数字 === 1) { $('.スライド').css({ 'transform': `translateX(${-スライダー幅 * 数字}px)`, 'transition': 'transform 0.5s ease-in-out' }); 数字 = 2; } else if (数字 === 2) { $('.スライド').css({ 'transform': `translateX(${-スライダー幅 * 数字}px)`, 'transition': 'transform 0.5s ease-in-out' }); 数字 = 3; } else if (数字 === 3) { $('.スライド').css({ 'transform': `translateX(${-スライダー幅 * 数字}px)`, 'transition': 'transform 0.5s ease-in-out' }); 数字 = 1; setTimeout(function() { $('.スライド').css({ 'transform': 'translateX(0px)', 'transition': 'transform 0s ease-in-out' }) }, 1000); } } }); </script></body></html> |
コメント (スライドする画像)
この記事を作った人
編集者紹介
未登録
