ピックアップ

なでしこちゃん( ´ v ` )

jQuery

jQueryの練習。スマホ対応してないのでご了承ください。

01.cssのボタン

cssを利用して、ボタンの文字を切り替える。
display:none で切り替える。
 
					
.hover_on {
	display: none;
}
.hover_off {
	display: contents;
}
.click_btn:hover>.hover_on {
	display: contents;
}
.click_btn:hover>.hover_off {
	display: none;
}
					

02.jQueryのボタン

ボタンの色と文字を書き換える。
クリックでhtmlとcssの中身を書き換える。
$(".btn-02").on("click", function(){
	$(this).html("Click");
	$(this).css("background-color", "#401");
	$(this).css("color", "#fff");
});
					

03.値の取得

ボタンの値を取得する。
取得した値をアラートで表示する。
$(".btn-03").on('click', function(){
	alert($(this).html());
});
					

04.色変更、長さ取得

JavaScriptで色を切り替える。
width(),height()で要素の高さ、幅を取得し、表示する。
$(".btn-04").on("click", function(){
	const cl_title04 = ".title-04";
	const text_red = "text_red";
	const text_blue = "text-blue";

	if ($(cl_title04).hasClass(text_red)) { /*classを取得*/
		$(cl_title04).removeClass(text_red);
		$(cl_title04).addClass(text_blue);
	} else {
		$(cl_title04).removeClass(text_blue);
		$(cl_title04).addClass(text_red);
	}
});
$("#print-size-04").html("width: " + $("#box-04").width() + "px,
				 height: " + $("#box-04").height() + "px");
					

05.座標の取得

要素の座標点(x, y)を取得する。
offset().top, offset().leftで取得する。
top: ???px, left: ???px
					
$("#btn-05").on("click", function() {
	const id_box05 = "#box-05";
	$(".print_top").html($(id_box05).offset().top);
	$(".print_left").html($(id_box05).offset().left);
});
					

06.スクロール位置の表示

scroll():スクロールすると呼び出される。
scrollTop():top0を起点とし、ブラウザスクロールの位置を取得する。
scroll: ???px
$(window).scroll(function(){
	$(".print_scroll").html($(window).scrollTop());
});
					

07.画像変更方法

attr()でimg要素の属性を書き換えることができる。
  • 参考画像
  • name


				
let cnt=0;
$("#btn-07").on("click", function() {
	if (cnt==0) {
		$(".image-07").attr("src", "img/image-01.jpg");
		cnt = 1;
	} else {
		$(".image-07").attr("src", "img/og_image.png");
		cnt = 0;
	}
});
					

08.マウスホバーの処理

.hover()でホバー時の処理と、ホバーアウト時の処理を記述できる。
hover
$(".box-hover").hover(function() {
	$(this).css("background-color", "#003c3d")
		.css("color", "#fff");
}, function() {
	$(this).css("background-color", "#fff")
		.css("color", "#003c3d");
});
					

09.トグル

slideToggle()を利用すると、要素を出したり戻したりできる。
話は逸れるけど、jsでchildren()を使うと、子要素を指定できるらしい。
stop().slideToggle()とすればアニメーションを中断して実行できる。(ほえ〜)
click なでしこ
えへへー
( ´ v ` )

				
.nadeshiko {
	width: 150px;
	text-align: center;
}
.nadeshiko dt {
	background-color: #3e3e3e;
	color:#fff;
	cursor: pointer;
	border-radius: 5px 5px 0 0;
	box-shadow: 3px 3px 5px 1px rgba(0,0,0,0.5);
	transition: 0.5s;
}
.nadeshiko dd {
	display: none;
	background-color: #c3c3c3;
	border-radius: 0 0 5px 5px;
	box-shadow:
}
					
let cnt_09 = 0;
$(".toggle").children("dt").click(function() {
	if (cnt_09==0) {
		$(this).css("box-shadow", "3px 3px 5px 1px rgba(0,0,0,0)");
		cnt_09++;
	} else {
		$(this).css("box-shadow", "3px 3px 5px 1px rgba(0,0,0,0.5)");
		cnt_09--;
	}
	$(".toggle").children("dd").slideToggle(500);
});
					

