Mã HTML và CSS

Chúng ta bắt đầu thumbnail scroll với mã HTML như sau:

<div id="thumbs-wrapper">
  <div id="thumbs-container">
    <img src="img/1.jpg" width="120" />
    <img src="img/2.jpg" width="120" />
    <img src="img/3.jpg" width="120" />
    <img src="img/4.jpg" width="120" />
    <img src="img/5.jpg" width="120" />
    <img src="img/6.jpg" width="120" />
    <img src="img/7.jpg" width="120" />
    <img src="img/8.jpg" width="120" />
  </div>
</div>

Bạn có thể thấy mã HTML ở đây rất đơn giản, và mã CSS cũng như vậy:

#thumbs-wrapper {
	background: #000;
  width: 980px;
	height: 120px;
	overflow: hidden;
	margin: 300px auto
}

#thumbs-container {
	overflow: hidden
}

#thumbs-container img {
	margin: 0;
	padding: 0;
	border: none;
	float: left;
	padding: 0 1px
}

#thumbs-wrapper có thuộc tính overflow: hidden sẽ giúp cho #thumbs-container (dài hơn 980px) không bị tràn ra ngoài. Thuộc tính overflow: hidden ở #thumb-container sẽ giúp sửa lỗi float của img

Mã javascript

Trước tiên là hàm giúp bạn thực hiện việc scroll (tôi giải thích từng bước ngay bên trong mã javascript):

//Hàm thực hiện việc scroll
function makeScroll($wrapper, $container){
  //Lấy chiều rộng của wrapper
  var divWidth = $wrapper.width();
  //Tìm ảnh cuối cùng trong container
  var lastIMG = $container.find('img:last-child');
  //Xác định vị trí từ bên trái tới mép phải của ảnh cuối cùng
  var conWidth = lastIMG[0].offsetLeft + lastIMG.outerWidth();
  $wrapper.scrollLeft(0);
  
  //Khi có sự kiện chuyển động chuột ở trong wrapper
  $wrapper.unbind('mousemove').bind('mousemove',function(e){
    //Tính toán vị trí bên trái chuột để scroll
    var left = (e.pageX - $wrapper.offset().left) * (conWidth-divWidth) / divWidth;
    $wrapper.scrollLeft(left);
  });
}

Bạn có thể lấy chiều rộng của một phần tử bằng .width() hoặc .outerWidth(). Điểm khác nhau giữa 2 phương thức này là outerWidth sẽ tính chiều rộng của phần tử có padding và border.

scrollLeft là phương thức ít được dùng, nó giúp bạn thay đổi vị trí của thanh scroll ngang trên màn hình (bạn có thể thay mã css của #thumbs-wrapper thành overflow: auto; để thấy rõ hơn). Ở bài hướng dẫn thì tôi đã ẩn thanh scroll đi và sử dụng jQuery tính toán vị trí của chuột để scroll.

Cuối cùng là việc gọi hàm và các tính toán khác:

$(document).ready(function(){
	var $wrapper = $('#thumbs-wrapper');
	var $container = $('#thumbs-container');
	// Đếm số img
	var $totalimg = $('#thumbs-container img').size();
	// Lấy chiều rộng của img
	var $imgwidth = $('#thumbs-container img:first-child').outerWidth();
	//console.log($imgwidth);
	// Đặt chiều rộng cho thumbs-container
	var containerwidth = $totalimg * $imgwidth;
	$container.width(containerwidth + 'px');

	// Gọi hàm makeScroll
	makeScroll($wrapper, $container);
});

Phương thức .size() cho bạn biết tổng số thẻ img có trong #thumbs-container (để tính toán chiều rộng của #thumbs-container). Giả sử tất cả các ảnh có chiều rộng là như nhau, ta lấy chiều rộng của 1 ảnh và nhân lên với tổng số ảnh. Việc cuối cùng là gọi hàm scoll lên và xem demo ở trình duyệt