Cách tạo băng chuyền có thể kéo bằng JavaScript Vanilla – cách tạo thanh trượt băng chuyền trong javascript

Băng chuyền hoặc thanh trượt của trang web là một cách hiệu quả để hiển thị nhiều hình ảnh hoặc nội dung trong một không gian duy nhất. Nó khuyến khích khách truy cập tập trung vào …

Bạn đang xem: cách tạo thanh trượt băng chuyền trong javascript

Giới thiệu

Băng chuyền hoặc thanh trượt của trang web là một cách hiệu quả để hiển thị nhiều hình ảnh hoặc nội dung trong một không gian. Nó khuyến khích khách truy cập tập trung vào nội dung trang web quan trọng đồng thời cải thiện sức hấp dẫn trực quan tổng thể bằng cách tiết kiệm không gian màn hình.

Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo băng chuyền có thể kéo từ đầu bằng cách sử dụng JavaScript vani. Điều này sẽ rất chi tiết và giải thích để mọi người có thể hiểu được.

Lưu ý: Mã nguồn có sẵn trên GitHub .

Bắt đầu

Để tạo băng chuyền có thể kéo từ đầu bằng JavaScript vani, chúng tôi cần sử dụng một tập hợp các sự kiện chuột duy nhất, chẳng hạn như:

  • mousedown : Khi nhấn nút chuột trong khi con trỏ ở bên trong một phần tử, sự kiện mousedown sẽ được kích hoạt.
  • mouseenter : Khi lần đầu tiên di chuyển chuột vào một phần tử, sự kiện mouseenter sẽ được kích hoạt.
  • mouseleave : Khi con trỏ chuột di chuyển ra khỏi một phần tử, sự kiện mouseleave được kích hoạt (điều này ngược lại với mouseenter ).
  • mouseup : Sự kiện mouseup được kích hoạt khi con trỏ nằm trong phần tử và một nút trên chuột được nhả ra.
  • mousemove : Khi con chuột được di chuyển trong khi con trỏ ở bên trong nó, sự kiện mousemove sẽ được kích hoạt.

Hãy bắt đầu bằng cách tạo tệp HTML của chúng tôi; về cơ bản, chúng tôi có bao nhiêu thẻ tùy thích với bất kỳ nội dung nào chúng tôi muốn. Để tránh dán mã HTML hơn 80 dòng, tôi muốn xóa nội dung khỏi thẻ và tận dụng các hộp:

  

& lt;

div

class < / p> =

"slider-container"

& gt;

& lt;

div

class

=

" inner-slider "

& gt;

& lt;

div

class

=

" card "

& gt;

& lt; /

div

& gt;

& lt;

div

class

=

" card "

& gt;

& lt; /

div

& gt;

& lt;

div

class

=

" card "

& gt;

& lt; /

div

& gt;

& lt;

div

class

=

" card "

& gt;

& lt; /

div

& gt;

& lt;

div

class

=

" card "

& gt;

& lt; /

div

& gt;

& lt;

div

class

=

" card "

& gt;

& lt; /

div

& gt;

& lt;

div

class

=

" card "

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

Hãy cũng thêm một số kiểu cơ bản vào slider-container , inner-slider và thẻ :

  

. thẻ

{

height

:

300px

;

width

:

400px

;

border-radius

:

5px

; }

. thẻ

: nth-child

(lẻ) {

background-color

: blue; }

. thẻ

: nth-child

(thậm chí) {

background-color

:

rgb

(

0

,

183

,

255

); }

. slider-container

{

width

:

80%

;

height

:

350px

;

vị trí

: tuyệt đối;

top

:

50%

;

còn lại

:

50%

;

biến đổi

:

dịch

(-

50%

, -

50%

);

tràn

: hidden; }

. inner-slider

{

width

:

150%

;

display

: flex; khoảng cách:

10px

;

con trỏ-sự kiện

: none;

vị trí

: tuyệt đối;

top

:

0

;

còn lại

:

0

; }

Lưu ý: overflow: hidden; đã được thêm vào slider-container , vì vậy, nó ẩn các thẻ khác nằm ngoài chiều rộng . Chúng tôi cũng đã sử dụng position: Absol; cùng với top left trong inner-slider , vì vậy chúng tôi có thể sử dụng của vị trí left sau đó bằng JavaScript.

Tại thời điểm này, trang của bạn sẽ trông như thế này:

