Bài tập javascript 15 - Viết hiệu ứng chuyển slide nâng cao phần 2

Ở bài tập javascript 15 này, chúng ta sẽ tiếp tục với hiệu ứng chuyển slide ở bài trước thì bằng 2 nút mình đã chuyển qua lại tất cả các slide. Trong bài tập này mình sẽ thêm chuyển động animation vào lúc slide đang được chuyển. Okê mình xin được bắt đầu bài viết.

Kiến thức cần có:

Biến
Câu lệnh if – else
Vòng lặp for
Mảng
Hàm
Event
HTML DOM
HTML DOM previousElementSibling Property

Bài tập javascript 15 – Viết hiệu ứng chuyển slide nâng cao phần 2

Mô tả bài tập: Click vào nút next chuyển đến slide tiếp theo, click vào nút back quay lại slide trước đó. Lúc slide được chuyển thì xảy ra hiệu ứng scale ở slide vào và slide ra.

Demo:

Click vào bài tập js 15 để xem kết quả.

Mình sẽ code và giải thích chi tiết ở ngay phía sau.

Code: html

	<!DOCTYPE html>
	<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width = device-width, initial-scale = 1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="1.css">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
	</head>
	<body>
		<div class="wraper">
			<div class="slides">
					<ul>
						<li style="background-image: url(https://images.wallpaperscraft.com/image/dota_2_traxe_drow_ranger_art_milimalism_97328_1280x720.jpg)">
						<li style="background-image: url(https://images.wallpaperscraft.com/image/the_elder_scrolls_online_sword_of_the_night_warrior_assassin_95957_1366x768.jpg);">
						</li>
						<li class="hienlen" style="background-image: url(https://images.wallpaperscraft.com/image/battlefield_hero_warrior_paint_96182_1366x768.jpg);">
						</li>
						<li style="background-image: url(https://images.wallpaperscraft.com/image/the_legend_of_zelda_horse_plain_river_sunlight_zelda_22309_1366x768.jpg);">
						</li>
						<li style="background-image: url(https://images.wallpaperscraft.com/image/battlefield_soldier_face_helmet_tank_15747_1366x768.jpg);">
						</li>
						<div class="color" style="background-color:black; width: 100%; height: 100%">
							
						</div>
					</ul>
			</div>
			<div class="nut">
				<ul>
					<li>
						<i class="far fa-caret-square-left"></i>
					</li>
					<li>
						<i class="far fa-caret-square-right"></i>
					</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript" src="1.js"></script>
	</body>
	</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

</li>

</li>

</li>

</li>

</div>

</ul>

</div>

<ul>

<li>

</li>

<li>

</li>

</ul>

</div>

</body>

</html>

Code: css

*{
	padding:0;
	margin:0;
	border:none;
}
html,body,.wraper,.slides,ul,li{
	width: 100%;
	height: 100%;
}
.wraper {
    position: relative;
    overflow: 
}
.slides ul li{
	background-color:black !important;
	background-size: cover;
}

.nut ul li i {
    font-size: 40px;
}

.slides ul li {
    position: absolute;
}
.nut {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
}

.nut ul li {
    display: inline;
    cursor: pointer;
}
.nut ul li i{
	transition: 0.5s;
}
.nut ul li:hover i{
	color:white;
	transition: 0.5s;
}
.slides ul li{
	opacity: 0 ;
}
ul li.hienlen{
	opacity: 1; 
	transition: 0.5s;
}
/*Viet hieu ung ra vao cho cac slide*/
.hieuungvao{
	background-color: black;
	animation: hieuungvao 1s forwards;
}
@-webkit-keyframes hieuungvao{
	from{transform: scale(0.8);opacity: 0;}
	to{transform: scale(1);opacity: 1;}
}
.hieuungra{
	background-color: black;
	animation: hieuungra 1s forwards;
}
@-webkit-keyframes hieuungra{
	from{transform: scale(1);opacity: 1;}
	to{transform: scale(2);opacity: 0;}
}

padding:0;

margin:0;

border:none;

}

html,body,.wraper,.slides,ul,li{

width: 100%;

height: 100%;

}

.wraper {

position: relative;

overflow:

}

.slides ul li{

background-color:black !important;

background-size: cover;

}

.nut ul li i {

font-size: 40px;

}

.slides ul li {

position: absolute;

}

.nut {

position: absolute;

bottom: 0px;

left: 50%;

transform: translateX(-50%);

}

.nut ul li {

display: inline;

cursor: pointer;

}

.nut ul li i{

transition: 0.5s;

}

.nut ul li:hover i{

color:white;

transition: 0.5s;

}

.slides ul li{

opacity: 0 ;

}

ul li.hienlen{

opacity: 1;

transition: 0.5s;

}

/*Viet hieu ung ra vao cho cac slide*/

.hieuungvao{

background-color: black;

animation: hieuungvao 1s forwards;

}

@-webkit-keyframes hieuungvao{

from{transform: scale(0.8);opacity: 0;}

to{transform: scale(1);opacity: 1;}

}

.hieuungra{

background-color: black;

animation: hieuungra 1s forwards;

}

@-webkit-keyframes hieuungra{

from{transform: scale(1);opacity: 1;}

to{transform: scale(2);opacity: 0;}

}

Code: JS

