Hướng dẫn Xây dựng một slider đơn giản bằng Javascript - DOM

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
Xây dựng một slider đơn giản bằng Javascript - DOM

Từ khi có thư viện Jquery thì số lượng ứng dụng slider cũng tăng lên rất nhiều, không mất nhiều thời gian để bạn tìm cho mình một slider bằng công cụ tìm kiếm google. Tuy nhiên để sử dụng và tùy chỉnh slider theo ý bạn thì thời gian bỏ ra còn nhiều hơn việc tìm kiếm nó, slider viết bằng Jquery ngày càng đẹp với nhiều hiệu ứng ấn tượng. Tuy nhiên nếu bỏ ra một chút thời gian thì bạn hoàn toàn có thể xây dựng cho mình một ứng dụng slider viết thuần bằng Javascript - DOM, trong bài viết này mình sẽ hướng dẫn xây dựng một slider đơn giản và mình nghĩ cũng không khó để bạn thực hiện.

Ý tưởng để xây dựng ứng dụng chỉ đơn giản là bạn xây dựng một hàm tạo hiệu ứng hoạt hình animation rồi sau đó sử dụng hàm setInterval để gọi lại hàm đó sau một quảng thời gian nhất định, sau đây sẽ là đoạn mã chương trình cụ thể.

HTML code
Mã:
<div id="main">
<div id="wrap-slider">
  <div id="slider">
   <img class="slide-box" src="images/image1.jpg" />
   <img class="slide-box" src="images/image2.jpg" />
   <img class="slide-box" src="images/image3.jpg" />
   <img class="slide-box" src="images/image4.jpg" />
  </div><!-- end #slider -->
</div><!-- end #wrap-slider  -->
<span id="prev-slide">Previous</span><span id="next-slide">Next</span>
</div><!-- end #main -->

Cấu trúc chính của mã HTML là việc tạo 3 thẻ div lồng nhau với id tương ứng. Chúng ta sẽ thực hiện slider với hình ảnh, bạn có thể thay thế hình ảnh bằng văn bản nhưng như thế slider sẽ chạy không được mượt cho lắm trên một số trình duyệt xử lý Javascrpit kém và phần lớn các slider đều vậy.

CSS code
Mã:
#main{
  position: relative;
  margin: 0 auto;
  padding: 20px 30px;
  width: 600px;
  background: #dddede;
  border: 1px solid #ccc;
}
#prev-slide, #next-slide{
  position: absolute;
  top: 132px;
  width: 18px; height: 31px;
  text-indent: -99999px;
  cursor: pointer;
}
#prev-slide{
  left: 5px;
  background: url(images/prev-arrow.png) no-repeat 0 0;
}
#next-slide{
  right: 5px;
  background: url(images/next-arrow.png) no-repeat 0 0;
}
#wrap-slider{
  position: relative;
  overflow: hidden;
  background: #fff;
}
#slider{
  position: absolute;
  left: 0; top: 0;
}
.slide-box{
  width: 600px;
  height: 245px;
  display: block;
  float: left;
}

Phần #main chỉ là để tạo khung cho đẹp, phần quan trọng là phần tử #wrap-slider có thuộc tính position là relative và định kích thước cho .slide-box

Javascript code
Xây dựng hàm di chuyển phần tử tạo animation
Mã:
function moveElement(elementID,final_x, final_y, interval){
  var elem = document.getElementById(elementID);
  if(elem.movement) clearTimeout(elem.movement);
 
  // Xác định vị trí
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);

  // Sau khi dịch chuyển tới vị trí thì dừng
  if(xpos == final_x && ypos == final_y) return true;

  // Tính vị trí dịch chuyển sau mỗi thời gian dừng
  if(xpos < final_x){
   var dist = Math.ceil((final_x - xpos)/10);
   xpos = xpos + dist;
  }
  if(xpos > final_x){
   var dist = Math.ceil((xpos - final_x)/10);
   xpos = xpos - dist;
  }
  if(ypos < final_y){
   var dist = Math.ceil((final_y - ypos)/10);
   ypos = ypos + dist;
  }
  if(ypos > final_y){
   var dist = Math.ceil((ypos - fina_y)/10);
   ypos = ypos - dist;
  }

  // Di chuyển phần tử
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";

  // Gọi lại hàm dịch chuyển sau khi dịch được 1 px
  var repeat = "moveElement('" + elementID + "'," + final_x + ", " + final_y + ", " + interval + ")";
  elem.movement = setTimeout(repeat,interval);
}

