Ví dụ

<!-- Tạo vùng chứa hình ảnh có thể trượt -->
<div class="containerImg">
    <div class="imgSlide">
        <img src="/images/picture_3.jpg" alt="Núi tuyết" />
    </div>
    <div class="imgSlide" id="img">
        <img src="/images/picture_4.jpg" alt="Sóng biển" />
    </div>
</div>

Ví dụ

/* Tạo kiểu cho vùng chứa, vị trí là tương đối */
.containerImg {
    width:400px;
    height:250px;
    position:relative;    
}
/* Vùng chứa các hình ảnh */
.containerImg .imgSlide {
    width:auto;
    height:auto;
    position:absolute;
    overflow:hidden;    
}
/* Đặt chiều rộng, chiều cao cho hình ảnh */
.containerImg img {
    width:400px;
    height:250px;    
}
/* Tạo kiểu cho thanh trượt */
.containerImg .slider {
    width:40px;
    height:40px;
    background-color:#6F6;
    z-index:99;
    position:absolute;
    opacity:0.6;
    border-radius:50%;    
    cursor:ew-resize;
}

Ví dụ

<script>
// Khai báo các biến
var img, slider, w, h, clicked = 0;

// Tìm phần tử có id là "img"
img = document.getElementById('img');

// Lấy chiều rộng, chiều cao của phần tử img
w = img.offsetWidth;
h = img.offsetHeight;

// Gán chiều rộng mới cho phần tử img
img.style.width = (w / 2) + "px";

// Tạo phần tử div mới tên là slider
slider = document.createElement("div");

// Gán thuộc tính "class" cho phần tử slider
slider.setAttribute("class","slider");

// Gán vị trí cho phần tử slider trước phần tử img
img.parentElement.insertBefore(slider, img);

// Căn giữa phần tử slider
slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";

// Gán sự kiện nhấn chuột cho phần tử slider
slider.addEventListener("mousedown", slideReady);
window.addEventListener("mouseup", slideFinish);

// Gán sự kiện trên màn hình cảm ứng
slider.addEventListener("touchstart", slideReady);
window.addEventListener("touchend", slideFinish);

// Định nghĩa hàm slideReady
function slideReady(e) {
    
    // Ngăn chặn bất kỳ hành động nào khác có thể xảy ra khi nhấn chuột trên hình ảnh
    e.preventDefault();
    clicked = 1;
    
    // Thêm sự kiện di chuyển chuột gắn với hàm slideMove
    window.addEventListener("mousemove", slideMove);
    window.addEventListener("touchmove", slideMove);
}

// Định nghĩa hàm slideFinish
function slideFinish() {
    clicked = 0;    
}

// Định nghĩa hàm slideMove
function slideMove(e) {
    var pos;
    
    // Nếu phần tử slider không có sự kiện nhấn chuột, thoát khỏi hàm
    if(clicked == 0) {
        return false;    
    }
    
    // Lấy tọa độ x của con trỏ chuột
    pos = getCursorPos(e);
    
    // Không cho phần tử slider trượt ra ngoài hình ảnh
    if(pos > w) {
        pos = w;
    }
    if(pos < 0) {
        pos = 0;
    }
    
    // Gán chiều rộng mới cho phần tử img theo con trỏ chuột
    img.style.width = pos + "px";
    
    // Gán vị trí mới cho phần tử slider
    slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
}

// Định nghĩa hàm lấy tọa độ con trỏ chuột
function getCursorPos(e) {
    var a, x = 0;
    a = img.getBoundingClientRect();
    
    // Tính toán tọa độ bắt đầu của con trỏ trên hình ảnh
    x = e.pageX - a.left;
    
    // Nếu người dùng cuộn trang
    x = x - window.pageXOffset;
    return x;
}
</script>

Xem kết quả