Làm cho băng chuyền có thể kéo được

Bước đầu tiên sẽ là chọn phần tử thanh trượt, chính thanh trượt và vùng chứa thanh trượt. Sau đó, chúng tôi sẽ thiết lập ba biến mà chúng tôi sẽ sử dụng sau này.

  

let

sliderContainer =

tài liệu

.querySelector (

'. slider-container'

);

let

innerSlider =

document

.querySelector (

'. inner-slider '

);

let

press =

false

;

let

startX;

let

x;

Như đã nêu trước đây, chúng tôi sẽ sử dụng một số lượng lớn chuột eventListists để xử lý các hoạt động khác nhau. Chúng tôi chủ yếu sẽ gắn chúng vào phần tử thanh trượt chính.

Sự kiện đầu tiên mà chúng tôi sẽ theo dõi là sự kiện tạm dừng, tương tự nhưng không hoàn toàn giống với một lần nhấp. Đây là nơi chúng tôi sẽ chỉ định những gì chúng tôi muốn xảy ra khi người dùng nhấp vào vùng chứa thanh trượt.

Lưu ý: Điều này khác với sự kiện click ở chỗ sự kiện click được kích hoạt sau khi một hành động nhấp đầy đủ đã xảy ra; nghĩa là, nút chuột được nhấn và thả ra trong khi con trỏ vẫn ở bên trong cùng một phần tử. Trong khi, mousedown được thực thi tại thời điểm nút được nhấn lần đầu tiên.

  sliderContainer.addEventListener (

'mousedown'

,

() = & gt; { ... })

Để chứng minh rằng biến được nhấn , mà chúng tôi đã khởi tạo trước đó là false , được nhấn, trước tiên chúng tôi sẽ gán true cho nó. Chúng tôi cũng sẽ đặt giá trị startx thành giá trị offset theo hướng x trừ đi giá trị offset innerSlider thành left , hiện là 0 . Chúng tôi có thể thấy điều này có nghĩa là gì bằng cách cố gắng đăng xuất giá trị của startx .

Chúng tôi cũng sẽ tạo kiểu cho con trỏ để tương tác tốt hơn. Điều này sẽ được đặt thành grabbing (để kiểm tra tác dụng của điều này, hãy thử nhấp vào trong slidercontainer ).

  sliderContainer.addEventListener (

"mousedown"

,

(

e

) = & gt;

{ ép =

true

; startX = e.offsetX - innerSlider.offsetLeft; sliderContainer.style.cursor =

"lấy"

; });

Sách điện tử miễn phí: Git Essentials

Kiểm tra đưa ra hướng dẫn thực hành, thực tế của chúng tôi để học Git, với các phương pháp hay nhất, các tiêu chuẩn được ngành công nghiệp chấp nhận và bảng lừa đảo đi kèm. Hãy dừng các lệnh của Googling Git và thực sự học nó!

Sự kiện tiếp theo mà chúng ta sẽ tìm là con chuột; chúng tôi đang làm điều này để thêm tính tương tác cơ bản bằng cách tạo kiểu cho con trỏ để cho biết rằng thanh trượt hoặc một thẻ trượt cụ thể đã được giữ lại.

  sliderContainer.addEventListener (

"mouseenter"

,

() = & gt; { sliderContainer.style.cursor =

"lấy"

; });

Sau đó, chúng tôi sẽ lắng nghe sự kiện mouseup và đặt kiểu con trỏ thành grab , để khi người dùng ngừng lấy hoặc khi nhấp vào, con trỏ sẽ chuyển trở lại grab thay vì grabbing . Chúng tôi cũng sẽ trả lại giá trị được nhấn thành false .

  sliderContainer.addEventListener (

"mouseup"

,

() = & gt; { sliderContainer.style.cursor =

"lấy"

; ép =

false

; });

Cho đến thời điểm này, chúng tôi đã có thể thêm một số tương tác, nhưng chúng tôi chưa triển khai chức năng chính, một băng chuyền có thể kéo.

Xử lý Logic cốt lõi

Bây giờ chúng ta hãy quan tâm đến logic cốt lõi; chúng tôi sẽ vẫn nhắm mục tiêu đến sliderContainer , nhưng lần này chúng tôi sẽ lắng nghe sự kiện mousemove . Trong hàm gọi lại, chúng tôi sẽ kiểm tra xem được nhấn có phải là false hay không để chúng tôi có thể trả lại hàm và nó sẽ không làm gì cả.

  sliderContainer.addEventListener (

"mousemove"

,

(

e

) = & gt;

{

if

(! press)

return

; ... });

