Q&A
改善方法を教えて頂ければとても助かります。
「つくって覚えるjQuery入門_P184」より
jQuery
1jQuery(function($) { 2 3 let idTimer, // タイマーのid 4 idxImg; // 画像のインデックス 5 6 /* 7 * 画像を切り替える関数 8 * @param : no parameters 9 * @returns : no return values 10 */ 11 function changeImg() { 12 13 // 画像のインデックスのsrc属性値 14 const selectedSrc = $(`.thumb:eq(${ idxImg })`).attr('src'); 15 16 // メインの画像をフェードアウトする 17 $('.main').fadeOut('normal', function() { 18 19 $(this) 20 .attr({ src : selectedSrc }) // メインの画像のsrc属性値を変更する 21 .fadeIn(); // メインの画像をフェードインする 22 23 }); 24 25 idxImg++; // 画像のインデックスを次に移動（１つ増やす） 26 27 // 画像のインデックスが要素数と一致した時にタイマーを停止する 28 idxImg === $('.thumb').length // 条件式 29 && clearInterval(idTimer); // 真の場合 30 31 // ボタンを使用可能にする 32 $('#slideshow').prop({ disabled : false }); 33 34 } // function changeImg() 35 36 $('#slideshow').click(function() { 37 38 // 画像のインデックスを先頭に指定 39 idxImg = 0; 40 41 // 画面切り替えを実行 42 changeImg(); 43 44 // ボタンを使用不可にする 45 $('#slideshow').prop({ disabled : true }); 46 47 // タイマー開始 48 idTimer = setInterval(changeImg, 1000); 49 50 }); 51 52 // サムネール画像を並べ替え可能にする 53 $('#thumbGroup').sortable({ opacity : 0.5 }); 54 55 // メイン画像をリサイズ可能にする 56 $('.main').resizable({ ghost : true }); // 問題箇所：リサイズ出来ない 57 58});
HTML5
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>スライドショー</title> 6 <!-- jQuery Core 3.6.3 --> 7 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 8 <!-- jQuery UI 1.13.2 --> 9 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 10 <link href="css/style.css" rel="stylesheet"> 11 </head> 12 <body> 13 <input id="slideshow" type="button" value="スライドショー開始"> 14 <hr> 15 <div id="thumbGroup"> 16 <img class="thumb" height="90" src="img/spring_01.jpg" width="90"> 17 <img class="thumb" height="90" src="img/summer_01.jpg" width="90"> 18 <img class="thumb" height="90" src="img/autumn_01.jpg" width="90"> 19 <img class="thumb" height="90" src="img/winter_01.jpg" width="90"> 20 </div><!-- #thumbGroup --> 21 <hr> 22 <img class="main" height="320" width="320" src="img/summer_01.jpg"> 23 <script src="js/app.js"></script> 24 </body> 25</html>
CSS3
1.thumb { 2 float : left; 3 margin : 5px; 4} 5 6hr { 7 background-color : black; 8 clear : both; 9 height : 1px; 10}
回答1件
0
自己解決
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
上記のコードを設置することで解決出来ました。
投稿2023/03/30 19:44
総合スコア128
あなたの回答
tips
プレビュー
関連した質問
Q&A
2つの画像を選択するフォームを作成し、それをlocalStorageやsessionStorageを使用してサーバーを介せず別ページで表示させたい
Q&A
ハンバーガーメニューの挙動について（transitionが、もとに戻る時には適応されない）
Q&A
CSS position: absolute が効きません
Q&A
ボタンをクリックした時に、画面いっぱいにグレーのdivを透かして表示させた時、それ以降ボタンが押せなくなる。
Q&A
【PC】横スクロール可能なボックスを複数並べ、その全てのボックス内においてマウスホイールでの横スクロール操作をしたい
Q&A
サムネイル画像をクリックしてメイン画像を切り替え、もう一度クリックで画像を消す
Q&A
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。