自動切り替えバナーの作成（jQuery）

2019年10月23日 12:27

Webデザイン技能検定２級の受験勉強用に、
画像が自動で切り替わるバナーを作った時の備忘録。

（１）htmlファイルを記述

<!DOCTYPE html>
<html language="ja">

<!-- 文字コードセット　-->
<meta charset="utf-8">

<!-- ヘッダ情報　-->
<head>
   <!-- jQuery情報　-->
   <script type="text/javascript" src="jquery/jquery-3.4.1.js"></script>

   <script type="text/javascript"　 src="anime.js"></script>
   <!-- CSS情報　-->
   <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
   <div class="bannerDiv">
       <ul class="bannerUl">
           <li><img src="img/t1.jpg" alt="banner_1" title="banner_1"></li>
           <li><img src="img/t2.jpg" alt="banner_2" title="banner_2"></li>
           <li><img src="img/t3.jpg" alt="banner_3" title="banner_3"></li>
       </ul>
   </div>
</body>

「ul ＋ li」タグですべての画像を記載しておく。

（２）CSSの表示設定

/* ・画像１枚と同じサイズのwidth */
div.bannerDiv{
   border: 1px solid rgb(0,0,139);
   overflow: hidden;
   width:800px;
   margin: 0px;
}

/* ・widthは全部の画像サイズ
　 ・余白は0（divサイズ目いっぱいにULが展開されるように設定）
*/
ul.bannerUl{
   list-style: none;
   width: 2400px;
   margin:0px;
   padding:0px;
}

/* ・floatで横並び
　 ・画像１枚と同じサイズのwidth
*/
ul.bannerUl > li{
   float: left;
   width: 800px;
   margin: 0px;
}

ul li img{
   vertical-align: bottom;
}

divは画像１枚分、ulは全画像サイズ分のwidthで定義しておく。

（３）jsファイルを記述

$(function(){
   var imgNum = 3;     //画像の枚数
   var imgSize = 800;  //画像のサイズ
   var time = 2000;    //切り替えのタイミング
   var current = 0;    //現在の画像

   // 一定の間隔（2000ms）で処理を実行
   setInterval(function(){

       if( current < imgNum-1 ) {
       
           current++;
       
           $(".bannerUl").animate({
               marginLeft : parseInt($(".bannerUl").css("margin-left"))-imgSize+"px"
           },"fast");
       
       //最後の画像にきたら最初に戻る
       } else {
       
           $(".bannerUl").animate({
               marginLeft : parseInt($(".bannerUl").css("margin-left"))+(imgSize * (imgNum-1))+"px"
           },"fast");
       
           current = 0;
       }
   }, time);
});