Tạo băng chuyền hai cấp bằng cách sử dụng jquery. Plugin jQuery "Smooth Div Scroll". Thanh trượt nội dung jQuery đáp ứng bxSlider
Nhưng vì chúng ta đang tìm hiểu những kiến thức cơ bản về JS nên để nghiên cứu cơ sở này, tôi sẽ mô tả cách tạo thanh trượt đơn giản chỉ với sự giúp đỡ Ngôn ngữ JavaScript. Nào, hãy bắt đầu phân tích tài liệu!
Có những loại thanh trượt nào và chúng có thể cần thiết ở đâu?Việc tạo các thư viện thuận tiện để xem hình ảnh là bắt buộc trên tất cả các dịch vụ web có chứa ít nhất một số bức ảnh. Đây có thể là các cửa hàng trực tuyến, trang danh mục đầu tư, dịch vụ tin tức và giáo dục, trang web của các công ty và cơ sở giải trí có báo cáo hình ảnh, v.v.
Tuy nhiên, đây là cách sử dụng thanh trượt tiêu chuẩn. Công nghệ tương tự còn dùng để thu hút khách hàng đến khuyến mãi hàng hóa, dịch vụ hoặc để mô tả lợi thế của doanh nghiệp.
Hầu hết, khách hàng yêu cầu triển khai nó trên các phòng trưng bày kiểu “Carousel”. Cái này công cụ tiện dụngđể xem hình ảnh ở kích thước lớn với khả năng người dùng chuyển đổi các slide tiến và lùi. Trong trường hợp này, các hình ảnh thường tự động chuyển đổi sau một thời gian nhất định. Cơ chế này được đặt biệt danh do việc hiển thị hình ảnh được lặp lại theo hình tròn.
Ngày nay, nếu muốn, bạn có thể tìm thấy các plugin khác thường và hấp dẫn nhất trên Internet để xem một bộ ảnh.
Hoạt động độc lậpChà, bây giờ hãy bắt đầu tạo thanh trượt của riêng chúng ta. Ở giai đoạn học tập này, để triển khai nó, tôi khuyên bạn nên sử dụng các tệp . Điều này sẽ tự động chuyển đổi hình ảnh trong một vòng tròn.
Dưới đây tôi đã đính kèm Mã chương trìnhứng dụng của bạn. Tôi đã để lại nhận xét cho bạn khi tôi viết mã.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
|
Trình chuyển đổi hình ảnh tự động /*Mô tả vẻ bề ngoài frame, cơ sở cho thanh trượt trong tương lai */ #slides( vị trí: tương đối; chiều cao: 415px; chiều rộng: 100%; phần đệm: 0px; list-style-type: none; box-shadow: 0 0 7px #010, 0 0 10px blue , 0 0 15px #010, 0 0 35px #010; ) /* Tôi chỉnh sửa hiển thị của ảnh*/ img ( width: auto; Height: 390px; buffer: 13px; ) /* Tôi chỉ ra rằng nội dung của danh sách các mục sẽ được hiển thị ở giữa phần tử- cha, tức là V. trong trường hợp nàyở giữa phần tử ul - cơ sở cho các slide */ li ( text-align: center; ) /* Tôi mô tả hình thức của các slide */ .slide( location: tuyệt đối; opacity: 0; top: 0px ; trái: 0px; chiều cao: 100 %; chỉ số z: 3; chiều rộng: 100%; nền: màu xanh; -moz-transition: độ mờ 1,5 giây; chuyển tiếp: độ mờ 1,5 giây; -webkit-transition: độ mờ 1,5 giây; ) /*Khi được hiển thị, đối tượng sẽ hiển thị và di chuyển về phía trước*/ .showing( opacity: 1; z-index: 4; )
Tôi hy vọng bạn không gặp vấn đề gì với mã css và html. Nhưng tôi thấy cần phải tháo rời công việc của kịch bản. Vì vậy, hãy chuyển sang giải mã những gì đã được viết.
Vì vậy, trước tiên, bằng cách sử dụng phương thức querySelectorAll, tôi gán cho biến MySlider một danh sách tất cả các phần tử trong phạm vi đã chỉ định. Cho biết mục này
document.querySelectorAll("#slides .slide")
Do đó, MySlider lưu trữ một bộ sưu tập gồm bốn phần tử.
Tiếp theo, tôi chỉ định hình ảnh nào sẽ bắt đầu hiển thị bằng cách đặt biến currentPicture về 0. Sau đó, tôi chỉ ra rằng sự thay đổi trang chiếu xảy ra sau 2,7 giây và chức năng xử lý trang chiếu tiếp theo phải được gọi.
Hãy chuyển sang chức năng của chính nó.
Ban đầu, đối với thành phần danh sách hiện tại, tôi thay đổi mô tả của các lớp, tức là Tôi viết lại “trình chiếu” thành “slide”. Kết quả là hình ảnh trở nên vô hình.
Bây giờ tôi xác định phần tử mới bộ sưu tập sẽ được hiển thị trên màn hình. Để làm điều này tôi lấy vị trí hiện tại +1. Bạn có thể nhận thấy rằng tôi cũng sử dụng phép chia có phần dư (%) cho số trang trình bày có sẵn. Thủ thuật bằng tai này là cần thiết để bắt đầu chương trình trong một vòng tròn mới. Đây thực sự là những gì nó sẽ trông như thế nào.
01/11/15 310.6KHiện tại, thanh trượt - băng chuyền - là một chức năng cần thiết phải có trên trang web doanh nghiệp, trang web danh mục đầu tư hoặc bất kỳ tài nguyên nào khác. Cùng với thanh trượt hình ảnh toàn màn hình, thanh trượt băng chuyền ngang rất phù hợp với mọi thiết kế web.
Đôi khi thanh trượt sẽ chiếm một phần ba trang của trang. Ở đây thanh trượt băng chuyền được sử dụng với các hiệu ứng chuyển tiếp và bố cục thích ứng. Trang web thương mại điện tử sử dụng thanh trượt băng chuyền để hiển thị nhiều ảnh trong các ấn phẩm hoặc trang riêng biệt. Mã trượt có thể được sử dụng và sửa đổi miễn phí theo nhu cầu của bạn.
Sử dụng JQuery kết hợp với HTML5 và CSS3, bạn có thể làm cho các trang của mình thú vị hơn, cung cấp cho chúng các hiệu ứng độc đáo và thu hút sự chú ý của khách truy cập đến một khu vực cụ thể của trang web.
Slick – plugin trượt băng chuyền hiện đạiSlick là một plugin jquery có sẵn miễn phí mà các nhà phát triển khẳng định rằng giải pháp của họ sẽ đáp ứng tất cả các yêu cầu về thanh trượt của bạn. Thanh trượt thích ứng - băng chuyền có thể hoạt động ở chế độ “xếp ô” cho thiết bị di động và ở chế độ “kéo và thả” cho phiên bản máy tính để bàn.
Chứa hiệu ứng chuyển tiếp “làm mờ”, tính năng “chế độ trung tâm” thú vị, tải hình ảnh lười biếng với tính năng tự động cuộn. Chức năng cập nhật bao gồm thêm trang trình bày và bộ lọc trang trình bày. Tất cả để đảm bảo rằng bạn định cấu hình plugin theo yêu cầu của mình.
Chế độ demo | Tải xuống
Owl Carousel 2.0 – jQuery – plugin để sử dụng trên các thiết bị cảm ứngPlugin này có các tính năng sau: bộ lớn các tính năng phù hợp cho cả người mới bắt đầu và nhà phát triển có kinh nghiệm. Cái này phiên bản cập nhật thanh trượt - băng chuyền. Người tiền nhiệm của ông có cùng tên.
Thanh trượt có một số plugin tích hợp để cải thiện chức năng tổng thể. Hoạt ảnh, phát lại video, tự động phát thanh trượt, lười tải, tự động điều chỉnh độ cao - tính năng chính của Owl Carousel 2.0.
Hỗ trợ kéo và thả được bật để biết thêm sử dụng thuận tiện bật plugin thiêt bị di động.
Plugin này hoàn hảo để hiển thị hình ảnh lớn ngay cả trên màn hình nhỏ của thiết bị di động.
Ví dụ | Tải xuống
Một plugin jquery khá nhỏ nhưng giàu chức năng cho phép bạn đặt một thanh trượt trên một trang - một băng chuyền, có lõi nhỏ và không tiêu tốn nhiều tài nguyên trang web. Plugin có thể được sử dụng để hiển thị các thanh trượt dọc và ngang, với hình ảnh động và tạo bộ hình ảnh từ thư viện.
Ví dụ | Tải xuống
Thanh trượt jQuery siêu nhỏ gọn - băng chuyền, chức năng của nó lớn hơn nhiều so với thanh trượt thông thường. Chúng bao gồm xem trước một hình ảnh, hiển thị băng chuyền nhiều hình ảnh và hiển thị thanh trượt dựa trên tiêu đề.
Ví dụ | Tải xuống
Băng chuyền cú – thanh trượt có hỗ trợ những màn hình cảm ứng và công nghệ kéo và thả, dễ dàng tích hợp vào mã HTML. Plugin là một trong thanh trượt tốt nhất, cho phép bạn tạo các băng chuyền đẹp mắt mà không cần bất kỳ đánh dấu nào được chuẩn bị đặc biệt.
Ví dụ | Tải xuống
Sử dụng chuyển tiếp 3D dựa trên kiểu CSS và một ít mã Javascript.
Ví dụ | Tải xuống
Băng chuyền 3D tuyệt đẹp. Có vẻ như đây vẫn là phiên bản beta vì tôi vừa phát hiện ra một số vấn đề với nó. Nếu bạn quan tâm đến việc thử nghiệm và sáng tạo thanh trượt riêng– băng chuyền này sẽ giúp ích rất nhiều.
Ví dụ | Tải xuống
Thanh trượt đáp ứng - băng chuyền sử dụng công nghệ bootstrap chỉ dành cho trang web mới của bạn.
Ví dụ | Tải xuống
Phổ biến nhất trên các trang web danh mục đầu tư và kinh doanh. Loại thanh trượt này - băng chuyền - thường được tìm thấy trên bất kỳ loại trang web nào.
Ví dụ | Tải xuống
Thanh trượt có kích thước nhỏ bé này sẵn sàng hoạt động trên các thiết bị có độ phân giải màn hình bất kỳ. Thanh trượt có thể hoạt động ở cả chế độ vòng tròn và băng chuyền. Vòng tròn nhỏ được trình bày như một sự thay thế cho các thanh trượt khác thuộc loại này. Có hỗ trợ tích hợp cho hệ điều hành hệ thống iOS và Android.
Ở chế độ hình tròn, thanh trượt trông khá thú vị. Hỗ trợ tuyệt vời cho phương pháp kéo và thả và hệ thống cuộn trang trình bày tự động.
Ví dụ | Tải xuống
Thanh trượt băng chuyền mạnh mẽ, có khả năng thích ứng, hoàn hảo cho một trang web hiện đại. Hoạt động chính xác trên mọi thiết bị. Có chế độ ngang và dọc. Kích thước của nó được giảm thiểu xuống chỉ còn 1 KB. Plugin siêu nhỏ gọn cũng có khả năng chuyển tiếp mượt mà tuyệt vời.
Ví dụ | Tải xuống
Chứa hơn 50 hiệu ứng, có thể giúp bạn tạo thanh trượt gốc cho trang web của mình.
Ví dụ | Tải xuống
Thay đổi kích thước cửa sổ trình duyệt của bạn để xem thanh trượt thích ứng như thế nào. Bxslider có hơn 50 tùy chọn tùy chỉnh và thể hiện các tính năng của nó bằng nhiều hiệu ứng chuyển tiếp khác nhau.
Ví dụ | Tải xuống
jCarousel là một plugin jQuery sẽ giúp tổ chức việc xem hình ảnh của bạn. Bạn có thể dễ dàng tạo băng chuyền hình ảnh tùy chỉnh từ cơ sở được hiển thị trong ví dụ. Thanh trượt có khả năng thích ứng và tối ưu hóa để hoạt động trên nền tảng di động.
Ví dụ | Tải xuống
Scrollbox là một plugin nhỏ gọn để tạo thanh trượt - băng chuyền hoặc thu thập thông tin văn bản. Các tính năng chính bao gồm dọc và cuộn ngang với sự tạm dừng khi di con trỏ chuột.
Ví dụ | Tải xuống
Một thanh trượt băng chuyền đơn giản. Nếu bạn cần một plugin nhanh thì plugin này phù hợp 100%. Chỉ đi kèm với các tính năng cơ bản cần thiết để thanh trượt hoạt động.
Ví dụ | Tải xuống
Những người tạo ra Flexisel lấy cảm hứng từ plugin jCarousel kiểu cũ, tạo một bản sao của nó nhằm vào hoạt động chính xác thanh trượt trên thiết bị di động và máy tính bảng.
Bố cục đáp ứng của Flexisel, khi chạy trên thiết bị di động, khác với bố cục có kích thước cửa sổ trình duyệt. Flexisel được điều chỉnh hoàn hảo để hoạt động trên màn hình, cả độ phân giải thấp và cao.
Ví dụ | Tải xuống
Elastislide thích ứng hoàn hảo với kích thước màn hình thiết bị của bạn. Bạn có thể đặt số lượng hình ảnh tối thiểu để hiển thị ở độ phân giải cụ thể. Hoạt động tốt như thanh trượt băng chuyền với các thư viện hình ảnh, sử dụng trình bao bọc cố định cùng với hiệu ứng cuộn dọc.
Ví dụ | Tải xuống
Thanh trượt phần mềm miễn phí từ Woothemes. Nó được coi là một trong những thanh trượt thích ứng tốt nhất. Plugin chứa một số mẫu và sẽ hữu ích cho cả người dùng mới làm quen và chuyên gia.
Ví dụ | Tải xuống
Amazing Carousel – thanh trượt hình ảnh đáp ứng sử dụng jQuery. Hỗ trợ nhiều hệ thống quản lý nội dung như WordPress, Drupal và Joomla. Cũng hỗ trợ Android và iOS và hệ điều hành máy tính để bàn mà không có bất kỳ vấn đề tương thích nào. Các mẫu băng chuyền tuyệt vời được tích hợp sẵn cho phép bạn sử dụng thanh trượt ở chế độ dọc, ngang và tròn.
Một ngày nọ, bạn bè của tôi quyết định dành cho tôi một bất ngờ thú vị. Bản thân sự ngạc nhiên đó rất đơn giản; nó đòi hỏi một chiếc áo phông rất bình thường không có bất kỳ kiểu dáng nào.
Và sau đó họ gặp phải một vấn đề - tất cả áo phông trong cửa hàng đều có hình ảnh trên đó. Họ không thể tìm thấy chiếc áo phông đơn giản nhất mà không có hình ảnh. Tôi nghĩ bạn đã gặp phải vấn đề tương tự khi không thể tìm ra điều đơn giản nhất.
Và câu chuyện tương tự với băng chuyền; hầu hết tất cả các băng chuyền đều đã có thiết kế. Và bạn hầu như luôn cần một băng chuyền sạch sẽ, sau đó bạn có thể thiết kế theo ý định của nhà thiết kế.
Do đó, để có thể ngay lập tức thích thú khi làm việc với băng chuyền và thực hiện chúng một cách nhanh chóng, tôi khuyên bạn nên sử dụng plugin sau.
Plugin jQuery cho băng chuyền rõ ràng và mạnh mẽĐiều thú vị về plugin này là nó không có thiết kế và dễ làm việc hơn nhiều so với các plugin đẹp mắt khác.
Nó có thể được trang trí theo bất kỳ cách nào bạn thích.
Và đây là plugin này: Owl Carousel.
Cài đặt plugin1. Kết nối jQuery nếu nó chưa được kết nối, ví dụ như thế này
2. Sao chép các tập tin plugin vào thư mục trang web
- Giải nén
- Sao chép thư mục owl-carousel vào trang web
3. Kết nối các tệp này với trang web:
4. Thêm mã vào trang
1 2 3 4 5 6 7 8 9 10 11 12 13 14
5. Khởi chạy plugin
$(document).ready(function())( // Tìm khối băng chuyền var carousel = $("#carousel"); // Khởi chạy plugin băng chuyền carousel.owlCarousel(); ));
6. Chúng tôi sắp xếp
/* Khối chính */ .owl-wrapper-outer ( border: 1px Solid #777; border-radius: 5px; tràn: ẩn; nền: trắng; ) /* 1 hình vuông băng chuyền */ .carousel-element ( đệm: 30px ; căn chỉnh văn bản: giữa; cỡ chữ: 300%; viền phải: 1px liền khối #777; )
Nút quay lại và chuyển tiếpTrong ví dụ này, tôi sẽ không chỉ ra phương pháp nhanh nhất mà là phương pháp phổ biến nhất.
1. Tự thêm các nút
Quay lại phía trước
2. Gắn nút vào plugin băng chuyền
Sau khi khởi chạy plugin, hãy thêm mã
// Quay lại // Khi bạn nhấp vào "Quay lại" $("#js-prev").click(function () ( // Bắt đầu tua lại carousel.trigger("owl.prev"); return false; )); // Chuyển tiếp // Khi bạn nhấp vào "Chuyển tiếp" $("#js-next").click(function () ( // Bắt đầu tua lại về bên phải carousel.trigger("owl.next"); return false; ) );
Bây giờ, khi bạn nhấp vào “Quay lại” và “Chuyển tiếp”, tua lại sẽ được kích hoạt.
Điểm đánh dấuĐây là những điểm cho thấy chúng ta đang ở đâu.
Chúng có thể được kích hoạt khi chạy plugin bằng cách thêm tham số sau
// Khởi chạy plugin băng chuyền carousel.owlCarousel(( // Các điểm trong phân trang băng chuyền: true ));
/* Chặn bằng dấu chấm */ .owl-pagination ( text-align: center; /* Căn chỉnh các dấu chấm ở giữa */ ) /* 1 Point */ .owl-page ( width: 10px; Height: 10px; border: 1px đặc #777; display: inline-block; nền: trắng; lề: 10px; bán kính đường viền: 5px; ) /* Điểm hoạt động */ .owl-page.active ( nền: #777; )
Chỉ hiển thị 1 khốiĐiều này khá thường xuyên cần thiết, vì điều này chúng tôi thêm tham số sau
// Khởi chạy plugin băng chuyền carousel.owlCarousel(( singleItem: true, // Chỉ hiển thị 1 khối ở độ rộng đầy đủ ));
Số khối khác nhau trên các thiết bị khác nhauMột tính năng rất hữu ích cho phép bạn tạo băng chuyền thích ứng cho thiết bị di động.
// Khởi chạy plugin băng chuyền carousel.owlCarousel(( // Số khối được hiển thị // tùy thuộc vào thiết bị (chiều rộng màn hình) // Số khối trên mỗi màn hình lớn items: 10, // 5 khối trên máy tính (màn hình từ 1400px đến 901px) itemsDesktop: , // 3 khối trên máy tính nhỏ (màn hình từ 900px đến 601px) itemDesktopSmall: , // 2 thành phần trên máy tính bảng (màn hình từ 600 đến 480 pixel) ) itemsTablet: , // Cài đặt cho điện thoại bị tắt, trong trường hợp này // cài đặt máy tính bảng sẽ được sử dụng itemsMobile: false ));
Đó là loại ngạc nhiên gì vậy?Bạn bè đến dự tiệc sinh nhật của tôi, họ mỉm cười vui vẻ, niềm vui ngập tràn. Họ long trọng tặng tôi một món quà.
Tôi mở nó ra và nhìn vào chiếc áo phông. Tôi đang mở nó ra. Chết tiệt, thật ngu ngốc. Tôi nhìn thấy 3 bức ảnh của tôi trên chiếc áo phông này. Tôi mặc áo phông vào và mọi người bắt đầu cười, nó trở nên ngu ngốc và buồn cười.
Đôi khi tôi phải giải quyết các vấn đề liên quan đến frontend, mặc dù thực tế là tôi không thích nó :)
Trên thực tế, bạn có thể ước tính thái độ của tôi đối với mọi thứ liên quan đến “đẹp” từ thiết kế của trang web này do một mình tôi phát triển :)
Tuy nhiên, gần đây tôi phải đối mặt với nhu cầu triển khai một thanh trượt trong JavaScript và việc này phải được thực hiện mà không cần bất kỳ thư viện tạo sẵn nào và thậm chí không có jQuery yêu thích của mọi người.
Nhu cầu này xuất phát từ thực tế là kết quả lẽ ra phải là một tập lệnh JS, thông qua dịch vụ của bên thứ ba Tôi sẽ kết nối với trang web. Do đó, các băng chuyền tạo sẵn trong JavaScript không còn cần thiết nữa, bởi vì Để tích hợp chúng, cần phải thêm kết nối thư viện vào mã HTML của trang web thông qua thẻ script và sao chép chính các tệp đó vào máy chủ hoặc kéo chúng qua cdn, nhưng điều này lại yêu cầu chỉnh sửa mã tài nguyên.
Cách tạo thanh trượt JavaScript: phần đầuNgày nay, tôi nghĩ rằng tất cả những người rơi vào hoàn cảnh tương tự đều bắt đầu bằng việc tìm kiếm những phát triển hiện có, bởi vì... khi nhiệm vụ tạo băng chuyền JS nằm trong phạm vi công việc thì việc này phải luôn được thực hiện nhanh nhất có thể. Và trong điều kiện như vậy, không ai cho phép bạn ngồi và sáng chế ra những chiếc xe đạp của riêng mình.
Khách hàng luôn không quan tâm đến việc viết code như thế nào, kiến trúc của nó ra sao, cái chính là xem kết quả!
Kết quả là, như bạn hiểu, trước khi viết một thanh trượt bằng JavaScript mà không cần jQuery, tôi đã quyết định tìm một thanh trượt làm sẵn và sửa đổi nó cho phù hợp với nhu cầu của mình. Tại sao không có jQuery? Có, bởi vì trên tài nguyên đích, nơi tôi dự định kết nối thanh trượt của mình thông qua dịch vụ, lệnh gọi jQuery trong mã được đặt muộn hơn tập lệnh được dịch vụ kết nối. Do đó, các cấu trúc jQuery trong mã của tôi không được nhận biết.
Để làm cơ sở, tôi đã sử dụng thanh trượt hình ảnh JavaScript này - https://codepen.io/gabrieleromanato/pen/pIfoD.
Tôi quyết định dừng lại ở đó, bởi vì... Mã JS của nó được viết bằng cách sử dụng các nguyên tắc OOP và các lớp của nó dựa trên nguyên mẫu, không dựa trên các hàm tầm thường.
Thành thật mà nói, tôi thực sự không hiểu và không nhận ra sự cường điệu hiện tại xung quanh JavaScript bằng cách sử dụng OOP, các khung và những thứ kiến trúc khác bằng ngôn ngữ mà ban đầu được dự định là ngôn ngữ kịch bản lệnh động đơn giản. Cũng giống như bản thân JS, tôi thực sự không thích nó với cú pháp vinaigrette của nó, nó cho phép viết các cấu trúc tương tự theo nhiều cách.
Nhưng thật không may, trong thế giới hiện đại Rất ít người chia sẻ quan điểm của tôi, bởi vì... Ngôn ngữ này đang phát triển với tốc độ chóng mặt và thậm chí còn đang cố gắng thu hút sự chú ý của các nhà phát triển phụ trợ bằng cách sử dụng Node.js để thay thế cho Java, PHP, C#, Ruby và các quái vật khác.
Kết quả là, để không bị bỏ rơi không có việc làm, bạn phải lặng lẽ tìm ra JavaScript. Và trong quá trình triển khai thanh trượt JavaScript thuần túy mà tôi đã chọn, tôi đã gặp phải một điều mà, như bạn hiểu, tôi coi thường trong ngôn ngữ nhất định. Đó là lý do tại sao tôi chọn nó, để có ít nhất lý do nào đó để làm việc và hiểu JavaScript OOP và các lớp nguyên mẫu - nếu không thì tôi sẽ không bao giờ tự nguyện chạm vào chúng trong đời :)
Dựa trên mã tôi tìm thấy, tôi cần phát triển một thanh trượt trong JS thuần túy trong một cửa sổ bật lên (thứ này còn được gọi là cửa sổ bật lên, cửa sổ bật lên, v.v.), trong đó sẽ có các nút để chuyển đổi các trang trình bày và các chỉ báo có thể nhấp của hiện tại cầu trượt. Cũng cần phải tạo một nút để đóng cửa sổ này.
Đây là những gì tôi đã kết thúc với.
Tạo thư viện JS thanh trượtĐầu tiên, tôi quyết định triển khai mọi thứ một cách khôn ngoan và tạo một thanh trượt JavaScript cho trang web dưới dạng một thư viện có thể được kết nối với trang web bằng một tập lệnh duy nhất, trong đó các thành phần thanh trượt, được chia thành các thư mục con, sẽ được gọi. Tôi quyết định gọi nó là PopupSlider.js để tôn vinh mục đích ban đầu của nó.
Mã của nó có thể được tìm thấy trên GitHub tại địa chỉ này - https://github.com/Pashaster12/popupSlider.js
Cấu trúc thư viện như sau:
Thư mục slide dành cho các hình ảnh slide. Các điều khiển chứa hình ảnh của các điều khiển băng chuyền JS (các nút để đóng thanh trượt và chuyển đổi các trang chiếu). Và trong nội dung có các thành phần tĩnh của thanh trượt JS: đánh dấu HTML và một tệp có kiểu CSS.
Chà, tệp PopupSlider.js chính là trái tim của thư viện, trong đó các hành động JavaScript của băng chuyền được viết và kết nối được thiết lập với các tệp khác. Đây là cái mà chúng ta sẽ kết nối trên trang web và nó sẽ gọi những cái khác.
Tôi quyết định bắt đầu với đánh dấu HTML của băng chuyền hình ảnh JS của chúng tôi, trong trường hợp của tôi trông như thế này:
Văn bản 1 
Văn bản 2 
Văn bản 3
Để thiết kế thanh trượt trong JavaScript dưới dạng cửa sổ bật lên, tôi đã sử dụng các kiểu sau:
#slider ( lề: auto; chiều rộng: 600px !quan trọng; tràn: ẩn; ) #slider-wrapper ( chiều rộng: 9999px; chiều cao: 343px; vị trí: tương đối; chuyển tiếp: tuyến tính trái 400ms; ) .slide ( float: left; width : 600px; vị trí: tương đối; tràn: ẩn; ) .caption ( chiều rộng: 600px; chiều cao: 110px; chiều cao dòng: 1.5; cỡ chữ: 15px; độ dày phông chữ: 300; căn chỉnh văn bản: giữa; màu sắc: # 000; display:table; ) .caption-container ( display: table-cell; Vertical-align: middle; đệm: 0 20px; ) #slider-nav ( location: tuyệt đối; dưới cùng: -36px; căn chỉnh văn bản: giữa; trái: 50%; biến đổi: dịchX(-50%); ) #slider-nav a ( width: 8px; chiều cao: 8px; trang trí văn bản: không; màu: #000; hiển thị: khối nội tuyến; bán kính đường viền: 50%; lề: 0 5px; màu nền: #fafafa; ) #slider-nav a.current ( màu nền: #337ab7; ) .điều khiển ngang ( vị trí: tuyệt đối; hiển thị: khối nội tuyến; chiều rộng: 12px ; chiều cao: 20px; trên cùng: 50%; lề trên: -10px; ) #prev ( nền: url(../controls/arrow_left_inactive.png); trái: -40px; ) #prev:hover ( nền: url(../controls/arrow_left_active.png); ) #next ( nền: url(../controls/arrow_right_inactive.png); right: -40px; ) #next:hover ( nền : url(../controls/arrow_right_active.png); ) #cq-popup ( width: 600px; z-index: 23; left: calc(50%); top: calc(50%); vị trí: đã sửa !quan trọng ; lặp lại nền: không lặp lại; vị trí nền: phải; màu nền: #fff; họ phông chữ: "Roboto","Segoe UI","Helvetica","Georgia","Calibri","Verdana" ; biến đổi: dịch(-50%, -50%) tỉ lệ(1); ) #cq-popup .header ( display: inline-block; font-size: 17px; font-weight: 500; ) #cq-popup > div ( chiều rộng: 500px; cỡ chữ: 22px; chiều cao dòng: 36px; ) #cq-popup-btclose ( trang trí văn bản: none; vị trí: tuyệt đối; phải: -40px; top: 0; nền: url(. ./controls/btn_delete_inactive.png); chiều cao: 16px; chiều rộng: 16px; ) #cq-popup-btclose:hover ( nền: url(../controls/btn_delete_active.png); ) #cq-popup-bg ( vị trí : cố định; trên cùng: 0; chiều rộng: 100%; chiều cao: 100%; nền: rgba(51,51,51,0.8); chỉ số z: 22; )
Kết quả của việc áp dụng các kiểu JS này là băng chuyền trông như thế này:
Và đánh dấu HTML, và Kiểu CSS tôi đã mang vào tập tin riêng biệt PopupSlider.html và PopupSlider.css nằm trong thư mục nội dung của thư viện thanh trượt JavaScript. Tôi cố tình làm điều này để khi sử dụng mã này, người dùng có thể dễ dàng điều chỉnh đánh dấu và thiết kế mà không phải loay hoay với mã JS, nơi những gì cần viết ra sẽ phải được viết trực tiếp.
Ngoài ra, nhiều người vẫn thích giảm thiểu JS để tăng tốc độ tải trang. Vì vậy tùy chỉnh quyết định này trong những điều kiện này sẽ rất khó khăn.
Do đó, tôi quyết định chỉ đưa các tệp được tạo sẵn vào tệp thư viện chính PopupSlider.js, tệp này dành cho nhiệm vụ của tôi có dạng sau:
Hàm Slider(element) ( this.loadStatic(); this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: function () ( this.links = this.el.querySelectorAll ("#slider-nav a"); this.wrapper = this.el.querySelector("#slider-wrapper"); this.nextBtn = this.el.querySelector("#next"); this.prevBtn = this. el.querySelector("#prev"); this.navigate(); ), điều hướng: function () ( var self = this; for (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; link.addEventListener("click", function (e) { self.slide(this); }); } self.prevBtn.style.display = "none"; self.nextBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var nextSlide = document.querySelector(""); nextSlide.click(); }, false); self.prevBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var prevSlide = document.querySelector(""); prevSlide.click(); }, false); self.close(); }, slide: function (element) { this.setCurrentLink(element); var index = parseInt(element.getAttribute("data-slide"), 10) + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + index + ")"); this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; if (index < this.links.length) this.nextBtn.style.display = "block"; else if (index == this.links.length) this.nextBtn.style.display = "none"; if (index >1) this.prevBtn.style.display = "chặn"; khác nếu (chỉ mục == 1) this.prevBtn.style.display = "none"; ), setCurrentLink: function (link) ( var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; this.currentElement = link; for (var j = 0; j< a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } }, loadStatic: function () { var self = this; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "assets/popupSlider.css"; document.head.appendChild(link); var sliderHTML = ""; var xhr = new XMLHttpRequest(); xhr.open("GET", "assets/popupSlider.html", false); xhr.send(); if (xhr.status != 200) { alert("Can not load the popupSlider.html. Got the error " + xhr.status + ": " + xhr.statusText); } else { sliderHTML = xhr.responseText; } var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div); }, close: function () { document.getElementById("cq-popup-btclose").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove(); } } };
Một vài nhận xét về đoạn mã trên. Nội dung của tệp PopupSlider.js là một lớp JavaScript Slider duy nhất, giống như trong PHP, chứa một hàm tạo và các phương thức lớp. Chỉ trong JS, định nghĩa của hàm tạo, không giống như PHP, là bắt buộc.
Hàm tạo được xác định bằng cách sử dụng cấu trúc sau:
Thanh trượt hàm(phần tử) ( //mã hàm tạo)
Bên trong hàm tạo, các hành động sẽ được thực hiện khi tạo đối tượng lớp phải được chỉ định.
Bản thân các phương thức lớp sẽ được đặt bên trong nguyên mẫu và sẽ có sẵn cho tất cả các phiên bản của lớp JavaScript này. Nguyên mẫu JS trong trường hợp của tôi được mô tả theo thiết kế sau:
Slider.prototype = ( //methods )
Chúng sẽ được gọi bên ngoài thân lớp như sau:
Thanh trượt Var = Thanh trượt mới(); Slider.class_method();
Và bên trong mã lớp, có sẵn phương thức sau:
This.class_method();
Điều chính là đừng quên rằng trong JavaScript, giá trị của this phụ thuộc vào ngữ cảnh của lệnh gọi, do đó, trong phần nội dung của một số phương thức cần gọi các phương thức và thuộc tính của một lớp, có một cấu trúc như vậy:
Var self = cái này; self.class_method(); // để truy cập một phương thức cao hơn một cấp so với mã của phương thức được mô tả
Có vẻ như tôi đã nói về tất cả các sắc thái của việc viết mã. Bây giờ là một vài lời về các phương thức của lớp JavaScript của chúng tôi, chứa các mô tả về các hành động JS của băng chuyền hình ảnh.
tảiStatic()
Phương thức đầu tiên được gọi khi tạo một thể hiện của một lớp trong hàm tạo. Chịu trách nhiệm thêm đánh dấu thanh trượt và tệp có kiểu vào mã HTML của trang web.
Đầu tiên, một thẻ liên kết mới được tạo trong bộ nhớ bằng cách sử dụng Hàm JavaScript document.createElement() và nó được gán giá trị của tất cả các thuộc tính cần thiết, bao gồm đường dẫn đến tệp CSS với các kiểu thanh trượt JS. Và cuối cùng, nó được thêm vào trang HTMLđang sử dụng Phương thức JavaScript appendChild() vào cuối phần đầu, nơi cần có các kiểu.
Tiếp theo, chúng tôi thực hiện tương tự đối với tệp có đánh dấu HTML của thanh trượt bằng JavaScript thuần túy. Chỉ có một sắc thái nhỏ ở đây: bạn không thể chỉ đưa một tệp HTML vào trong cùng một tệp, như chúng tôi đã làm với tệp CSS. Có những thư viện đặc biệt cho việc này, chẳng hạn, để đưa HTML vào HTML, lib từ w3.org rất tuyệt vời - https://www.w3schools.com/howto/howto_html_include.asp
Nhưng sau đó, nó sẽ phải được đưa vào thư viện thanh trượt hoặc yêu cầu người dùng tự cài đặt nó. Nhưng tất cả điều này là chưa tối ưu, bởi vì... yêu cầu chuyển động cơ thể nhiều và làm chậm tốc độ tải trang do có thêm tập lệnh.
Kết quả là tôi quyết định nhận nội dung tập tin HTML bên trong mã JavaScript và tải nó vào một mã mới phần tử div, được tạo trong bộ nhớ như tôi đã làm trước đó cho Kết nối CSS tập tin bằng JavaScript. Phần tử được tạo được bao gồm ở cuối phần nội dung của mã HTML của trang web.
Nếu bạn muốn chèn một div có đánh dấu thanh trượt không chỉ ở cuối nội dung mà còn trong một vùng chứa cụ thể, bạn có thể sử dụng mã sau:
Var div = document.createElement("div"); div.innerHTML = thanh trượtHTML; document.body.appendChild(div);
Nhập thông tin sau, chỉ định mã định danh mong muốn của vùng chứa mục tiêu (trong trường hợp của tôi, thanh trượt HTML JS sẽ được đặt trong phần tử có id PopupSlider):
Var target = document.querySelector("#popupSlider"); target.innerHTML = SliderHTML;
Phương thức này được gọi trong hàm tạo sau LoadStatic(), là cần thiết để khởi tạo các thuộc tính lớp tương ứng với các phần tử HTML chính mà chúng ta sẽ truy cập trong đoạn mã sau.
Cuối cùng, phương thức Navigation() được gọi.
điều hướng()
Trong phương pháp này, các hành động xảy ra khi bạn nhấp vào nút chuyển đổi trang trình bày và các thành phần điều hướng nằm bên dưới thanh trượt được biểu thị dưới dạng vòng tròn.
Để thuận tiện, tôi đã chuyển mã JavaScript để thay đổi các slide thành một phương thức slide() riêng biệt, nhưng trong phương thức này tôi chỉ đính kèm nó vào sự kiện click cho mỗi nút tròn trong vòng lặp.
Khi bạn nhấp vào nút “trang trình bày trước” / “trang trình bày tiếp theo”, như bạn có thể thấy, tôi quyết định chỉ mô phỏng một nhấp chuột vào vòng tròn tương ứng, xác định vòng tròn mong muốn so với vòng tròn hiện tại, có lớp CSS hiện tại.
trượt(phần tử)
Phương pháp “chịu trách nhiệm về sự kỳ diệu” của chính băng chuyền JavaScript, chứa mã thay đổi vị trí của các trang trình bày. Lúc đầu, phương thức setCurrentLink() được gọi, chúng ta sẽ nói về phương thức này sau.
Đối tượng nút điều hướng thanh trượt JS ở dạng vòng tròn được truyền cho nó dưới dạng tham số đầu vào.
Bản thân công tắc trượt hoạt động như thế này:
Ở cuối phương pháp, hoạt động của các nút “trang trình bày trước”/”trang trình bày tiếp theo”, được thiết kế tương ứng dưới dạng mũi tên trái/phải, sẽ được mô tả. Nếu trang chiếu hiện tại là trang đầu tiên trong toàn bộ danh sách thì nút đi tới trang chiếu trước đó sẽ bị ẩn. Nếu sau này thì bỏ nút đó để chuyển sang slide tiếp theo.
setCurrentLink(liên kết)
Phương pháp này của lớp chúng tôi Thanh trượt JavaScript có nhiệm vụ làm nổi bật nút tròn điều hướng tương ứng với phần tử hiện tại. Những thứ kia. nếu chúng ta chọn slide thứ hai, nút thứ hai sẽ được đánh dấu.
Đối tượng của nút cần được chọn làm đối tượng hiện tại sẽ được truyền dưới dạng tham số đầu vào cho hàm.
Logic để làm nổi bật phần tử hiện tại rất đơn giản:
Phương thức cuối cùng của lớp, xác định hành động khi nhấp vào nút đóng của thanh trượt ở dạng chữ thập. Trên thực tế, đây là mã dễ hiểu nhất trong số tất cả các mã có trong lớp thanh trượt JS.
Khi bạn nhấp vào nút đóng, được truy cập bằng mã định danh của nó, phần tử thanh trượt và phần tử xác định nó sẽ bị xóa khỏi trang. nền trong suốt. Ngược lại, chúng cũng được thu thập bằng các mã định danh duy nhất.
Bản thân phương thức này được gọi bên trong Navigator() được mô tả trước đó, chứa tất cả các kịch bản hành động diễn ra trên thanh trượt JavaScript của chúng tôi.
Nhân tiện, nếu bạn muốn đóng thanh trượt khi nhấp vào bên ngoài thanh trượt, thì chỉ cần thêm đoạn mã sau vào phương thức này:
Document.getElementById("cq-popup-bg").onclick = function () ( document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove() ;
Trình chiếu JavaScript dựa trên thư viện đã phát triểnĐôi khi trong thực tế, bạn có thể cần tạo một băng chuyền cuộn JS, thường được gọi là trình chiếu. Trong trường hợp của tôi, điều này là không bắt buộc, nhưng tôi vẫn quyết định tạo một cái dựa trên mã thư viện cuối cùng để phòng trường hợp nó có thể hữu ích.
Trên thực tế, việc triển khai JavaScript của trình chiếu hơi khác một chút so với thanh trượt thông thường. Sự khác biệt duy nhất là trong một trình chiếu, các trang trình bày sẽ tự động chuyển đổi theo một khoảng thời gian nhất định, trong khi đối với băng chuyền JS thông thường, chúng sẽ thay đổi theo cách thủ công bằng cách sử dụng các phần tử điều hướng.
SlideShow: function (hết thời gian) ( var slideCount = this.links.length; var self = this; this.slideCycle = setInterval(function () ( var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribution ("data-slide"); var slideId = ParseInt(currentSlideNumber, 10) + 1; self.slide(document.querySelector("")); ), timeout); )
Tôi nghĩ rõ ràng chuyện gì đang xảy ra ở đây. Để tạo phương pháp này Tôi đã sao chép mã từ sự kiện nhấp chuột trên các nút trượt thủ công và đặt mã đó vào trong lệnh gọi JavaScript tới hàm setInterval(), hàm này sẽ thực hiện một hành động được chỉ định sau một khoảng thời gian được chỉ định.
Tập lệnh hành động được chuyển dưới dạng đối số đầu tiên dưới dạng hàm ẩn danh và khoảng thời gian được chuyển dưới dạng khoảng thời gian thứ hai, mà tôi quyết định đặt làm biến có giá trị được chuyển khi slideShow() được gọi.
Việc sửa đổi duy nhất đối với mã bên trong setInterval() được yêu cầu là xác định số lượng trang trình bày và so sánh chỉ mục của trang trình bày hiện tại với nó để lặp lại quá trình chuyển đổi tự động.
Chà, để mã này hoạt động, chính phương thức đó phải được gọi. Tôi quyết định thực hiện tất cả những điều này trong cùng một điều hướng(), đây chính xác là một tập hợp của tất cả các loại tập lệnh. Tôi đã thực hiện cuộc gọi ở cuối, chuyển làm đối số giá trị của khoảng thời gian cho thay đổi tự động slide trong trình chiếu JS của chúng tôi (Tôi đã chọn 2000 mili giây hoặc 2 giây, bạn có thể thay đổi con số này nếu cần):
Self.slideShow(2000);
Sau lần kiểm tra đó Công việc JavaScript thanh trượt mà không quên dọn dẹp trình duyệt của bạn.
Về lý thuyết, mọi thứ sẽ hoạt động. Nếu không, hãy nghiên cứu các lỗi trong bảng điều khiển trình duyệt và chia sẻ chúng trong phần bình luận.
Kết quả là chúng tôi có một trình chiếu JS trong đó các trang trình bày tự động chuyển đổi và theo hình tròn, tức là. khi đến slide cuối cùng, chương trình sẽ chuyển sang chu kỳ mới và màn hình bắt đầu lại từ phần tử đầu tiên.
Khi làm việc với các thư viện JS khác nhau cho băng chuyền hình ảnh và bài đánh giá, tôi nhận thấy rằng các nhà phát triển tích cực sử dụng phương pháp này nhưng có một số bổ sung. Trong tất cả các giải pháp tôi đã thấy, trình chiếu tự động bị gián đoạn nếu người dùng thực hiện chuyển đổi thủ công. Vì vậy, tôi quyết định làm điều tương tự trong thư viện của mình.
Để làm gián đoạn hiển thị tự động Trang trình bày JavaScript băng chuyền, tôi đã quyết định sử dụng hàm JS tiêu chuẩn ClearInterval(), mà tôi chuyển vào đó làm đối số mã định danh của khoảng thời gian được hàm setInterval() trả về khi nó được đặt.
Kết quả là tôi nhận được đoạn mã sau và tôi quyết định không viết dưới dạng một phương thức riêng biệt:
ClearInterval(self.slideCycle);
Và đặt nó ở những nơi mô tả hành động khi nhấp vào các thành phần điều hướng khác nhau, tức là. trong những điều sau đây:
Link.addEventListener ("nhấp chuột", hàm (e) (...)); self.prevBtn.addEventListener ("nhấp chuột", hàm (e) (...)); self.nextBtn.addEventListener ("nhấp chuột", hàm (e) (...));
Tốt hơn là nên gọi clearInterval() gần hơn với chính sự kiện nhấp chuột, điều chính là ở trước sự kiện đó chứ không phải ở sau sự kiện đó.
Tích hợp thanh trượt JavaScript trên trang webVì vậy, thanh trượt trong JS thuần túy của chúng tôi đã sẵn sàng. Bây giờ tất cả những gì còn lại là kết nối nó với trang web.
Để thực hiện việc này, bạn cần thực hiện tuần tự các bước sau: hành động tiêu chuẩn khi tích hợp bất kỳ bên thứ ba nào Thư viện JavaScriptở tất cả.
Bước 1 . Chúng tôi sao chép các tập tin thư viện vào trang web của chúng tôi trong một thư mục riêng.
Bước 2. Thêm đoạn mã sau vào HTML của các trang cần hiển thị thanh trượt, đặt nó trước thẻ nội dung đóng:
Bước 3. Chúng tôi đặt đoạn mã sau để gọi băng chuyền JS trong bất kỳ tệp JavaScript hiện có nào, được đưa vào trang sau khi kết nối chính thanh trượt:
Var aSlider = Thanh trượt mới("#slider");
Như bạn có thể thấy, mã này về cơ bản là tạo một đối tượng của lớp Slider, được chứa trong PopupSlider.js. Đó là lý do tại sao nó chỉ được gọi sau khi kết nối chính tệp lớp đó với trang.
Thêm trang trình bày mới vào băng chuyền JavaScriptMọi thứ ở đây rất đơn giản. Vì slide của chúng ta được lấy từ một thư mục riêng của thư viện slide nên khi thêm hình ảnh mới bạn chỉ cần thả chúng vào đó tập tin cần thiết, trước đây đã cho chúng cùng kích thước với những cái khác.
Và sau đó trong mã của tệp assets/popupSlider.html thêm khối mới vào vùng chứa có id Slider-wrapper :
Chữ
Về nguyên tắc, bạn có thể chỉ cần sao chép một cái tương tự hiện có và thay đổi đường dẫn đến tệp hình ảnh và văn bản chữ ký (nếu cần).
Bạn cũng sẽ cần thêm một thành phần điều hướng mới ở dạng hình tròn, bởi vì... Hiện tại, việc bổ sung tự động của nó vẫn chưa được triển khai. Để thực hiện việc này, bạn sẽ cần thêm mã sau vào vùng chứa có id điều hướng thanh trượt, viết mã đó ở cuối:
Giá trị của thuộc tính data-slide phải lớn hơn giá trị lớn nhất của các phần tử khác. Chỉ cần tăng dòng điện tối đa thêm một lần là đủ.
Đóng gói băng chuyền JS thành một tập lệnh duy nhấtThế là xong, thanh trượt JavaScript đã sẵn sàng và được kết nối. Cá nhân tôi khuyên bạn nên sử dụng tùy chọn này trong thực tế, nếu bạn cần nó :)
Nhân tiện, để tăng tốc hoạt động của nó, bạn có thể nén thêm các thành phần tĩnh: tệp CSS, HTML và JavaScript. Tôi đã không làm điều này và cung cấp cho bạn mã rút gọn, bởi vì hiện nay có rất nhiều hệ thống xây dựng giao diện người dùng: Gulp, Grunt, Webpack và các hệ thống khác. Và mỗi người trong số họ có thuật toán riêng để nén và kết nối các tập tin.
Ngoài ra, kết quả rút gọn có thể hoạt động khác nhau trên các hệ điều hành khác nhau. Nói chung là có nhiều lý do.
Và bản thân mã nguồn, tôi nghĩ, không nặng đến mức họ cần thủ tục này. Nhưng nếu bạn cần chúng, thì hãy tự mình định cấu hình thu nhỏ, có tính đến hệ điều hành và bộ sưu tập của bạn.
Như tôi đã viết ngay từ đầu, để giải quyết nhiệm vụ đặt ra ban đầu cho mình, tôi cần lấy một tệp JS duy nhất để sử dụng đúng thanh trượt của mình thông qua dịch vụ của bên thứ ba trên trang web. Vì lý do này, nói đúng ra, tôi không sử dụng các thư viện làm sẵn của bên thứ ba.
Sau đó, tùy chọn kịch bản đơn Băng chuyền JavaScript sẽ có ích cho bạn, bởi vì... tất cả nội dung sẽ được chứa trực tiếp trong đó, bao gồm cả mã HTML/CSS, trong trường hợp thư viện được lưu trữ trong các tệp riêng biệt.
Kịch bản trong trường hợp của tôi bao gồm hai phần. Phần đầu tiên chứa nội dung của tệp PopupSlider.js mà tôi sẽ không trình bày lần thứ hai. Hãy tự chèn nó vào, loại bỏ mô tả của phương thức LoadStatic() và lệnh gọi của nó khỏi mã lớp, bởi vì chúng ta sẽ không cần chúng.
Phần thứ hai của một tập lệnh thanh trượt JavaScript duy nhất cho trang web là trình xử lý sự kiện DOMContentLoaded, xảy ra khi nội dung trang được tải.
Ở đó, chúng ta sẽ thêm mã JS băng chuyền vào trang HTML/CSS và tạo một đối tượng của lớp Slider, tương đương với việc kích hoạt chính thanh trượt đó.
Theo sơ đồ mã trông như thế này:
/* nội dung của PopupSlider.js mà không mô tả phương thức LoadStatic() và lệnh gọi của nó */ document.addEventListener("DOMContentLoaded", function())( var str = "\ \ /*css code*/ \ /* Mã HTML*/ "; var div = document.createElement("div"); div.innerHTML = str; document.body.appendChild(div); var aSlider = new Slider("#slider");
Vì trong trường hợp của tôi, tùy chọn tải tệp lên máy chủ đã hoàn toàn bị đóng, tôi phải tải tệp hình ảnh của điều khiển băng chuyền JavaScript lên đám mây và thay vì đường dẫn đến chúng bằng mã HTML và CSS, hãy viết các liên kết được tạo trong quá trình tiết kiệm.
Nếu bạn không gặp khó khăn như vậy thì bạn không phải thay đổi bất cứ điều gì, nhưng đừng quên sao chép các thư mục thư viện slide và điều khiển vào máy chủ và chỉ định đường dẫn chính xác đến chúng.
Thanh trượt JS tùy chỉnh - triển vọng phát triểnThành thật mà nói, tôi không có ý định tham gia vào việc hỗ trợ và phát triển có mục tiêu giải pháp mà tôi đã tạo ra :) Hiện tại, có rất nhiều thanh trượt tương tự và một chiếc xe đẩy nhỏ, không giống như của tôi, có lịch sử riêng, đã được kiểm tra kỹ lưỡng và được hỗ trợ bởi một cộng đồng lớn người dùng và nhà phát triển.
Bằng cách nào đó, đối với tôi, thật không thú vị khi bắt đầu toàn bộ hành trình này từ đầu và tạo ra một chiếc xe đạp khác, và tôi thực sự không có thời gian cho việc đó. Tuy nhiên, mặt khác, thanh trượt JavaScript này là cơ hội tuyệt vời để thực hành phát triển bằng cách cấu trúc lại mã của nó và triển khai các chức năng thú vị mới có thể chưa tồn tại.
Vì vậy, nếu bạn, giống như tôi, cần cơ sở mã cho các thử nghiệm và bạn có ít nhất một số thời gian rảnh— sao chép mã của thanh trượt JavaScript mà tôi đã mô tả hoặc tham gia cùng những người đóng góp trên GitHub. Kho lưu trữ mở và tôi đã cung cấp liên kết tới nó ở đầu bài viết.
Nếu bạn muốn cải thiện kỹ năng giao diện người dùng của mình trong tác phẩm của tôi, tôi thậm chí có thể cung cấp cho bạn một danh sách nhỏ các chỉnh sửa và cải tiến mà mã cần và có thể khiến bạn quan tâm về mặt triển khai chúng:
Tất nhiên, danh sách các chỉnh sửa tôi đưa ra chưa phải là cuối cùng và có thể được bổ sung. Hãy viết những đề xuất, suy nghĩ và mong muốn của bạn ở phần bình luận bên dưới bài viết và chia sẻ với bạn bè qua truyền thông xã hội cũng để họ tham gia vào quá trình phát triển.
Tôi yêu cầu bạn không đánh giá mã của tôi một cách nghiêm khắc, bởi vì, như tôi đã nói, tôi không coi mình là chuyên gia Frontend và không phải vậy. Tôi cũng sẵn sàng đón nhận mọi nhận xét của bạn về phong cách viết mã và hy vọng rằng tôi có thể học được điều gì đó từ bạn và bạn từ tôi, tức là. thực hiện mục đích chính là phát triển và hỗ trợ các sản phẩm OpenSource.
Tham gia cộng đồng dự án, đăng ký nhận thông tin cập nhật và thậm chí bạn có thể giúp tôi về mặt tài chính bằng cách sử dụng biểu mẫu ngay bên dưới bài viết, nếu tôi có thể giúp bạn điều gì đó hoặc bạn thích những gì tôi làm :)
Đó là tất cả những gì tôi muốn nói! Mọi điều tốt đẹp nhất! 🙂
tái bút : nếu bạn cần một trang web hoặc cần thay đổi trang web hiện có, nhưng không có thời gian hoặc mong muốn cho việc này, tôi có thể cung cấp dịch vụ của mình.
Hơn 5 năm kinh nghiệm phát triển website chuyên nghiệp. Làm việc với PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular và các công nghệ phát triển web khác.
Kinh nghiệm phát triển dự án nhiều cấp độ khác nhau: trang đích, trang web công ty, cửa hàng trực tuyến, CRM, cổng thông tin. Bao gồm hỗ trợ và phát triển các dự án HighLoad. Gửi đơn đăng ký của bạn qua email [email được bảo vệ].
1. băng chuyền jQuery"nhấp vàoBăng chuyền"
Chặn với các thông báo tin tức cuộn. Sử dụng mũi tên trái/phải để di chuyển qua các khối. Trong kho lưu trữ có một băng chuyền làm hai tạo kiểu: sáng và tối.
1. Băng chuyền jQuery, plugin “carouFredSel”
Một băng chuyền hình ảnh gọn gàng, mới mẻ trong jQuery.
4. Plugin jQuery: băng chuyền “Elastislide”
Thanh trượt nội dung tuyệt vời ở dạng băng chuyền hình ảnh với sử dụng jQuery. Trang demo mô tả cách đính kèm băng chuyền này vào trang web của bạn.
Cắm vào " Bộ thanh trượt", một băng chuyền nhẹ với nhiều phương pháp cuộn khác nhau.
7. băng chuyền javascript
Điều hướng ban đầu giữa các hình thu nhỏ của hình ảnh. Để xem hiệu ứng ở phía bên phải của trang demo, hãy nhấp vào nút Lên và Xuống. Giải pháp jQuery này cũng cung cấp hiệu ứng di chuột trên hình thu nhỏ và cuộn bằng con lăn chuột.
9. Băng chuyền dễ dàng 10. Băng chuyền được làm từ các khối “Easy Paginate”
Plugin jQuery "Phân trang dễ dàng". Mỗi khối hình chữ nhật đại diện cho một mục danh sách li thông thường và nếu có nhiều hơn ba mục thì để xem tất cả chúng, bạn cần sử dụng điều hướng giống thanh trượt (sử dụng mũi tên tiến và lùi và sử dụng các nút điều hướng ở phía dưới).
11. Công cụ quay vòng Ticker dọc
Công cụ quay dọc trên jQuery: tự động cuộn nội dung trên trang. Các nút điều hướng được cung cấp cũng như khả năng dừng xoay và bắt đầu lại. Khi bạn di con trỏ chuột, chuyển động sẽ dừng lại. Ở cấp độ đánh dấu HTML, các khối cuộn được thể hiện bằng các mục danh sách li thông thường.
12. Vùng cuộn CSS của javascript
giải pháp javascript "TinyScroller" để tạo vùng cuộn được đặt trong vùng chứa DIV.
13. Plugin jQuery “Smooth Div Scroll”
Plugin để thực hiện cuộn nội dung theo chiều ngang trong một khu vực cụ thể. Khi bạn di chuột qua cạnh trái hoặc phải của khu vực, quá trình cuộn sẽ bắt đầu.
Việc điều hướng giữa các slide nội dung có thể được thực hiện bằng cách sử dụng mũi tên hoặc bằng cách nhấp vào hình thu nhỏ. Ở phía dưới có nút “Hiển thị” cho phép bạn ẩn/hiện hình thu nhỏ hoặc Mô tả đầy đủ cầu trượt.
15. Công cụ quay vòng nội dung “Băng chuyền nội dung tròn”
Một khối có thanh cuộn xuất hiện khi bạn di con trỏ. Bạn có thể cuộn nội dung bằng thanh cuộn hoặc con lăn chuột.
Giải pháp jQuery này được lấy cảm hứng từ hiệu ứng tương tự trên trang web của Apple. Các nhà phát triển của tập đoàn này luôn tìm ra những giải pháp thú vị đã truyền cảm hứng cho các quản trị viên web từ khắp nơi trên thế giới. Để trình diễn plugin, hãy chọn một danh mục từ danh sách.
19. Thanh trượt tuyệt vời
Thanh trượt được tạo tự động. Dữ liệu có tên sản phẩm, mô tả, liên kết và địa chỉ hình ảnh được lấy từ tệp Slider.db.txt. Công nghệ sử dụng: CSS, PHP, jQuery.
20. Xoay khối bằng jQuery
Để xem hiệu ứng xoay khối, hãy nhấp vào một trong các hình chữ nhật nhỏ trên trang demo
Ví dụ: một plugin cuộn nội dung có thể được sử dụng để hiển thị tin tức mới nhất hoặc hiển thị tờ rơi Twitter trên một trang web.
22. Khối động “Đánh giá của khách hàng”
Tự động xoay nội dung khối. Công nghệ sử dụng: PHP, XML, CSS, jQuery.
Plugin này chuyển đổi các mục danh sách (ul li) thành phần tử jQuery băng chuyền.
26. băng chuyền javascript “ImageFlow”
Thật dễ dàng để cuộn qua các hình ảnh bằng con lăn chuột.
27. Di chuyển nội dung
Một khối nhỏ gọn chứa thông báo về các tài liệu hoặc tin tức mới nhất trên trang web. Cột bên trái hiển thị danh sách được phân trang gồm các thông báo ngắn về tin tức mới nhất. Khi bạn chọn một trong số chúng, mô tả chi tiết hơn và liên kết để đọc sẽ được hiển thị ở cột bên phải toàn vănấn phẩm. Được triển khai bằng jQuery.
Hình ảnh có chứa link được cuộn, khi bạn di chuột thì quá trình cuộn dừng lại và thanh điều hướng xuất hiện. Khi bạn di chuột qua ảnh, tên của ảnh cũng được hiển thị giữa các nút điều khiển. Nhìn trên trang rất đẹp
33. Cuộn nội dung, plugin Mootools “Scrollbar”
Việc cuộn được thực hiện bằng cả thanh cuộn và con lăn chuột.