Nhưng, nếu được nhấn true , chúng tôi có thể tiếp tục với một số lôgic khác. Bước đầu tiên sẽ là ngăn các hành vi mặc định, tiếp theo là đặt x thành offsetX (tọa độ x của con trỏ chuột so với phần tử thanh trượt vùng chứa).

  sliderContainer.addEventListener (

"mousemove"

,

(

e

) = & gt;

{

if

(! press)

return

; e.preventDefault (); x = e.offsetX; });

Bạn sẽ nhận thấy rằng khi chúng tôi tạo kiểu cho lớp CSS innerSlider , chúng tôi đã thêm position: precision và giá trị trái 0 . Bây giờ chúng ta sẽ thay đổi giá trị left thành x-startX động khi người dùng kéo băng chuyền. (chúng tôi đang trừ vị trí hiện tại của mình cho phần bù của div mẹ).

  sliderContainer.addEventListener (

"mousemove"

,

(

e

) = & gt;

{

if

(! press)

return

; e.preventDefault (); x = e.offsetX; innerSlider.style.left =

`

$ {x - startX}

px`

; });

Tại thời điểm này, bạn sẽ nhận thấy rằng mọi thứ đều hoạt động tốt vì thanh trượt của chúng tôi hiện kéo đúng cách, nhưng không có giới hạn về nơi cuộn có thể dừng.

Bây giờ hãy quan tâm đến nó bằng cách xác định một chức năng mới. Điều đầu tiên sẽ là lấy vị trí của các vùng chứa thanh trượt bên trong và bên ngoài, sau đó chúng ta có thể tạo hai câu lệnh điều kiện để hoạt động cho cả hai bên.

  

const

checkBoundary =

() = & gt;

{

let

ngoài = sliderContainer.getBoundsClientRect ();

let

inner = innerSlider.getBoundsClientRect ();

if

(

parseInt

(innerSlider.style.left) & gt;

0

) { innerSlider.style.left =

"0px"

; }

if

(inner.right & lt; external.right) { innerSlider.style.left =

`-

$ {inner.width - external.width}

px`

; } };

Sau khi hoàn tất, bây giờ chúng ta có thể gọi hàm này trong trình xử lý sự kiện mousemove như là điều cuối cùng:

  sliderContainer.addEventListener (

"mousemove"

, < p class = "hljs-function"> (

e

) = & gt;

{ ... checkBoundary (); });

Chúng tôi đã có thể tạo thành công thanh trượt có thể kéo bằng JavaScript từ đầu bằng phương pháp này.

Kết luận

Trong bài viết này, chúng tôi đã học cách tạo băng chuyền có thể kéo từ đầu bằng JavaScript vani, chúng tôi cũng biết được sự khác biệt giữa tất cả các sự kiện chuột được sử dụng.


Xem thêm những thông tin liên quan đến chủ đề cách tạo thanh trượt băng chuyền trong javascript

E-Commerce Product Slider Using HTML CSS and JavaScript

