Chúng tôi tự tạo thanh trượt nội dung Jquery. Plugin trượt jQuery. Thanh trượt jQuery đẹp mắt "Chu kỳ trình bày"
Thời gian không đứng yên và cùng với nó là sự tiến bộ. Điều này cũng ảnh hưởng đến Internet. Bạn có thể thấy diện mạo của các trang web đang thay đổi như thế nào; thiết kế thích ứng đặc biệt phổ biến. Và về vấn đề này, khá nhiều thanh trượt jquery thích ứng, phòng trưng bày, băng chuyền hoặc các plugin tương tự đã xuất hiện.
1. Thanh trượt bài viết ngang đáp ứng
Băng chuyền ngang thích ứng với hướng dẫn chi tiết về cài đặt. Nó đã được hoàn thành vào phong cách đơn giản, nhưng bạn có thể tạo kiểu cho phù hợp với mình.
2. Thanh trượt trên Glide.js
Thanh trượt này phù hợp với bất kỳ trang web nào. Nó sử dụng Glide.js với mã nguồn mở. Màu sắc của thanh trượt có thể dễ dàng thay đổi.
3. Trình chiếu nội dung nghiêng
Thanh trượt nội dung đáp ứng. Điểm nổi bật của thanh trượt này là hiệu ứng 3D của hình ảnh cũng như các hình ảnh động khác nhau xuất hiện ngẫu nhiên.
4. Thanh trượt sử dụng canvas HTML5
Một thanh trượt rất đẹp và ấn tượng với các hạt tương tác. Nó được tạo bằng canvas HTML5,
5. Thanh trượt biến đổi hình ảnh
Thanh trượt có hiệu ứng biến hình (Chuyển đổi mượt mà từ đối tượng này sang đối tượng khác). TRONG trong ví dụ này Thanh trượt rất phù hợp với danh mục đầu tư của nhà phát triển web hoặc studio web dưới dạng danh mục đầu tư.
6. Thanh trượt tròn
Thanh trượt có dạng hình tròn có tác dụng lật ảnh.
7. Thanh trượt có nền mờ
Thanh trượt thích ứng với tính năng chuyển đổi và làm mờ nền.
8. Thời trang thích ứng thanh trượt
Thanh trượt trang web đơn giản, nhẹ và đáp ứng.
9. Slicebox - Thanh trượt hình ảnh jQuery 3D (CẬP NHẬT)
Phiên bản cập nhật của thanh trượt Slicebox với các bản sửa lỗi và tính năng mới.
10. Lưới hình ảnh đáp ứng hoạt hình miễn phí
Plugin JQuery để tạo lưới hình ảnh linh hoạt sẽ chuyển đổi các bức ảnh bằng cách sử dụng các hoạt ảnh và thời gian khác nhau. Điều này có thể trông đẹp như một nền tảng hoặc thành phần trang trí trên một trang web, vì chúng ta có thể xuất hiện một cách có chọn lọc các hình ảnh mới và quá trình chuyển đổi của chúng. Plugin có nhiều phiên bản.
11. Thanh trượt linh hoạt
Phổ quát plugin miễn phí cho trang web của bạn. Plugin này có nhiều tùy chọn thanh trượt và băng chuyền.
12. Khung ảnh
Fotorama là một plugin phổ quát. Nó có nhiều cài đặt, mọi thứ hoạt động nhanh chóng và dễ dàng và bạn có thể xem các slide ở chế độ toàn màn hình. Thanh trượt có thể được sử dụng ở cả kích thước cố định và thích ứng, có hoặc không có hình thu nhỏ, có hoặc không có cuộn tròn, v.v.
tái bút Tôi đã cài đặt thanh trượt nhiều lần và tôi nghĩ rằng đó là một trong những thanh trượt tốt nhất
13. Thư viện thanh trượt 3D miễn phí và thích ứng với hình thu nhỏ.
Thư viện thanh trượt thử nghiệm 3DPanelLayout với lưới và các hiệu ứng hoạt hình thú vị.
14. Thanh trượt trên css3
Thanh trượt đáp ứng được thực hiện bằng css3 với vẻ ngoài mịn màng nội dung và hoạt hình nhẹ nhàng.
15. Thanh trượt WOW
WOW Slider là một thanh trượt hình ảnh với hiệu ứng hình ảnh tuyệt vời.
17. Đàn hồi
Thanh trượt đàn hồi với khả năng phản hồi đầy đủ và hình thu nhỏ của trang trượt.
18. Khe hở
Đây là thanh trượt đáp ứng toàn màn hình sử dụng hoạt ảnh css3. Thanh trượt được thực hiện trong hai phiên bản. Hoạt hình được thực hiện khá khác thường và đẹp mắt.
19. Thư viện ảnh thích ứng cộng thêm
Thanh trượt thư viện miễn phí đơn giản có tính năng tải hình ảnh.
20. Thanh trượt đáp ứng cho WordPress
Thanh trượt miễn phí thích ứng cho WP.
21. Thanh trượt nội dung thị sai
Thanh trượt với hiệu ứng thị sai và kiểm soát từng phần tử bằng CSS3.
22. Thanh trượt có link nhạc
Thanh trượt sử dụng mã nguồn mở JPlayer. Thanh trượt này giống như một bản trình bày có âm nhạc.
23. Thanh trượt với jmpress.js
Thanh trượt đáp ứng dựa trên jmpress.js và do đó sẽ cho phép bạn thêm một số hiệu ứng 3D thú vị vào các trang trình bày của mình.
24. Trình chiếu di chuột nhanh
Trình chiếu với khả năng chuyển đổi slide nhanh chóng. Chuyển đổi slide khi di chuột.
25. Hình ảnh phù hợp với CSS3
Hình ảnh accordion sử dụng css3.
26. Plugin thư viện được tối ưu hóa cho cảm ứng
Cái này thư viện đáp ứngđược tối ưu hóa cho các thiết bị cảm ứng.
27. Phòng trưng bày 3D
Thư viện tường 3D - được tạo cho trình duyệt Safari, nơi hiệu ứng 3D sẽ hiển thị. Nếu bạn xem nó trên một trình duyệt khác, chức năng sẽ ổn nhưng hiệu ứng 3D sẽ không hiển thị.
28. Thanh trượt có phân trang
Thanh trượt đáp ứng với phân trang bằng thanh trượt UI JQuery. Ý tưởng là sử dụng một khái niệm điều hướng đơn giản. Có thể tua lại tất cả hình ảnh hoặc chuyển đổi từng slide.
29. Montage hình ảnh với jQuery
Tự động sắp xếp hình ảnh theo chiều rộng màn hình. Một điều rất hữu ích khi phát triển một trang web portfolio.
30. Phòng trưng bày 3D
Thanh trượt tròn 3D đơn giản sử dụng css3 và jQuery.
31. Chế độ toàn màn hình với hiệu ứng 3D sử dụng css3 và jQuery
Một thanh trượt có khả năng xem hình ảnh toàn màn hình với chuyển tiếp đẹp mắt.
Adaptive, hay nếu bạn thích, thiết kế web responsive giờ đây không chỉ là một xu hướng thiết kế khác mà nó đã là một tiêu chuẩn nhất định để phát triển trang web, đảm bảo tính linh hoạt của trang web, nhận thức trực quan hài hòa trên các màn hình khác nhau thiết bị người dùng. Gần đây hơn, khi phát triển một mẫu đáp ứng, tôi đã phải đối mặt với nhiều khó khăn khác nhau trong việc tích hợp một số thanh trượt và thư viện hình ảnh nhất định mà không làm ảnh hưởng đến phong cách thiết kế tổng thể. Bây giờ mọi thứ đơn giản hơn nhiều, có một số lượng lớn giải pháp làm sẵn và điều đặc biệt hài lòng là hầu hết họ đều ở trong kết nối miễn phí, với mở mã nguồn.
Do có nhiều công cụ được cung cấp nên tôi đã biên soạn Đánh giá ngắn những phát triển đáng chú ý nhất của thanh trượt hình ảnh jQuery đáp ứng xuất hiện nhiều nhất Gần đây và phân phối mà không có bất kỳ hạn chế nào, tức là hoàn toàn miễn phí.
Thanh trượt WOWThanh trượt hình ảnh jQuery đáp ứng với một bộ tuyệt vời hiệu ứng hình ảnh(rẽ, khởi hành, làm mờ, xoắn ốc, rèm, v.v.) và nhiều các mẫu làm sẵn. Với trình hướng dẫn chèn trang tích hợp của WOW Slider, bạn có thể dễ dàng và dễ dàng tạo các trình chiếu tuyệt đẹp trong vài phút. Trang web của nhà phát triển chứa tất cả tài liệu cần thiết để thiết lập và sử dụng plugin bằng tiếng Nga, cũng như các ví dụ trực tiếp tuyệt vời về cách hoạt động của plugin. Một plugin WordPress riêng biệt và một mô-đun dành cho Joomla cũng có sẵn để tải xuống. Tôi chắc chắn rằng nhiều người sẽ thích thanh trượt tuyệt vời này, cả người mới bắt đầu và quản trị viên web có kinh nghiệm.
HiSliderHiSlider - HTML5, thanh trượt Jquery và thư viện hình ảnh, plugin hoàn toàn miễn phí để sử dụng cá nhân trên các trang web chạy hệ thống phổ biến - WordPress, Joomla, Drupal. Với cách này đơn giản nhưng khá công cụ chức năng, bạn có thể dễ dàng tạo các trình chiếu tuyệt vời và sống động, các bản trình bày ngoạn mục và thông báo về các tin nhắn mới trên các trang của trang web của bạn. Một số mẫu và giao diện được tạo sẵn cho thanh trượt, hiệu ứng chuyển tiếp (thay đổi) nội dung tuyệt đẹp, đầu ra của nhiều nội dung đa phương tiện khác nhau: video từ YouTube và Vimeo, linh hoạt cài đặt tùy chỉnh vân vân...
Nivo Slider là một cái cũ tốt, được nhiều người biết đến, một trong những thanh trượt hình ảnh đẹp nhất và dễ sử dụng nhất. Plugin JQuery Nivo Slider được tải xuống và sử dụng miễn phí và được cấp phép theo giấy phép MIT. Ngoài ra còn có một plugin riêng dành cho WordPress, nhưng tiếc là nó đã được trả phí và bạn sẽ phải trả $29 cho một giấy phép. Tốt hơn hết bạn nên thực hiện một chút phép thuật với các tệp chủ đề WP và đính kèm phiên bản jQuery miễn phí của plugin Nivo Slider vào blog của bạn, vì có rất nhiều thông tin về cách thực hiện việc này trên Internet.
Về chức năng, mọi thứ đều ổn với điều này theo thứ tự hoàn hảo. Dùng cho công việc thư viện jQuery v1.7+, hiệu ứng đẹp chuyển tiếp, cài đặt đơn giản và rất linh hoạt, bố cục thích ứng, cắt ảnh tự động và hơn thế nữa.
Ý tưởng về thanh trượt được lấy cảm hứng từ các nhà phát triển, những người nổi tiếng với phong cách trình bày của họ sản phẩm của Apple, trong đó một số đối tượng nhỏ (hình ảnh) thay đổi bằng cách nhấp vào danh mục đã chọn với hiệu ứng hoạt hình đơn giản. Codrops cung cấp cho bạn một bài học chi tiết về cách tạo thanh trượt này, bố cục hoàn chỉnh của đánh dấu Html, một bộ Quy tắc CSS và một plugin jQuery có thể thực thi cũng như một ví dụ trực tiếp tuyệt vời về cách sử dụng thanh trượt.
Thanh trượt hình ảnh toàn màn hình sử dụng JQuery và CSS3 + hướng dẫn chi tiết về tích hợp plugin vào các trang website. Ý tưởng là cắt slide hiện tại đang mở với nội dung cụ thể khi chuyển sang nội dung tiếp theo hoặc trước đó. Sử dụng hoạt ảnh JQuery và CSS, bạn có thể tạo các hiệu ứng chuyển tiếp độc đáo giữa các trang chiếu. Bố cục đáp ứng của thanh trượt đảm bảo rằng nó trông đẹp như nhau trên các loại màn hình thiết bị người dùng khác nhau.
Thanh trượt nội dung tự động điều chỉnh chiều rộng và chiều cao tùy thuộc vào kích thước của vùng chứa chính chứa nó. Khá đơn giản để thực hiện và linh hoạt trong cài đặt, thanh trượt chạy trên JQuery, có điều hướng ở phía dưới, khi kích thước màn hình giảm xuống, điều hướng được hiển thị dưới dạng biểu tượng. Tài liệu rất chi tiết (hướng dẫn tạo) và các ví dụ trực tiếp về cách sử dụng.
Phiên bản thử nghiệm của thanh trượt thể hiện hình ảnh có chuyển tiếp từ mặt phẳng 3D. Các hình ảnh được chia thành hai ngăn xếp ngang, sử dụng các mũi tên điều hướng để thay đổi và chuyển từng hình ảnh tiếp theo sang trạng thái xem. Nhìn chung không có gì đặc biệt nhưng bản thân ý tưởng và kỹ thuật thực hiện khá thú vị.
Thanh trượt hình ảnh jQuery toàn màn hình, đáp ứng 100% và rất đơn giản. Hoạt động của thanh trượt dựa trên các chuyển đổi CSS (thuộc tính transition) kết hợp với sự kỳ diệu của jQuery. Giá trị chiều rộng tối đa được đặt thành 100% theo mặc định, do đó kích thước của hình ảnh sẽ thay đổi tùy theo thay đổi về kích thước màn hình. Không có hiệu ứng hoạt hình đặc biệt hay rườm rà trong thiết kế, mọi thứ đều đơn giản và được thiết kế để vận hành không gặp sự cố.
Cái tên đã nói lên điều đó, đây có lẽ là một trong những thanh trượt hình ảnh jQuery nhẹ và tối giản nhất mà tôi từng gặp (plugin 1kb). ResponsiveSlides.js là một plugin JQuery nhỏ giúp tạo trình chiếu bằng cách sử dụng các phần tử bên trong vùng chứa. Hoạt động với nhiều loại trình duyệt, bao gồm tất cả các phiên bản IE - chiếc phanh nổi tiếng về tiến độ, từ IE6 trở lên. Tác phẩm sử dụng các chuyển tiếp CSS3 kết hợp với javascript để đảm bảo độ tin cậy. Đánh dấu đơn giản sử dụng danh sách không có thứ tự, cài đặt chuyển tiếp và khoảng thời gian, điều khiển chuyển đổi trang chiếu tự động và thủ công, cũng như hỗ trợ nhiều trình chiếu cùng một lúc. Đây là một "em bé" vui tươi.
Máy ảnh - jQuery miễn phí plugin tổ chức trình chiếu trên các trang web, thanh trượt nhẹ với nhiều hiệu ứng chuyển tiếp, bố cục đáp ứng 100% và rất cài đặt đơn giản. Hoàn toàn phù hợp trên màn hình của mọi thiết bị người dùng (màn hình PC, máy tính bảng, điện thoại thông minh và Điện thoại cầm tay). Khả năng trình diễn video nhúng. Tự động thay đổi slide và điều khiển thủ công bằng cách sử dụng các nút và khối hình thu nhỏ của hình ảnh. Một bộ sưu tập hình ảnh gần như hoàn chỉnh trong một thiết kế nhỏ gọn.
Một thanh trượt phản hồi khá đơn giản khác trong jQuery. Bạn có thể đặt bất kỳ nội dung, video, hình ảnh, văn bản và các thành phần khác trên trang trình bày của mình. Hỗ trợ mở rộng cho màn hình cảm ứng. Sử dụng hoạt ảnh chuyển tiếp CSS. Một số lượng lớn các biến thể khác nhau của trình chiếu và thư viện hình ảnh nhỏ gọn. Điều khiển tự động và bằng tay. Chuyển đổi các slide bằng cách sử dụng các nút và bằng cách chọn hình thu nhỏ. Kích thước tệp nguồn nhỏ, rất dễ cấu hình và thực hiện.
FlexSlider 2 - Phiên bản cập nhật của thanh trượt cùng tên, với khả năng phản hồi được cải thiện, thu nhỏ tập lệnh và giảm thiểu hiện tượng chỉnh lại/vẽ lại. Plugin bao gồm một thanh trượt cơ bản, điều khiển trượt bằng hình thu nhỏ, mũi tên trái phải tích hợp và thanh điều hướng phía dưới dưới dạng nút. Khả năng hiển thị video trong slide (vimeo), cài đặt linh hoạt (chuyển tiếp, thiết kế, khoảng thời gian), bố cục hoàn toàn thích ứng.
Một plugin jQuery đáp ứng nổi tiếng và khá phổ biến để tạo các thư viện hình ảnh và thanh trượt chất lượng cao. Giao diện thanh trượt, nhờ bảng điều khiển, trông giống như một trình phát video quen thuộc; plugin bao gồm một số chủ đề thiết kế khác nhau. Hỗ trợ video và hình ảnh được nhúng từ các dịch vụ phổ biến: Flickr, Vimeo, YouTube và các dịch vụ khác. Tài liệu chi tiết về thiết lập và sử dụng.
Thanh trượt hình ảnh jQuery miễn phí đơn giản, không rườm rà được viết riêng cho thiết kế web đáp ứng. Blueberry là một plugin jQuery mã nguồn mở thử nghiệm. Thiết kế tối giản, không có hiệu ứng, chỉ có các hình ảnh pop-up mượt mà thay thế nhau sau một khoảng thời gian nhất định. Mọi thứ đều rất đơn giản, cài đặt, kết nối và sử dụng...
Thanh trượt hình ảnh jQuery rất nhỏ gọn với các thành phần Hộp đèn. Nhờ kích thước linh hoạt, rất dễ dàng tích hợp vào bất kỳ vùng chứa nào, vào một mục duy nhất dưới dạng hình thu nhỏ, khi di con trỏ chuột hoặc nhấp vào chúng, hộp đèn có hình ảnh phóng to và các điều khiển sẽ được kích hoạt. Thật thuận tiện khi đặt một thanh trượt như vậy ở bảng bên để trình bày sản phẩm hoặc thông báo tin tức. Một giải pháp tuyệt vời cho các trang web có lượng thông tin lớn.
Thanh trượt đáp ứng miễn phí với các chuyển tiếp CSS3 nâng cao. Phong cách tối giản, 3 chủ đề thiết kế, Mỗi khung hình trượt ngang, xuất hiện ở giữa, hình ảnh ở bên trái, chữ ký ở bên phải, hình thu nhỏ được nhân đôi ở góc dưới bên phải. Phân trang các lượt xem sản phẩm sẽ được xem trong mỗi khung. Các điều khiển cũng bao gồm các nút quay lại và chuyển tiếp. Hỗ trợ từ mọi người trình duyệt hiện đại.
Một thanh trượt hình ảnh rất đơn giản cả về chức năng và cài đặt, trong số các cài đặt có sự thay đổi về tốc độ thay đổi slide, kích hoạt chế độ thủ công (các nút điều khiển được kích hoạt), trình chiếu liên tục. Thanh trượt này có quyền tồn tại và nó thu hút tôi chỉ vì nó tồn tại; tôi không tìm thấy điều gì đặc biệt thú vị trong sự phát triển này, có lẽ tôi đã không tìm kiếm nó kỹ)))
Thanh trượt hình ảnh thích ứng đẹp mắt của Vladimir Kudinov các đồng chí ạ. Một công cụ vững chắc, được thiết kế tốt, có ví dụ rõ ràng và hướng dẫn chi tiết về việc tạo, cài đặt và sử dụng. Thiết kế thích ứng, các nút đẹp và mũi tên xanh, mọi thứ khá đẹp và êm dịu, không có áp lực.
Plugin thanh trượt JQuery miễn phí với hiệu ứng thị sai cho hình ảnh và trang trình bày văn bản. Hoạt ảnh slide có nhiều giá trị hiển thị với toàn quyền kiểm soát trong mỗi tham số thời gian và hoạt ảnh. Khả năng tạo hiệu ứng động cho nhiều phần tử trên một slide cùng một lúc. Bạn có thể cài đặt Các phương pháp khác nhau hoạt ảnh, mờ dần trang chiếu hoặc chuyển tiếp từ một hướng nhất định. Tự động hiển thị và điều khiển thủ công bằng cách sử dụng các mũi tên điều hướng bật lên khi bạn di chuột qua hình ảnh. 10 loại hiệu ứng hoạt hình slide và hơn thế nữa...
Đánh giá hóa ra khá rộng rãi, nhưng không đủ thông tin do số lượng lớn sản phẩm được xem xét. Mọi chi tiết và mô tả chi tiết chức năng về plugin này hoặc plugin kia, bạn có thể tìm hiểu trực tiếp trên trang của nhà phát triển. Tôi chỉ có thể hy vọng rằng tôi đã giúp ai đó dễ dàng tìm thấy công cụ rất cần thiết đó để tạo thanh trượt hình ảnh đầy màu sắc trên các trang trên trang web của họ.
Với tất cả sự tôn trọng, Andrew
Đô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.
Gọi điện nhu cầu này là kết quả phải là một tập lệnh JS sẽ được kết nối với trang web thông qua dịch vụ của bên thứ ba. 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, 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:
Tôi đặt cả kiểu đánh dấu HTML và kiểu CSS 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 sẽ rất khó để tùy chỉnh giải pháp này trong các điều kiện quy định.
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 quan trọng là đừng quên điều đó trong Ý nghĩa của JavaScriptđiều này phụ thuộc vào ngữ cảnh của lệnh gọi, do đó, trong phần thân 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 lớp, có cấu trúc như sau:
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ớ với sử dụng JavaScript hàm 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 bằng cách sử dụng phương thức JavaScriptappendChild() ở 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. Ví dụ: có các thư viện đặc biệt cho việc này, để đư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 đó để đưa tệp CSS vào 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 để thay thế:
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 thức này của lớp thanh trượt JavaScript của chúng tôi chịu trách nhiệm 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 thức này, tôi đã sao chép mã từ sự kiện nhấp chuột của các nút trượt thủ công và đặt nó bên trong lệnh gọi JavaScript tới hàm setInterval(), hàm này thực hiện hành động đã chỉ định sau một khoảng thời gian xác định.
Tập lệnh hành động được truyề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 truyề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 truyề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ó để thực hiện chuyển đổi tự động theo chu kỳ.
Vâng, và để mã này kiếm được thì 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 đã đặt cuộc gọi ở cuối, chuyển làm đối số giá trị của khoảng thời gian để tự động thay đổi các trang chiếu 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 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 trang chiếu cuối cùng, chương trình sẽ chuyển sang một vòng lặp mới và chương trình sẽ 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 sẽ 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 quá trình hiển thị tự động của các trang trình bày băng chuyền JavaScript, 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.
Để làm được điều này bạn phải thực hiện tuần tự bước tiếp theo, đây là những hành động tiêu chuẩn khi tích hợp bất kỳ thư viện JavaScript của bên thứ ba nào nói chung.
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ì các slide của chúng tôi được lấy từ một thư mục riêng của thư viện slide, nên khi thêm ảnh mới, bạn sẽ chỉ cần ném các tệp cần thiết vào đó, trước tiên hãy cung cấp cho chúng cùng kích thước với các ảnh khác.
Và sau đó, trong mã của tệp assets/popupSlider.html, hãy thêm một khối mới vào vùng chứa bằng 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 phải thêm phần tử mớiđiều hướng ở dạng vòng tròn, bởi vì TRÊN khoảnh khắc này 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 của một Tập lệnh JavaScript Băng chuyền 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 = "\ \ /* mã css*/ \ /* 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ủ thường bị đóng nên tôi phải tải tệp hình ảnh của các thành phần lên Điều khiển JavaScript băng chuyền lên đám mây và thay vì đường dẫn đến chúng trong mã HTML và CSS, hãy viết các liên kết được tạo khi lưu.
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 hỗ trợ và phát triển có mục tiêu cho 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 đó, không có gì thú vị đối với tôi 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ãđể thử nghiệm và bạn có ít nhất một chút 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ệ].
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ỉ sử dụ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”. Đây là một công cụ tiện lợi để xem hình ảnh ở kích thước lớn với khả năng người dùng chuyển đổi slide tiến và lùi. Trong trường hợp này, các hình ảnh thường tự động chuyển qua 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ã cho ứng dụng của mình. 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ả giao diện của khung, 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- bóng: 0 0 7px #010, 0 0 10px xanh, 0 0 15px #010, 0 0 35px #010; ) /* Chỉnh sửa hiển thị hình ảnh*/ img ( width: auto; Height: 390px; đệm: 13px; ) /* Cho biết các mục trong danh sách nội dung sẽ được hiển thị ở giữa phần tử cha, tức là 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 chính các slide */ .slide( location: tuyệt đối; opacity: 0 ; trên cùng: 0px; bên trái: 0px; chiều cao: 100%; chỉ mục 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,5s; ) /*Khi hiển thị một đối tượng sẽ hiển thị và di chuyển lên nền 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 một phần tử bộ sưu tập mới 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.
Cách đây một thời gian, tôi đã bắt đầu học jQuery. Tôi nghĩ mọi người đều biết rằng đây là tên của thư viện phổ biến nhất để phát triển và tạo tập lệnh trong JavaScript. Với sự trợ giúp của nó, bạn có thể dễ dàng tạo ra những bức ảnh ngoạn mục và yếu tố tương tácđịa điểm.
Trong bài viết này, tôi muốn cho bạn biết cách tạo một thanh trượt phổ quát đơn giản với sử dụng jQuery. Trên thực tế, có một số lượng rất lớn các thanh trượt làm sẵn khác nhau trên Internet, đôi khi trông rất hấp dẫn và khá chức năng, nhưng chúng tôi sẽ làm lại từ đầu.
Vì vậy, những tính năng nào của thanh trượt jQuery của chúng tôi (mà tôi gọi là HWSlider) có thể được lưu ý?
- Dễ sử dụng và thiết kế - Tôi muốn tạo một tập lệnh đơn giản không có chuông và còi, vì vậy tôi đã không sử dụng hoạt ảnh CSS3 và mã hóa ra rất linh hoạt và dễ hiểu.
- Khả năng chèn cả hình ảnh và bất kỳ mã HTML nào vào slide.
- Khả năng cuộn qua các slide theo thứ tự (tiến - lùi) và chọn từng slide (1,2,3,4...)
- Các liên kết được tạo tự động (trước - tiếp theo và có số trang trình bày). Bạn chỉ cần chèn số lượng div cần thiết và mọi thứ khác sẽ tự tính toán. Vâng, có thể lưu ý rằng số lượng slide là không giới hạn.
Tập lệnh tương thích với tất cả các trình duyệt hiện đại: IE, Opera, Firefox, Safari, Chrome (vì thanh trượt không sử dụng CSS3).
Hãy bắt đầu với đánh dấu HTML. Trang hoặc mẫu HTML cần được chèn vào vị trí cần thiết.
Đây là nội dung slide 1 Đây là nội dung slide 2 Đây là nội dung slide 3
Mọi thứ ở đây đều đơn giản, như bạn có thể thấy, bạn có thể chèn bao nhiêu slide tùy thích bằng cách tạo các div mới. Bạn có thể chèn bất kỳ mã HTML nào vào bên trong chúng, ví dụ như hình ảnh hoặc khối văn bản. Chỉ cần đừng quên bao gồm chính thư viện jQuery cùng với tất cả các tập lệnh js. Nếu bạn không biết cách, hãy xem ví dụ.
#slider-wrap( /* Wrapper cho thanh trượt và các nút */ width:660px; ) #slider( /* Wrapper cho thanh trượt */ width:640px; Height:360px; tràn: ẩn; viền:#eee Solid 10px; vị trí:tương đối; ) .slide( /* Slide */ width:100%; chiều cao:100%; ) .sli-links( /* Các nút để thay đổi trang trình bày */ lề-top:10px; text-align:center;) .sli-links . control-slide(margin:2px; display:inline-block; width:16px; chiều cao:16px; tràn:ẩn; text-indent:-9999px; nền:url(radioBg.png) trung tâm phía dưới không- lặp lại;) .sli -links .control-slide:hover( con trỏ:con trỏ; vị trí nền:trung tâm trung tâm;) .sli-links .control-slide.active( vị trí nền: đỉnh trung tâm;) #prewbutton, #nextbutton ( /* Liên kết " Tiếp theo" và "Trước" */ display:block; width:15px; chiều cao:100%; vị trí:tuyệt đối; top:0; tràn:ẩn; thụt lề văn bản:-999px; nền:url(arrowBg .png) trung tâm bên trái không lặp lại; độ mờ: 0,8; z-index:3; phác thảo: không ! quan trọng;) #prewbutton(left:10px;) #nextbutton( right:10px; nền:url(arrowBg.png) phải trung tâm không lặp lại; ) #prewbutton:hover, #nextbutton:hover( opacity:1;)
Chúng ta hãy xem xét nó chi tiết hơn. Đầu tiên chúng ta cung cấp cho khối chính, ID "slider-wrap", chiều rộng mong muốn. Vì tất cả các khối khác được chèn vào nó nên không cần chỉ định chiều cao; nó sẽ phụ thuộc vào những gì bên trong. Sau đó, chúng ta cần đặt kích thước của vùng chứa nơi đặt các slide. Đây là #thanh trượt. Hãy cung cấp cho nó chiều rộng và chiều cao, chẳng hạn như đường viền 10 pixel. Ở đây chiều rộng là 640px, nhỏ hơn chiều rộng của phần gốc vì chúng ta đang thêm các đường viền 10px ở bên phải và bên trái. Bản thân chiều rộng của các slide (.slide) cũng phụ thuộc vào chiều rộng của div này.
Và điều cuối cùng: chúng ta cần đặt vị trí: tương đối cho vùng chứa slide vì các slide bên trong có vị trí tuyệt đối. Đối với các slide, chỉ có chiều rộng và chiều cao được đặt trong CSS. Các thuộc tính còn lại được đặt trong tập lệnh jQuery.
Selector.sli-links là một khối sẽ chứa các nút để di chuyển đến slide cần thiết. Các nút này là các phần tử đơn giản của số biểu mẫu sẽ được chèn vào số lượng yêu cầu tự động, cùng nhau và với các liên kết cha.sli của chúng. Đối với các nút chúng tôi đặt cảnh đẹp, cụ thể là, chúng tôi làm cho mỗi nút vuông, căn chỉnh tất cả chúng ở giữa và cũng nhờ vào tràn: ẩn và thụt lề văn bản:-9999px, chúng tôi xóa văn bản, chỉ để lại các biểu tượng nền, cũng thay đổi khi bạn di chuột qua phần tử này bằng con trỏ. Để thuận tiện, tôi đã sử dụng các họa tiết để giảm số lượng hình ảnh.
Tiếp theo, nút hoạt động được thiết kế. Chúng tôi chỉ thay đổi vị trí của nền. Sau đó chúng ta sẽ thiết kế lại các link để đi tới các slide tiếp theo và trước đó. Bạn có thể cung cấp cho họ bất kỳ thiết kế nào, giống như các nút. Các liên kết này được chèn tự động bên trong #slider. Nhưng để họ có thể được nhìn thấy, tôi đã hỏi họ định vị tuyệt đối và một lớp trên cùng (z-index:3) để chúng xuất hiện phía trên các trang chiếu. Tôi nghĩ với CSS mọi thứ đều rõ ràng và đơn giản ở đây: bạn có thể thay đổi hầu hết tất cả các thuộc tính để thiết kế thanh trượt theo cách bạn cần.
Bây giờ chúng ta hãy nhìn vào kịch bản:
Var hwSlideSpeed = 700; var hwTimeOut = 3000; var hwNeedLinks = true; $(document).ready(function(e) ( $(".slide").css(("position" : "absolute", "top:"0", "left": "0")).hide ().eq(0).show(); var slideNum = 0; var slideTime; slideCount = $("#slider .slide").size(); var animSlide = function(arrow)( clearTimeout(slideTime); $ ("".slide").eq(slideNum).fadeOut(hwSlideSpeed); if(arrow == "next")( if(slideNum == (slideCount-1))(slideNum=0;) else(slideNum++) ) else if(arrow == "prew") ( if(slideNum == 0)(slideNum=slideCount-1;) else(slideNum-=1) ) else( slideNum = mũi tên; ) $(".slide").eq( slideNum).fadeIn(hwSlideSpeed, rotator); $(".control-slide.active").removeClass("active"); $(".control-slide").eq(slideNum).addClass("active") ; ) if(hwNeedLinks)( var $linkArrow = $("") .prependTo("#slider"); $("#nextbutton").click(function())( animSlide("next"); )) $ ( "#prewbutton").click(function())( animSlide("prew"); )) ) var $adderSpan = ""; $(".slide").each(function(index) ( $adderSpan += "" + chỉ mục + ""; )); $("" + $adderSpan +"").appendTo("#slider-wrap"); $(".control-slide:first").addClass("active"); $(".control-slide").click(function())( var goToNum = ParsFloat($(this).text()); animSlide(goToNum); )); var tạm dừng = sai; var rotator = function())( if(!pause)(slideTime = setTimeout(function())(animSlide("next")), hwTimeOut);) ) $("#slider-wrap").hover(function( ))( clearTimeout(slideTime); tạm dừng = true;), function()(pause = false; rotator(); )); công cụ quay vòng(); ));
Đầu tiên, cài đặt được lưu trong các biến: hwSlideSpeed - tốc độ xoay slide, hwTimeOut - thời gian sau đó slide tự động thay đổi, hwNeedLinks - điều khiển liên kết "Tiếp theo" và "Trước" - nếu giá trị của biến này là đúng thì các liên kết này sẽ được hiển thị, còn nếu sai thì theo đó chúng sẽ không hiển thị (như trên trang chính blog của tôi).
Tiếp theo, chúng ta đặt các thuộc tính CSS cần thiết cho các slide bằng phương thức .css(). Chúng tôi xếp chồng các khối có các trang trình bày lên nhau bằng cách sử dụng định vị tuyệt đối, sau đó ẩn tất cả chúng.hide() và sau đó chỉ hiển thị khối đầu tiên. Biến slideNum là số slide đang hoạt động, tức là bộ đếm.
Logic chính của thanh trượt jQuery của chúng tôi là hàm animSlide. Phải mất một tham số. Nếu chúng ta truyền chuỗi “next” hoặc “prew” vào đó, nó sẽ hoạt động câu điều kiện và slide tiếp theo hoặc trước đó sẽ được hiển thị tương ứng. Nếu chúng ta gửi một số dưới dạng giá trị thì số này sẽ trở thành slide hoạt động và nó sẽ được hiển thị.
Vì vậy, hàm này ẩn div hiện tại, tính toán một div mới và hiển thị nó.
Lưu ý rằng phương thức .fadeIn() giúp hiển thị slide đang hoạt động và có đối số thứ hai. Đây được gọi là chức năng gọi lại. Nó được thực thi khi slide xuất hiện hoàn toàn. Trong trường hợp này, điều này được thực hiện để đảm bảo cuộn các trang chiếu một cách tự động. Hàm rotator được xác định bên dưới gọi lại hàm animSlide để chuyển sang trang chiếu tiếp theo trong khoảng thời gian mong muốn: chúng ta sẽ có một bao đóng đảm bảo cuộn liên tục.
Mọi thứ đều hoạt động tốt, nhưng chúng tôi cần dừng tự động hóa nếu người dùng di chuyển con trỏ đến thanh trượt hoặc nhấn các nút. Biến tạm dừng được tạo ra cho mục đích này. Nếu giá trị của nó là dương - true thì sẽ không có sự chuyển đổi tự động. Sử dụng phương thức .hover(), chúng tôi chỉ định: xóa bộ hẹn giờ nếu nó đang chạy - clearTimeout(slideTime) và đặt tạm dừng = true. Và sau khi di chuyển con trỏ, hãy tắt tính năng tạm dừng và chạy hàm đóng rotator().
Ngoài ra, chúng ta cần tạo các phần tử mới trên trang và đặt chúng vào đúng vị trí. Sử dụng vòng lặp each() cho mỗi slide (div với lớp .slide), chúng ta sẽ tạo một phần tử span bên trong có một số - số của slide. Con số này được sử dụng trong chức năng hoạt hình để di chuyển tới slide có số này. Hãy gói mọi thứ trong một div với các lớp cần thiết và cuối cùng chúng ta sẽ nhận được đánh dấu sau:
0 1 2 3
Có vẻ như, tại sao chúng ta tạo đánh dấu bên trong tập lệnh mà không phải trong mã HTML? Thực tế là, chẳng hạn, nếu người dùng tắt tập lệnh, anh ta sẽ không thấy các phần tử không hoạt động và điều này sẽ không khiến anh ta bối rối. Ngoài ra, mã được đơn giản hóa, tốt cho SEO.
Kết quả là bố cục thanh trượt sẽ trông giống như thế này (Tôi đã sử dụng hình ảnh làm trang trình bày và cài đặt 5 trong số đó):
0
1
2
3
Dưới đây bạn có thể xem cách thanh trượt jQuery của chúng tôi hoạt động trên trang demo và tải xuống tất cả các nguồn cần thiết.
Cuối cùng, một số điểm về việc tích hợp thanh trượt này với Drupal. Bạn có thể thêm mã này vào tệp mẫu, chẳng hạn như trong page.tpl.php và đính kèm tập lệnh dưới dạng tệp js riêng biệt vào chủ đề. Jquery trong Drupal được bật theo mặc định nhưng chạy ở chế độ tương thích (). Có hai lựa chọn để cải thiện. Hoặc bọc tất cả mã js:
(hàm ($) ( // Tất cả mã của bạn... ))(jQuery);
hoặc thay thế các ký hiệu $ trong toàn bộ tập lệnh bằng jQuery. Như thế này:
JQuery(document).ready(function(e) ( jQuery(".slide").css(("position" : "absolute", "top:"0", "left": "0")).hide ().eq(0).show(); var slideNum = 0; var slideTime; slideCount = jQuery("#slider .slide").size(); var animSlide = function(arrow)( // v.v.
Ví dụ này đã thực hiện phương pháp đầu tiên.
Cảm ơn vì đã đọc! Để lại ý kiến, trở lại. Bạn cũng có thể đăng ký RSS để nhận thông tin cập nhật blog trước!
Đã thêm: Đó không phải là tất cả. Đọc. Ở đó chúng tôi sẽ thêm các tính năng mới cho tập lệnh này.
