Ở 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 setIntervalTí 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>
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;
}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)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.
Trả lời