Hướng dẫn slider với 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 tôi xin hướng dẫn xây dựng một slider đơn giản và tôi 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

<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 thư 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

#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à địng kích thước cho .slide-box

Javascript code

Xây dựng hàm di chuyển phần tử tạo animation

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

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

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

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

Tuy đoạn mã chương trình có hơi dài một chút nhưng xo với các ứng dụng slider với nhiều hiệu ứng thì nó còn quá ngắn. Đoạn chương trình tuy chỉ có mỗi một hiệu ứng trượt ngang hoạc dọc nhưng đây là hiệu ứng cơ bản và phổ biến nhất. Điều quan trọng ở ứng dụng đó 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