画像のスライド効果

画像スライド

作成する

左右クリック時に画像を別の画像に切り替える機能の作成

あらかじめ準備する

html、cssの使用

<div class="box">
	<img src="img/img-0.jpg" width="350" height="350" id="img">
	<h4 id="name">사과 이름 0</h4>
	<p id="txt">사과 설명 0</p>

	<a href="#" class="btn prevBtn">Prev</a>
	<a href="#" class="btn nextBtn">Next</a>
</div>

.box {
	position: relative;
    
	width: 500px;
	padding: 50px;
	background-color: #fff;
	border-radius: 5px;
	border: solid 1px black;

	margin: 100px auto;
}

.btn {
	display: inline-block;
	position: absolute;
	background-color: #cccccc;

	padding: 10px;
	color: #ffffff;
}

.prevBtn {
	top: 50%;
	left: 0;
	transform: translate(-120%, -50%);
}

.nextBtn {
	top: 50%;
	right: 0;
	transform: translate(120%, -50%);
}

配列と基点

画像のファイルパス、画像のタイトル、説明を含む配列を作成します。

ボタンをクリックして配列をナビゲートすると、htmlドキュメントに含まれる情報を置換できます。

基点を作成

var arr = [
	{
		img: "img/img-0.jpg",
		name: "사과 이름 0",
		txt: "사과 설명 0"
	},
	{
		img: "img/img-1.jpg",
		name: "사과 이름 1",
		txt: "사과 설명 1"
	},
	{
		img: "img/img-2.jpg",
		name: "사과 이름 2",
		txt: "사과 설명 2"
	},
	{
		img: "img/img-3.jpg",
		name: "사과 이름 3",
		txt: "사과 설명 3"
	}
];

// 기준점
var i = 0;

クラスのインポート

btnクラスを持つすべての領域をインポート

querySelector Allをインポートする場合は、html領域を配列と同じ形式でインポートすると見なすことができます。

0番目prevbtn 1番目nextbtnを含む構造

console.log(document.querySelectorAll('.btn'));

繰り返し文と結合

foreach反復文との組合せ

console.prevとnextをlogで印刷する

重複する文が使用されているため、アレイ内の各データが出力されます。

document.querySelectorAll('.btn').forEach(function (element, index) {
	console.log(element);
});

イベントの追加

各ボタンにaddEventでclickイベントを入れ、consoleします。「hello」をログとして入力すると、クリックするたびに「hello」が出力されます。

document.querySelectorAll('.btn').forEach(function (element, index) {

	element.addEventListener('click', function(e) {
		console.log('Hello');
	});
    
});

問題が発生

クリックするたびに上部に移動

aラベルの値(#)のため、クリックするたびに移動します

aラベルには、クリック時に他のページにジャンプしたり、他のhtmlドキュメントにジャンプしたり、他のクリエイティブな部分にジャンプしたりする機能があります。

すなわち,aタグ自体の機能が起動したことによる問題である.

私たちは純粋なボタンしか使用していないので、aラベルが持つ固有の機能を阻止します。

タグ自体をブロックする機能

e(イベントオブジェクト)をパラメータとしてe.preventDefaultを適用すると、既存の機能は消え、純粋なボタンとしてのみ使用できます

element.addEventListener('click', function(e) {

		e.preventDefault();
});

私がクリックしたaラベルがprevなのかnextなのかを知る必要があります。

このようにして、アレイ内で0,1,2,3,1を順番に実行し、逆さまに実行することを決定します。

私がクリックしたボタンがprevなのかnextなのかを知る方法はe.target propertyを使うことです

element.addEventListener('click', function(e) {

		e.preventDefault();
	console.log(e.target);
});    

クラスが存在するかどうかを確認

私がクリックした領域にクラスがあるかどうかを知るにはclasslist、containsを使用する必要があります。

検索するクラスを引数として渡す

prevクリック時prevクリックのみ次クリック時nextクリックのみ

構文を結合すると、クリックしたボタンにprevBtnクラスが含まれている場合はprevが出力され、nextBtnが含まれている場合はNextが出力されます。

document.querySelectorAll('.btn').forEach(function (element, index) {

	element.addEventListener('click', function(e) {

		e.preventDefault();

		if(e.target.classList.contains('prevBtn')) {
			console.log('Prev');
		}

		if(e.target.classList.contains('nextBtn')) {
			console.log('Next');
		}	
        
	});
});

indexを増やしたり減らしたりしてアレイデータを参照

indexの値はnextで1を増やしprev 1で1を減らし、配列内でデータをナビゲートする機能を作成します

Nextボタンをクリックするとiを1に追加

srcプロパティを使用して画像のパスを変更する

作成したarr配列にインクリメンタルインデックスを割り当てると、最初に割り当てられたデータが得られます。

textContentに対応する配列の名前とtxtを画面に出力

if(e.target.classList.contains('nextBtn')) {
			
	i++; 

			document.getElementById('img').src = arr[i].img;
			document.getElementById('name').textContent = arr[i].name;
			document.getElementById('txt').textContent = arr[i].txt;
		}	

Nextをクリックすると画像がスキップされ、文字が置換されます

3番目のデータの後にエラーが発生しました

3回目の出現では0を返すのではなくiが増加し続けるため,インデックスが4になるにつれてarr配列には4番目のデータがない.

私はあなたに持っていないデータを持って帰らせて、結局間違いが発生しました。

つまり、3番目の状態で「次へ」をクリックすると、0番目に戻さなければなりません。

if文でif文を使用する

iがarr.length(4)−1=3になると、iはコードを記述し、−1になる。

iを-1に指定するのは、ifゲート外のコードi++がすぐに0になるからです。

このコードを作成すると、3番目と0番目のimgがインポートされます。

if(e.target.classList.contains('nextBtn')) {
		
	if(i === arr.length - 1) {
		i = -1;
	}
				
	i++; 

	document.getElementById('img').src = arr[i].img;
	document.getElementById('name').textContent = arr[i].name;
	document.getElementById('txt').textContent = arr[i].txt;
}	

整理コード

var i = 0;

document.querySelectorAll('.btn').forEach(function (element, index) {

	element.addEventListener('click', function(e) {
		e.preventDefault();
        
		if(e.target.classList.contains('prevBtn')) {
		
			if(i === 0) {
				i = arr.length; 
			}
            
			i--; 

			document.getElementById('img').src = arr[i].img;
			document.getElementById('name').textContent = arr[i].name;
			document.getElementById('txt').textContent = arr[i].txt;	
		}

		if(e.target.classList.contains('nextBtn')) {
			
			if(i === arr.length - 1) {
				i = -1;
			}
				
			i++; 

			document.getElementById('img').src = arr[i].img;
			document.getElementById('name').textContent = arr[i].name;
			document.getElementById('txt').textContent = arr[i].txt;
		}	
	});
});