10.アニメーション

動く。うおおおおおおおおおおお
止まる。すん

p( ´ v ` )J

.animation {
	position: relative;
	top: 0;
	left: 0;
}
					
$("#btn-10").click(function() {
	$(".animation").animate({"left" : "70%"}, 1000);
});
$("#btn-10-stop").click(function() {
	$(".animation").stop().animate();
});
					

11.タイマーをつくる

ただのタイマー。
一定の間隔で繰り返し処理したいときに有用である setIntervalとclearIntervalを使用。
clearInterval(setInterval)としてclearするのがキモ。
(独特な使い方だなあ)

timer: 0 s.
	let time_count = 0;
let interval_count ="";
let timer_flag = 0;

/*startボタン押下時*/
$("#time-start").click(function() {
	if (timer_flag == 0) {
		interval_count = setInterval(countFunc, 1000);
		timer_flag = 1;
	}
});
/*stopボタン押下時*/
$("#time-stop").click(function() {
	if (timer_flag != 0) {
		clearInterval(interval_count);
		timer_flag = 0;
	}

});

/*タイマーの関数*/
function countFunc() {
	time_count++;
	$(".timer_count").html(time_count);
}
					

12.アラートボックス

オリジナルのポップアップだよ。

  • 珈琲の画像

    more

    coffee
  • 自分のアイコン

    more

    icon

				
.list-box {
	display: flex;
	flex-wrap: wrap;
	margin-left: -20px;
}
.list-box li {
	position: relative;
	top: 0px;
	padding: 15px;
	width: 200px;
	margin-left: 20px;
	margin-bottom: 20px;
	text-align: center;
	background-color: #fff;
	box-shadow: 3px 3px 5px 1px rgba(0,0,0,0.3);
	transition: 0.5s;	
	cursor: pointer;
}
.img-flame {
	position: relative;
	overflow: hidden;
	background: #000;
	margin-bottom: 15px;
}
.img-flame-more {
	position: absolute;
	display: none;
	top: 50%;
	width: 100%;
	transform: translateY(-50%);
	color: #fff;
	text-align: center;
	transition: 0.5s;
}
.img-flame img{
	display: block;
	width: 200px;
	height: 200px;
	object-fit: cover;
	transition: 0.5s;
	transform: scale(1);
	opacity: 1;
}
					
/*定数*/
const box_li = $(".list-box").children("li");
const cl_img_flame__img = $(".img-flame").children("img");
const cl_bg = $(".bg");

/* アイテム:hoverのアニメーション */
const move = 5;
box_li.hover(function() {
	$(this).css("top", "-"+move+"px");
	$(this).css("box-shadow", "3px "+(move+3)+"px 5px 3px rgba(0,0,0,0.2)");
	$(this).children(".img-flame").children("img").css("transform", "scale(1.1)");
	$(this).children(".img-flame").children("img").css("opacity", "0.4");
	$(this).children(".img-flame").children(".img-flame-more").fadeIn(300);

}, function() {
	$(this).css("top", "0px");
	$(this).css("box-shadow", "3px 3px 5px 1px rgba(0,0,0,0.3)");
	$(this).children(".img-flame").children("img").css("transform", "scale(1.0)");
	$(this).children(".img-flame").children("img").css("opacity", "1");
	$(this).children(".img-flame").children(".img-flame-more").fadeOut(300);
});

/*読み込み時、アラートを非表示*/
cl_bg.hide();

/*背景押下時、アラートを閉じる*/
$(".bg").click(function() {
	if (!$(event.target).closest('.bg-box').length) {
		cl_bg.fadeOut(500);
	}
});

/* キャンセルボタンの判定 */
$(".bg-box-cancel").click(function() {
	cl_bg.fadeOut(500);
});

/*アイテムクリック時、アラートを表示*/
let img_src="";
box_li.click(function() {
	 img_src = $(this).children(".img-flame").children("img").attr("src");
	$("#bg_img").attr("src", img_src);
	cl_bg.fadeIn(500);
});
					

13.タブ

タブをつくるよ。
学ぶべきポイントは、コンテンツの表示切り替えは一度すべてのコンテンツを非表示にし、対象を表示する、という手順を踏む。

na

なでしこの「な」は、悩ましいの「な」

de

なでしこの「で」は、デンジャラスの「で」

shi

なでしこの「し」は、しっかりものの「し」

ko

なでしこの「こ」は、恋しいの「こ」


				
.tab-list {
	display: flex;
}
.tab-list li {
	border-left: 2px solid #4e4e4e;
	background-color: #3e3e3e;
	font-weight: 400;
}
.tab-list li:first-of-type {
	border-left: 0;
}
.tab-list li a.current {
	background-color: #e3e3e3;
	color: #3e3e3e;
}
.tab-list li a {
	display: block;
	padding: 10px 30px;
	box-sizing: border-box;
	color: #e3e3e3;
}
.contents {
	background-color: #e3e3e3;
	padding: 15px;
}
					
const tab_a = $(".tab-list").children("li").children("a");

/*current以外を非表示*/
$(".contents div[id != 'tab1']").hide();

/*tab click時*/
tab_a.click(function() {
	/*current設定*/
	tab_a.removeClass("current");
	$(this).addClass("current");

	/*contentsの表示切り替え*/
	$(".contents").children("div").hide();
	$($(this).attr("href")).show();

	/*hrefで遷移しないようにする*/
	return false;
});
					

14.追従menu

画面サイズを取得して、scrollTop()に加算することで、画面下部にボタンを作成できる。

let start_pos = 0;
$(window).scroll(function(){
	let current_pos = $(this).scrollTop();

	$(".btn-trigger")
		.stop().animate({"top" : current_pos + $(this).height() - $(".btn-trigger").height() - 25}, 500);		
});
					

15.LightBox風window

htmlをjsで用意する実装方法。画像を中央に配置する方法がtop:0;left:0;right:0;bottom:0;width:XXpx;height:XXpx;。アラートを元に戻す方法がキモ。
  • gaminのicon
  • coffee
  • tori

				
#modern-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 100;
	background-color: rgba(0,0,0, 0.4);
}
#photo {
	position: fixed;
	z-index: 110;
	top:0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	max-width: 600px;
	max-height: 400px;
}
					
$(".photo-item").children("a").click(function() {
	$("body").append('<div id="modern-bg">');
	$("body").append('<div id="photo">');

	$("#modern-bg").hide();
	$("#photo").hide();
	$("#photo").html('<img>');

	$("#photo img").attr("src", $(this).attr("href"));
	$("#photo img").attr("width", 600);
	$("#photo img").attr("height", 400);
	$("#photo img").attr("alt", "photo");

	$("#modern-bg").fadeIn();
	$("#photo").fadeIn();

	$("#modern-bg").click(function() {
		$(this).fadeOut(function() {
			$(this).remove();
		});
		$("#photo").fadeOut(function() {
			$(this).remove();
		});
	});

	return false;
});
					

16.画像キャプション表示

ホバーのアニメーション。自分のやり方と少し違った。
altの値を読み込んで表示させる。
ホバー時に表示するdv,pタグをJavaScriptで生成している。 その方が、htmlで繰り返し書く必要がないので楽?

  • 栄の喫茶店で撮影。チーズケーキと一緒に。
  • ごきげんようです。地球人類さん、gmainです。
  • 某の某船に乗って撮影した鳥です。
<ul class="list-16">
	<li class="item-16"><img src="img/image-01.jpg" alt="栄の喫茶店で撮影。チーズケーキと一緒に。"></li>
	<li class="item-16"><img src="img/og_image.png" alt="ごきげんようです。地球人類さん、gmainです。"></li>
	<li class="item-16"><img src="img/tori.jpg" alt="某の某船に乗って撮影した鳥です。"></li>
</ul>
					
.list-16 {
	display:flex;
	flex-flow: wrap;
	margin-left: -15px;
}
.item-16 {
	position: relative;
	width: 200px;
	height: 200px;
	margin-left: 15px;
	margin-bottom: 15px;
	overflow: hidden;
	color: #fff;
	line-height: 2rem;
}
.item-16 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: 0.5s;
}
.item-16 div {
	position:absolute;
	display: none;
	width: 100%;
	height: 100%;
	padding: 20px;
	background-color: rgba(0,0,0,0.4);
	top: 0;
	left: 0;
	box-sizing: border-box;
}
.item-16 p {
	position: relative;
	top: 10px;
}
					
$(".item-16").append("<div>");
$(".item-16 div").each(function() {
	$(this).html("<p>" + $(this).parent().children("img").attr("alt") + "</p>");
});


$(".item-16").hover(function() {
	$(this).children("div").stop().fadeIn(300);
	$(this).children("img").css("transform", "scale(1.1)");
	$(this).children("div").children("p").stop().animate({"top" : 0}, 300);	
	
}, function() {
	$(this).children("div").stop().fadeOut(300);
	$(this).children("img").css("transform", "scale(1)");
	$(this).children("div").children("p").stop().animate({"top" : "10px"}, 300);	
});
					

17.ツールチップ

ホバー時に吹き出しを出す方法。 ボーダーをうまく使って、吹き出しの矢印部分を再現するという小技。 「ぷろみす」で非同期処理できる。文法を丸パクして実装したから細かいとこは要勉強。 非同期処理することでfadeOutとremoveを順番に実行した。

  • 珈琲
  • gamin
  • 鳥
#tooltip {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 10px;
	padding: 10px 15px;
	background-color: #3e3e3e;
	color: #fff;
}
#tooltip:after {
	content: " ";
	position: absolute;
	left: 50%;
	margin-left: -8px;
	width: 0;
	border-top: 18px solid #3e3e3e;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
}
					
$(".tooltip").hover(function() {
	/*html生成*/
	$(this).append('<div id="tooltip"><p></p></div>');
	$("#tooltip p").html($(this).children("img").attr("alt"));
	
	/*一旦、非表示*/
	$("#tooltip").hide();
	
	/*表示位置の指定*/
	$("#tooltip").css("top", - $("#tooltip").height() - 18);
	$("#tooltip").css("left",  $(this).width()/2 - $("#tooltip").width()/2);
	
	/*表示*/
	$("#tooltip").fadeIn(300);
	
}, function() {

	/*非同期処理*/
	const promise = new Promise((resolve, reject) => {
			setTimeout(() => { 
					$("#tooltip").fadeOut(300);
					resolve();
			});
	});
	promise.then(() => $("#tooltip").remove());	
	
});
					

18.list-box(上位互換)

list-boxのitemの高さを全て揃えることができる。
each()ですべてのitemの高さを取得(each()は生jsでいうforで全てのitemをまわしているのか?)したのち、最大の高さの値を取得。jsでcssに設定する。

  • 珈琲の画像

    more

    coffeeの画像です。珈琲が大好きで、毎朝欠かさず飲んでいます。飲まないと落ち着かないのです。
  • 自分のアイコン

    more

    icon
  • 自分のアイコン

    more

    icon
  • 自分のアイコン

    more

    icon
  • 自分のアイコン

    more

    私です。性別は男ですが、性別詐欺しようと思ったわけではありません。
let li_height = 0;
$(".list-18 li").each(function() {
	let h = $(this).height();
	if (h > li_height) {
		li_height = h;
	}
});

$(".list-18 li").css("height", li_height + "px");
					

19.parallax効果

横スライドの実装。さらには 視差効果を利用して、背景を動かす。発想が天才。
またaのhtmlを無効化しつつ、jsで利用する。考えた人すごい。
レスポンシブ対応していないので、スマホで見るとぐちゃぐちゃです。

title1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

title2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

title3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

title4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div id="bg19-1">
	<div id="bg19-2">
		<div id="bg19-3">
			<div id="main-19">
				<div id="slide">
					<div id="sections">
						<section>
							<h4>title1</h4>
							section内容
						</section>
						<section>
							<h4>title2</h4>
							section内容
						</section>
						<section>
							<h4>title3</h4>
							section内容
						</section>
						<section>
							<h4>title4</h4>
							section内容
						</section>
					</div>
				</div>
				<ul class="slide-btn-list">
					<li class="slide-btn"><a href="#" class="current">1</a></li>
					<li class="slide-btn"><a href="#">2</a></li>
					<li class="slide-btn"><a href="#">3</a></li>
					<li class="slide-btn"><a href="#">4</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>
					
#bg19-1 {
	color: #664949;
	background: #6cd8ff url(../img/bg.png) 0 100% repeat-x;
	transition: background 0.3s;
}
#bg19-2 {
	height: 100%;
	background: url(../img/bg1.png) 0 100% repeat-x;
	transition: background 0.3s;
}
#bg19-3 {
	background: url(../img/bg2.png) 0 100% repeat-x;
	transition: background 0.3s;
}
#main-19 {
	display:block;
	width:900px;
	background:url(../img/left.png) no-repeat, url(../img/right.png) no-repeat 100% 0;
	margin:0 auto;
}
#slide {
	position: relative;
	overflow: hidden;
	display: block;
	width: 700px;
	height: 250px;
	margin: 0 auto;
}
#sections {
	position: absolute;
	width: 2800px;
	height: 100%;
}
#sections section {
	float:left;
	width: 700px;
}
.slide-btn-list {
	clear:both;
	text-align:center;
	margin-left: -35px;
}
.slide-btn {
	display:inline-block;
	margin-left: 35px;
}
.slide-btn a{
	text-indent: -9999px;
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 8px;
	background-color: #664949;
}

.slide-btn a.current{
	background:#988080;
}

					
$(".slide-btn a").on("click", function(){
	let dis = $(this).html() - 1;
	$("#sections").animate({"left" : dis* -700 + "px"}, 300);

	$("#bg19-1").css("background-position", dis * -20 + "px 100%");
	$("#bg19-2").css("background-position", dis * -150 + "px 100%");
	$("#bg19-3").css("background-position", dis * -200 + "px 100%");
	return false;
});
					

20.アコーディオンパネル

正直使いづらい。レスポンシブに適していない。max-widthにすれば、画面上問題ないが、animateの動作が不自然で美しくなかった。

1
ごきげんようです、地球人類さん。
銀河アリスです。
銀河アリスです。
銀河アリスです。
銀河アリスです。
2
はい銀河! 銀河アリスです。
銀河アリスです。
銀河アリスです。
銀河アリスです。
3
今後とも、よろしくおねげーしやす。
4
事務作業してるだけじゃん。
<dl class="acc-dl clearfix">
	<dt><a href="#acc1" class="currentBtn">1</a></dt>
	<dd id="acc1" class="current">
		ごきげんようです、地球人類さん。<br>
		銀河アリスです。<br>
		銀河アリスです。<br>
		銀河アリスです。<br>
		銀河アリスです。<br>
	</dd>
	<dt><a href="#acc2">2</a></dt>
	<dd id="acc2">
		はい銀河!
		銀河アリスです。<br>
		銀河アリスです。<br>
		銀河アリスです。<br>
		銀河アリスです。<br>
	</dd>
	<dt><a href="#acc3">3</a></dt>
	<dd id="acc3">
		今後とも、よろしくおねげーしやす。
	</dd>
	<dt><a href="#acc4">4</a></dt>
	<dd id="acc4">
		事務作業してるだけじゃん。
	</dd>
</dl>
					
.acc-dl dt{
	float: left;
	background-color: #3e3e3e;
	width: 30px;
	height: 350px;
	text-align: center;
}
.acc-dl dt a {
	display: block;
	color: #fff;
	line-height: 350px;
}
.acc-dl dd {
	float: left;
	background-color: #e3e3e3;
	width: 800px;
	height: 350px;
	overflow: hidden;
}
					
$(".acc-dl dd[id != 'acc1']").css("width", "0px");

$(".acc-dl dt a").on("click", function() {
	if (!$(this).hasClass("currentBtn")) {
		let s=""
		if(disp_size == "pc") {
			s = "800px";
		} else {
			s = "100px"
		}
		$(".current").animate({"width" : "0px"}, 300);
		$($(this).attr("href")).animate({"width" : s}, 300);
		$(".current").removeClass("current");
		$($(this).attr("href")).addClass("current");
		$(".currentBtn").removeClass("currentBtn");
		$(this).addClass("currentBtn");
	} 

	return false;
});
					

21.スライドメニュー

横幅がmax-widthになっているせいで、スライドが介入してくると、レイアウトが崩れてしまう。 bodyまでスライドしてしまうスライドメニューはレスポンシブに合わないかもしれない?

<nav class="menu-nav">
	<ul></ul>
</nav>
					
.menu-nav {
	position: fixed;
	z-index: 10;
	top:0;
	right: -270px;
	box-sizing: border-box;
	padding: 15px;
	width: 270px;
	height: 100%;
	background-color: #5c7079;
  /* 縦方向のスクロールバーを表示 */
  overflow-y: scroll;
  /* スマホ用の慣性スクロール */
  -webkit-overflow-scrolling: touch;
}
.menu-nav li {
	margin-bottom: 15px;
}
.menu-nav li a {
	color: #fff;
}
					
//書くサブタイトルをナビゲーションに反映する
$("h3").each(function() {
	$(".menu-nav ul").append("<li><a href=#" + $(this).parent("div").attr("id") + ">" + $(this).html() + "<a/></li>");
});

let div = 270;
$(".btn-trigger").on("click", function() {
	$(".menu-nav").animate({"right": "+=" + div}, 200);
	$("body").animate({"margin-left": "-=" + div}, 200);
	div *= -1;
});

$(".menu-nav li a").on("click", function() {
	$(".menu-nav").animate({"right": "+=" + div}, 200);
	$("body").animate({"margin-left": "-=" + div}, 200);
	div *= -1;

 $("html, body").animate({scrollTop : $($(this).attr("href")).offset().top}, 700);
	$(".btn-trigger").toggleClass("active");
	$(".navigation").fadeToggle(500);

	return false;
});
					

22.menuハイライト

現在表示しているページタイトルをハイライトにする。 (spだと位置がずれるのでうまくいっていない。)

.nav-current {
	background-color: #003c3d;
}
					
$(window).scroll(function() {
	for (let i=1; i <= $("h3").length; i++) {
		if ($("div:nth-child(" + i + ")").offset().top - 300< $(window).scrollTop()) {
			$(".menu-nav ul li").removeClass("nav-current");
			$(".menu-nav ul li:nth-child(" + i + ")").addClass("nav-current");
		}
	}
});
					

23.スライドショー

setInterval()の復習。flexdで画像を重ねる。

<div class="in-slide">
	<ul>
		<li><img src="img/tori.jpg" alt="img1"></li>
		<li><img src="img/image-01.jpg" alt="img2"></li>
		<li><img src="img/og_image.png" alt="img3"></li>
	</ul>
</div>
<div class="slide-btn23">
	<ul>
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
	</ul>
</div>
					
.in-slide {
	margin-bottom: 16px;
	width: 100%;
	height: 50vw;
}
.in-slide ul {
	position: relative;
}
.in-slide ul li {
	position: absolute;
	width:100%;
}
.in-slide ul li img {
	width: 1000px;
	height: 50vw;
	object-fit: cover;
}
.slide-btn23 {
}
.slide-btn23 ul {
	display: flex;
	justify-content:center;
	margin-left: -15px;
}
.slide-btn23 ul li a {
	text-indent: -9999px;
	text-decoration: none;
	display: block;
	margin-left: 8px;
	width: 14px;
	height: 14px;
	border-radius: 7px;
	background-color: #a8dcdb;
}
.slide-btn23 ul li a.target {
	background-color: #000;
}
					
let cnt23 = $(".in-slide li").length;
let current23 = 1;
let next23 = 2;
let timer23;
//スライドのインターバル
const interval = 3000;
//fadeIn/Outの速度
const duration = 500;
console.log(cnt23);

$(".in-slide li:not(:first-child)").hide();

//intrvalごとにslideTimer関数を実行
timer23 = setInterval(slideTimer, interval);

$(".slide-btn23 li a").on("click", function() {
	next23 = $(this).html();

	//インターバルをリセット
	clearInterval(timer23);
	timer23 = setInterval(slideTimer, interval);

	slideTimer();

	return false;
});

//スライドの切り替えを実行する。
function slideTimer() {
	$(".in-slide li:nth-child(" + current23 + ")").fadeOut(duration);
	$(".in-slide li:nth-child(" + next23 +")").fadeIn(duration);

	//target-btnの装飾
	$(".slide-btn23 li a").removeClass("target");
	$(".slide-btn23 li:nth-child(" + next23 + ") a").addClass("target");

	current23 = next23;
	next23++;
	if (next23>cnt23) next23 = 1; 
}
					

24.画像のズーム

マウス動作時に処理を実行する方法(mousemove)。マウスの位置を取得(e.pageX/Y)→取得した画像の位置(offset().top/offset().left)と比較。画像のサイズを取得(.width()/.height())。取得した位置を拡大した分だけ掛け合わせ、zoom画像のtop,leftの位置を設定。なお、top,leftは必然的に負の値となる。

thumbnail
zoom
<div id="thumb">
	<img src="img/thumb.jpg" width="400" height="400" alt="thumbnail">
	<span class="thumb-span"></span>
</div>
<div id="zoom">
	<img src="img/zoom.jpg" width="4000" height="4000" alt="zoom">
</div>
					
#thumb{
	width:400px;
	height:400px;
	float:left;
}

#thumb img{
	width:100%;
}

.thumb-span{
	width:40px;
	height:40px;
	position:absolute;
	display:none;
	border:1px solid #83828A;
	background:rgba(131, 130, 138, .5);
}

#zoom{
	width:400px;
	height:400px;
	overflow:hidden;
	float:right;
	position:relative;
}

#zoom img{
	position:absolute;
	top:0;
	left:0;
	max-width:none;
	height: auto;
}
					
//ズームのspanサイズを設定
const spanSize = $(".thumb-span").width();
$(window).mousemove(function(e) {

//thumbのX座標
let thumbLeft = $("#thumb").offset().left;
//thumbのY座標
let thumbTop = $("#thumb").offset().top;
//thumbのwidth
let thumbWidth = $("#thumb").width();
//thumbHeight
let thumbHeight = $("#thumb").height();

//マウスの位置ががthumbに収まっているか
if (e.pageX > thumbLeft && e.pageX <= thumbLeft +  thumbWidth
		&& e.pageY > thumbTop	&& e.pageY <= thumbTop + thumbHeight) 
{
	//マウスの位置:X座標
	let posX = e.pageX;
	//マウスの位置:Y座標
	let posY = e.pageY;
	
	//X:left
	if (e.pageX <= thumbLeft + spanSize/2) {
		posX = thumbLeft;
	//X:right
	} else if (e.pageX >= thumbLeft + thumbWidth - spanSize/2) {
		posX = thumbLeft +thumbWidth - spanSize;
	//X:center
	} else {
		//spanの中央に位置を修正
		posX -= spanSize/2;
	}
	
	//Y:top
	if (e.pageY <= thumbTop + spanSize/2) {
		posY = thumbTop;
	//Y:bottom
	} else if (e.pageY >= thumbTop + thumbHeight - spanSize/2) {
		posY = thumbTop + thumbHeight - spanSize;
	//Y:center
	} else {
		posY -= spanSize/2;
	}
	
	$(".thumb-span").css({"top":posY, "left":posX});
	$(".thumb-span").show();
	
	$("#zoom img").css({"top":(thumbTop - posY)*10, "left": (thumbLeft-posX)*10});
} else {
	$(".thumb-span").hide();
}
});