Hàm xây dựng với tham số thứ nhất là id của phần tử sẽ di chuyển, final_x và final_y là hai vị trí chiều ngang và chiều dọc sẽ di chuyển tới. Ý tưởng trong hàm trên là sử dụng phương pháp lập trình đệ quy để thực hiện dịch chuyển phần tử mỗi 1px sau mỗi một thời gian nhất định vì vậy mà tạo được hoạt hình di chuyển.

Xây dựng hàm chức năng dịch chuyển tới và lui
Mã:
function previous(){
  if(move <0) move += box_width;
  moveElement('slider',move, 0, 10);
}
function next(){
 move = (move <= endpos)? 0: (move-box_width);
 moveElement('slider',move, 0, 10);
}

Chúng ta sẽ sử dụng một số biến toàn cục để lưu thông tin về kích thước và vị trí. Hai hàm này sẽ gọi lại hàm tạo hoạt hình đã xây dựng trước. Ở hàm next() dòng đầu tiên biến move sẽ lưu vị trí mới để slider di chuyển tới nếu tới phần tử cuối thì nó sẽ có giá trị là 0 để quai về đầu, biến endpos sẽ lưu thông tin vị trí của phần tử cuối khi di chuyển tới. Trong hàm previous() cũng tương tự nhưng chỉ cho lui khi không phải là phần tử đầu tiên.

Xây dựng hàm slider
Mã:
function slider(){
  if(!document.getElementById) return false;
  var slider = document.getElementById('slider');
  var wrap_slider = document.getElementById('wrap-slider');
 
  // Định kiểu cho slider nếu chưa được thiết lập
  if(!slider.style.position) slider.style.position ="absolute";
  if(!slider.style.left) slider.style.left ="0px";
  if(!slider.style.top) slider.style.top = "0px";

  // Thiết lập các thông số cho slider
  var box_arr =slider.childNodes;
  var box_quantity =0;
  for(var i=0; i<box_arr.length; i++){
    if(box_arr[i].className == 'slide-box'){
     box_quantity++;
     box_width =box_arr[i].offsetWidth;
     box_height =box_arr[i].offsetHeight;
    }
  }

  wrap_slider.style.height =box_height+"px";
  wrap_slider.style.width =box_width+"px";
  slider.style.width = (box_width*box_quantity)+"px";
  move=0; endpos = -(box_width*3);

  // Tự động chạy slider
  var idSet =setInterval('next()',5000);
 
  // next_slide , prev_slide
  var next_slide = document.getElementById("next-slide");
  var prev_slide = document.getElementById("prev-slide");

  next_slide.onclick = function(){
    next(); clearInterval(idSet);
    idSet =setInterval('next()',5000);
  }
  prev_slide.onclick = function(){
    previous(); clearInterval(idSet);
    idSet =setInterval('next()',5000);
  }
}

Hàm này sẽ thiết lập các thông số kích thước cho slider đồng thời dùng hàm setInterval() để gọi hàm next() sau một khoảng thời gian nhất định, như ở trên là 5000 milisecond tương đương với 5 giây. Việc tạo chức năng cho hai nút next và prev chỉ đơn giản là gọi lại hàm next() và previous() điều chú ý là bạn phải dùng hàm clearInterval() để hủy chức năng tự động chạy của hàm setInterval với id tương ứng sau đó mới gọi lại setInterval() để slide tiếp tục chạy.

Sau khi xây dựng xong thì việc sử dụng là cực kỳ đơn giản chỉ việc gọi hàm slider là sau khi trình duyệt đã tải xong với sự kiện onload

Mã:
window.onload = function(){
  slider();
}// end onload

Đoạn mã tuy chỉ có một hiệu ứng cơ bản là trượt ngang hoặc dọc nhưng nó cũng khá phổ biến. Điều quan trọng ở ví dụ trên đó là việc sử dụng Javascript và DOM thuần mà không sử dụng library hay framework hổ trợ nào điều này giúp bạn hiểu hơn về Javascript - DOM.

Chúc các bạn thành công.


Nguồn: sothichweb.com​
 

tuna

Sergeant
Tham gia
30/01/2017
Bài viết
639
Được Like
276
có demo cho dễ xem thì đẹp :D
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom