<html lang="ja"> <head> <meta charset="UTF-8"> <title>ここにタイトル</title> <link href="practice.css" rel="stylesheet" type="text/css"> </head> <body> <div id="slide"> <img src="pics/1.jpg"> <img src="pics/2.jpg"> <img src="pics/3.jpg"> <img src="pics/4.jpg"> </div> <script> $(function(){ //(1)ページの概念・初期ページを設定 var page=0; //(2)イメージの数を最後のページ数として変数化 var lastPage =parseInt($("#slide img").length-1); //(3)最初に全部のイメージを一旦非表示にします $("#slide img").css("display","none"); //(4)初期ページを表示 $("#slide img").eq(page).css("display","block"); //(5)ページ切換用、自作関数作成 function changePage(){ $("#slide img").fadeOut(1000); $("#slide img").eq(page).fadeIn(1000); }; //(6)~秒間隔でイメージ切換の発火設定 var Timer; function startTimer(){ Timer =setInterval(function(){ if(page === lastPage){ page = 0; changePage(); }else{ page ++; changePage(); }; },5000); } //(7)~秒間隔でイメージ切換の停止設定 function stopTimer(){ clearInterval(Timer); } //(8)タイマースタート startTimer(); /*オプションを足す場合はここへ記載*/ }); </script> </body> </html>
* { margin:0; padding:0; } #slide{ position:relative; } #slide img{ position:absolute; left:0; top:0; }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/04 08:01