document.addEventListener('DOMContentLoaded',function(){	
var nut = document.querySelectorAll('.nut ul li'),
	nuttrai = nut[0];
	nutphai = nut[1];
var slides = document.querySelectorAll('.slides ul li');
var vitrislideht = 2;


chuyenslide = function(){ 
	vitrislideht = vitrislideht - 1;
	for(var i = 0 ; i < slides.length; i++){
		slides[i].classList.remove('hienlen');
		slides[i].classList.remove('hieuungra')
		slides[i].classList.remove('hieuungvao');
	}
	if(vitrislideht == 0){
		vitrislideht = slides.length - 1;
		slides[vitrislideht].classList.add('hienlen')
		slides[0].classList.add('hieuungra')
		slides[vitrislideht].classList.add('hieuungvao');
	}
	else
	{
	slides[vitrislideht].classList.add('hienlen');
	slides[vitrislideht+1].classList.add('hieuungra')
	slides[vitrislideht].classList.add('hieuungvao');
	}
}
chuyenslide2 = function(){
	var slideht = document.querySelector('.slides ul li.hienlen');
	var vitri = 0;
	for(var i = 0 ; slideht = slideht.previousElementSibling; vitri ++){
		// Vong lap nay se dung khi ma slideht = null
	}// Lay dc vi tri cua slide hien tai sau khi thuc hien vong lap for nay
	for(var i = 0 ; i < slides.length; i++){
		slides[i].classList.remove('hienlen');
		slides[i].classList.remove('hieuungra')
		slides[i].classList.remove('hieuungvao');
	}
	if(vitri == slides.length-1){
		vitri = 0;
		slides[vitri].classList.add('hienlen');
		slides[4].classList.add('hieuungra');
		slides[vitri].classList.add('hieuungvao');

	}
	else{
		slides[vitri + 1].classList.add
		('hienlen');
		slides[vitri+1].classList.add('hieuungvao');
		slides[vitri].classList.add('hieuungra')
	}

}
nuttrai.addEventListener('click',chuyenslide);
nutphai.addEventListener('click',chuyenslide2);

},false)

document.addEventListener('DOMContentLoaded',function(){

var nut = document.querySelectorAll('.nut ul li'),

nuttrai = nut[0];

nutphai = nut[1];

var slides = document.querySelectorAll('.slides ul li');

var vitrislideht = 2;

chuyenslide = function(){

vitrislideht = vitrislideht - 1;

for(var i = 0 ; i < slides.length; i++){

slides[i].classList.remove('hienlen');

slides[i].classList.remove('hieuungra')

slides[i].classList.remove('hieuungvao');

}

if(vitrislideht == 0){

vitrislideht = slides.length - 1;

slides[vitrislideht].classList.add('hienlen')

slides[0].classList.add('hieuungra')

slides[vitrislideht].classList.add('hieuungvao');

}

else

{

slides[vitrislideht].classList.add('hienlen');

slides[vitrislideht+1].classList.add('hieuungra')

slides[vitrislideht].classList.add('hieuungvao');

}

chuyenslide2 = function(){

var slideht = document.querySelector('.slides ul li.hienlen');

var vitri = 0;

for(var i = 0 ; slideht = slideht.previousElementSibling; vitri ++){

// Vong lap nay se dung khi ma slideht = null

}// Lay dc vi tri cua slide hien tai sau khi thuc hien vong lap for nay

for(var i = 0 ; i < slides.length; i++){

slides[i].classList.remove('hienlen');

slides[i].classList.remove('hieuungra')

slides[i].classList.remove('hieuungvao');

}

if(vitri == slides.length-1){

vitri = 0;

slides[vitri].classList.add('hienlen');

slides[4].classList.add('hieuungra');

slides[vitri].classList.add('hieuungvao');

}

else{

slides[vitri + 1].classList.add

('hienlen');

slides[vitri+1].classList.add('hieuungvao');

slides[vitri].classList.add('hieuungra')

}

nuttrai.addEventListener('click',chuyenslide);

nutphai.addEventListener('click',chuyenslide2);

},false)

Kết quả:

File js:

Trong bài này mình sử dụng 2 cách viết khác nhau để chuyển slide cho nút trái và slide cho nút phải, cách viết nút phải sử dụng phương thức previousElementSibling trong bài trước rồi nên mình sẽ giải thích nữa nhé.
Còn viết cho nút trái, thứ nhất mình cần xác định vị trí của slide bắt đầu, vị trí của nó là 2 vì thế mình sẽ khởi tạo biến vitrislideht = 2. Tiếp đến trong function chuyenslide mình sẽ để biến vitrislide — , tương đương với vitrislide = vitrislide – 1. Vậy là ta có thể xác định được vitrislide tiếp theo chuyển tới sau mỗi lần click.
Thêm animation khi chuyển slide ta cần thêm 2 class là hieuungvao và hiệu ứng ra ứng với slide chuyển đến và slide ra đi. Rồi vào viết animation cho 2 cái class là được rồi.
Nhớ là phải remove tất cả bằng class bằng vòng lặp for duyệt qua tất cả các slide
Lưu ý nhỏ: Khi bạn viết chuyển động cho nút trái thì, khi chưa remove các class hieungvao và hiệu ứng ra ở nút phải. Khi ta click vào nút phải sẽ xảy ra lỗi.

Okê xong rồi đấy ! Vậy là mình đã xử lý xong Bài tập javascript 15 – Viết hiệu chuyển slide phần 2. Mình sẽ quay trở lại với bài tập khác. Mình xin được kết thúc bài viết tại đây.

Xem bài viết tiếp theo tại đây.