Bài tập javascript 13 - Viết hiệu ứng tự động chuyển slide

Ở bài tập javascript 13 này, mình sẽ hướng dẫn các bạn viết hiệu ứng tự động chuyển slide. Nhìn chung thì nó cũng đơn giản thôi :D. Chúng ta chỉ cần viết thêm một hàm tự động chuyển slide nữa là được thôi mà. Mình xin được bắt đầu bài viết.

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

Biến
Mảng
Hàm
Event
HTML DOM
HTML DOM previousElementSibling Property
Phương thức setInterval() và clearInterval()

Mình sẽ giải thích qua hai phương thức setInterval() và clearInterval()

setInterval(): Nó sẽ lặp lại một công việc trong một khoảng thời gian đã đặt sẵn, ví dụ luôn cho trực quan

var x = setInterval(function(){
console.log('ohmyGOD');
},1000);
// Sau 1 giây nó in ra màn hình console chuỗi ohmyGOD
clearInterval(x);
// Hủy bỏ phương thức setInterval

var x = setInterval(function(){

console.log('ohmyGOD');

},1000);

// Sau 1 giây nó in ra màn hình console chuỗi ohmyGOD

clearInterval(x);

// Hủy bỏ phương thức setInterval

Tí mình sẽ dùng 2 thằng này để xử lý, cứ sau 2000 mili giây = 2 giây thì tự động chuyển slide. Sau đó click vào nút sẽ gọi phương thức clearInterval thế là nó dừng thôi :D.

Bài tập javascript 13 – Viết hiệu ứng tự động chuyển slide

Mô tả bài tập: Mở trang web ra slide tự động chuyển theo một khoảng thời gian nhất định, khi click vào nút thì nó dừng.

Demo:

Click vào bài tập js 13 để 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>
	<title>Bai tap js 8</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="baitap5.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="slide">
			<div class="slide_1 ra">
				
			</div>
			<div class="slide_2">
				
			</div>
			<div class="slide_3">
				
			</div>
		</div>
		<div class="nut">
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>
	<script type="text/javascript" src="baitap5.js"></script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</div>

<ul>

</ul>

</div>

</body>

</html>

Code: css

* {
    margin: 0;
    padding: 0;
    border: none;
}
html,body {
    width: 100%;
    height: 100%;
}
.wraper {
    width: 100%;
    height: 100%;
    position: relative;
}
.slide {
    width: 100%;
    height: 100%;
}