alt

  • Tác giả: Going-To Internet
  • Ngày đăng: 2019-10-08
  • Đánh giá: 4 ⭐ ( 5447 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video, I am gonna show you how to create an e-commerce product slider using HTML, CSS, and JavaScript. I am using the Swiper demo for sliding. This is a very simple and easy way to make an e-commerce product slider.
    ECommerceProductSlider HTML Javascript

    =================================
    ✓ Buy Hosting (60% OFF): https://partners.hostgator.com/c/2985746/343233/3094
    =================================

    ► If you have any Front End Project Contact me: https://www.fiverr.com/touseeqijazweb

    Website: https://www.goingtointernet.com
    Video Link:https://youtu.be/jrvndko-6LI
    Channel Link: https://www.youtube.com/channel/UCfNzft_txAamoQvwh1j2HEQ
    ------------------------------------------------
    ➼ Download Images: https://www.goingtointernet.com/2019/10/eCommerce-product-slider.html

    ➼ Swiper Files:-

    (CSS file) swiper.min.css: https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css
    (JavaScript file )Swiper.min.js: https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js

    ➼ Download Source Code: https://www.patreon.com/goingtointernetoficial

    ------------------------------------------------

    More Relative Videos:-

    1)How to Create a Website Using HTML & CSS | Personal Website Design
    Video Link: https://youtu.be/-xuRoRnjur4

    2)How To Create LogIn Form Using Only HTML & CSS
    Video Link:https://www.youtube.com/watch?v=q-RCzxoAiGI

    3)How to Create Navigation Menu in HTML and CSS | 3D Effect |Going-To Internet
    Video Link:https://www.youtube.com/watch?v=olNh54NmUK0
    ------------------------------------------------
    SEO...

    E-Commerce Product Slider using Html

    product slider html ,css and javascript

    responsive product slider javascript

    product thumbnail slider html css javascript

    featured product slider html css javascript

    product list slider html css javascript

    product slider jquery html css

    product image slider html css javascript

    html product slider zoom effect

    html product slider download

    product slider for html css js

    html css javascript horizontal product slider

    product slider in html css javascript

    swiper demo multiple product slider

    html css product slider responsive

    html css javascript product slider carousel

    html css javascript carousel product cart slider

    how to make e-commerce prodduct slider using javascript

    how to make e-commerce website

    e-commerce prodduct slider using bootstrap 4

    E-Commerce Product Slider using Bootstrap 4

    product slider bootstrap 4

    responsive product slider bootstrap

    product thumbnail slider bootstrap

    featured product slider bootstrap

    product list slider bootstrap

    product slider jquery bootstrap

    product image slider bootstrap

    bootstrap product slider zoom effect

    bootstrap product slider download

    product slider for bootstrap

    bootstrap horizontal product slider

    product slider in bootstrap

    bootstrap multiple product slider

    bootstrap product slider responsive

    bootstrap product slider carousel

    bootstrap carousel product cart slider
    ------------------------------------------------

    Social Links:-

    Twitter: https://twitter.com/GoingInternet

    Instagram: https://www.instagram.com/goingtointernet/

Có thể làm gì với JavaScript? Nhiều hơn những gì bạn biết!

  • Tác giả: topdev.vn
  • Đánh giá: 4 ⭐ ( 2717 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngoài việc được biết đến như là một ngôn ngữ lập trình, chúng ta còn có thể làm gì với JavaScript và xây dựng được gì với nó?

Tạo hiệu ứng trượt mượt mà bằng JavaScript khi thiết kế Landing Page

  • Tác giả: giuseart.com
  • Đánh giá: 4 ⭐ ( 2910 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: GiuseArt.com hướng dẫn các bạn tạo hiệu ứng trượt mượt mà bằng JavaScript khi thiết kế Landing Page. Tự học CSS và học WordPress hiệu quả với GiuseArt

19 thanh trượt HTML và CSS miễn phí cho trang web của bạn

  • Tác giả: www.creativosonline.org
  • Đánh giá: 5 ⭐ ( 7922 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nếu bạn cần một thanh trượt khác với những thanh trượt mà bạn có thể tìm thấy trên bất kỳ trang web nào, thì những băng chuyền này là hoàn hảo cho kết thúc tuyệt vời và miễn phí.

Hướng dẫn thanh trượt băng chuyền với HTML, CSS và JavaScript

  • Tác giả: ichi.pro
  • Đánh giá: 3 ⭐ ( 6703 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài đăng này, chúng ta sẽ xem xét cách tạo một băng chuyền đơn giản với HTML, CSS và JavaScript. Chúng tôi sẽ sử dụng các phương pháp mã tốt, lưu ý khả năng truy cập và cũng xem xét cách chúng tôi có thể kiểm tra băng chuyền.

Làm cách nào để kiểm soát tốc độ băng chuyền bootstrap trượt trong các mục?

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 7519 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Tốc độ không thể được kiểm soát bởi API. Mặc dù bạn có thể sửa đổi…

Hướng dẫn tạo Range Sliders (thanh trượt phạm vi)

  • Tác giả: devmaster.edu.vn
  • Đánh giá: 3 ⭐ ( 7671 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu cách tạo thanh trượt phạm vi tùy chỉnh bằng CSS và JavaScript., Đào tạo lập trình viên chuyên nghiệp - php - .net - java - android - ios - c - C++,C#, Tư vấn thiết kế và xậy dựng phần mềm, thiết kế website

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách làm việc với ID tự động tăng dần trong SQL - cách tăng id tự động trong sql