.slide_1 {
    width: 100%;
    height: 100%;
    background-image: url(https://themes.muffingroup.com/be/webdesign/wp-content/uploads/revslider/webdesign/home_webdesign_slide1_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top:0;
    z-index: 1;
    opacity: 0;
}
.slide_2 {
    width: 100%;
    height: 100%;
    background-image: url(https://themes.muffingroup.com/be/webdesign/wp-content/uploads/revslider/webdesign/home_webdesign_slide3_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top:0;
    z-index: 2;
    opacity: 0;
}
.slide_3 {
    width: 100%;
    height: 100%;
    background-image: url(https://themes.muffingroup.com/be/webdesign/wp-content/uploads/revslider/webdesign/home_webdesign_slide4_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top:0;
    z-index: 3;
    opacity: 0;
}
.nut {
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform: translateX(-50%);
    z-index: 999;
}
.nut ul li {
    width: 10px;
    height: 10px;
    border:2px solid white;
    display: inline-block;
    border-radius: 100%;
    cursor: pointer;
}

.nut ul li:hover {
    background-color: white;
}
.ra{
    transition: 1.5s;
    opacity: 1;
}

* {

margin: 0;

padding: 0;

border: none;

}

html,body {

width: 100%;

height: 100%;

}

.wraper {

width: 100%;

height: 100%;

position: relative;

}

.slide {

width: 100%;

height: 100%;

}

.slide_1 {

width: 100%;

height: 100%;

background-image: url(https://themes.muffingroup.com/be/webdesign/wp-content/uploads/revslider/webdesign/home_webdesign_slide1_bg.jpg);

background-repeat: no-repeat;

background-size: cover;

position: absolute;

top:0;

z-index: 1;

opacity: 0;

}

.slide_2 {

width: 100%;

height: 100%;

background-image: url(https://themes.muffingroup.com/be/webdesign/wp-content/uploads/revslider/webdesign/home_webdesign_slide3_bg.jpg);

background-repeat: no-repeat;

background-size: cover;

position: absolute;

top:0;

z-index: 2;

opacity: 0;

}

.slide_3 {

width: 100%;

height: 100%;

background-image: url(https://themes.muffingroup.com/be/webdesign/wp-content/uploads/revslider/webdesign/home_webdesign_slide4_bg.jpg);

background-repeat: no-repeat;

background-size: cover;

position: absolute;

top:0;

z-index: 3;

opacity: 0;

}

.nut {

position: absolute;

left: 50%;

bottom: 5%;

transform: translateX(-50%);

z-index: 999;

}

.nut ul li {

width: 10px;

height: 10px;

border:2px solid white;

display: inline-block;

border-radius: 100%;

cursor: pointer;

}

.nut ul li:hover {

background-color: white;

}

.ra{

transition: 1.5s;

opacity: 1;

}

Code JS:

document.addEventListener("DOMContentLoaded",function(){
var nut = document.querySelectorAll('div.nut ul li');
var slides = document.querySelectorAll('div.slide div');
for(var i = 0 ; i < nut.length; i++){
nut[i].addEventListener('click',function(){
	var nutnay = this;
	var vitrislide = 0;
	console.log(nutnay.previousElementSibling);
	for(var i = 0;nutnay = nutnay.previousElementSibling; vitrislide++){
		//chay den khi nut nay  = null thi dung.
		// chay xong lenh nay khi click vao nut ta lay dc vitrislide
	}
	for(var i = 0; i < slides.length; i++){
		slides[i].classList.remove('ra');
	}
	for(var i = 0; i < slides.length; i++){
		slides[vitrislide].classList.add('ra');
	}
})
}
// Click chuyen slide

	auto();
	function auto(){
	var thoigian = setInterval(function(){
		var slide = document.querySelector('div.slide div.ra');
		var vitrislide = 0;
		for(var i = 0 ; slide = slide.previousElementSibling ; vitrislide ++){
		}
		for(var i = 0 ; i < slides.length; i++){
			slides[i].classList.remove('ra'); // remove hết những thằng đang có class 'ra'
		}
		if(vitrislide == slides.length - 1){
			slides[0].classList.add('ra');
                // Thằng này có nghĩa là sau khi tự động chuyển đến slide cuối cùng nó quay lại thằng 0
		}
		else{
		slides[vitrislide].nextElementSibling.classList.add('ra');
               // Đây là then chốt của auto slide nó sẽ chuyển sang cái thằng tiếp theo.
	}
	},2000)
// Tu dong chuyen slide
	for(var i = 0; i < 3; i++){
		nut[i].addEventListener('click',function () {
			clearInterval(thoigian);
                //Click vào một nút bất kì dừng auto chuyển slide
		})
	}
// Dung tu dong chuyen slide
}

var x = setInterval(function(){
console.log('dm');
},1000);

},false)

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

var nut = document.querySelectorAll('div.nut ul li');

var slides = document.querySelectorAll('div.slide div');

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

nut[i].addEventListener('click',function(){

var nutnay = this;

var vitrislide = 0;

console.log(nutnay.previousElementSibling);

for(var i = 0;nutnay = nutnay.previousElementSibling; vitrislide++){

//chay den khi nut nay = null thi dung.

// chay xong lenh nay khi click vao nut ta lay dc vitrislide

}

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

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

}

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

slides[vitrislide].classList.add('ra');

}

})

}

// Click chuyen slide

auto();

function auto(){

var thoigian = setInterval(function(){

var slide = document.querySelector('div.slide div.ra');

var vitrislide = 0;

for(var i = 0 ; slide = slide.previousElementSibling ; vitrislide ++){

}

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

slides[i].classList.remove('ra'); // remove hết những thằng đang có class 'ra'

}

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

slides[0].classList.add('ra');

// Thằng này có nghĩa là sau khi tự động chuyển đến slide cuối cùng nó quay lại thằng 0

}

else{

slides[vitrislide].nextElementSibling.classList.add('ra');

// Đây là then chốt của auto slide nó sẽ chuyển sang cái thằng tiếp theo.

}

},2000)

// Tu dong chuyen slide

for(var i = 0; i < 3; i++){

nut[i].addEventListener('click',function () {

clearInterval(thoigian);

//Click vào một nút bất kì dừng auto chuyển slide

})

}

// Dung tu dong chuyen slide

}

var x = setInterval(function(){

console.log('dm');

},1000);

},false)

Kết quả: Hình ảnh giống hai bài trước thôi mình hơi bận nên không viết lại html css được hehe

File js:

Các bạn chú ý phần code tự động chuyển slide thôi, phần click vào chuyển slide mình đã đề cập trong bài viết trước rồi nhé.
Chúng ta sẽ khởi tạo một hàm auto(), gọi nó trước hay sau cũng được.
Trong hàm auto chúng ta sử dụng phương thức setInterval() mình đã nói về phương thức này ở trên.
Trong phương thức setInterval() chúng ta khởi tạo một hàm vô danh, công việc chính làm trong này
Truy xuất cái thằng có cái cái class là ‘ra’, mình đặt class này cho slide đầu tiên trong html luôn.
Dùng phương thức previousElementSibling để lấy vị trị của thằng hiện tại, hiện tại là sao vì mình dung setInterval() nên sau một khoảng thời gian nó lại gọi lại thằng previousElementSibling này
Vòng for tiếp theo để remove tất cả thằng ‘ra’
Đến đây quay lại đọc code mình chú thích luôn ngay trong code cho trực quan rồi :v

Okê xong rồi đấy ! Vậy là tui đã xử lý xong Bài tập javascript 13 – Viết hiệu ứng tự động chuyển slide. Mình sẽ quay trở lại với bài tập khác. Các bạn nên xóa từng phần code để hiểu rõ tác dụng của nó. Đó là cách học của mình, 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.