Một băng chuyền đơn giản trong jquery. Đóng gói băng chuyền JS thành một tập lệnh duy nhất. Có những loại thanh trượt nào và nơi nào có thể cần đến chúng
/* Đây là nơi băng chuyền của chúng tôi bắt đầu. Block.carousel-wrapper được định vị tương đối, Wrapper.carousel-item được định vị tuyệt đối. . */ .carousel-wrapper( vị trí:tương đối; /* Các hộp được định vị tuyệt đối lấy chiều cao và chiều rộng từ hộp mẹ. Chúng tôi đã đặt chúng trong suốt theo mặc định và sau đó chúng sẽ xuất hiện mượt mà khi nhấp vào liên kết.arrow-prev và.arrow- tiếp theo * / .carousel-item( vị trí:tuyệt đối; top:0; đáy:0; trái:0; phải:0; đệm:25px50px; độ mờ:0; chuyển tiếp:all0.5sease-in-out; /* Đã thông báo. phần đệm ở bên trái và bên phải là 50px? Bằng cách này, chúng ta có thể định vị các liên kết của mình! Mỗi liên kết sẽ rộng 50px. Ngoài ra, tôi sử dụng các liên kết trống. hình nền sao cho các liên kết trông giống như mũi tên. Kiểm tra xem bạn đã thay đổi chưa URL liên kết bằng URL gốc để các liên kết của bạn không chỉ là hình chữ nhật trong suốt. */ .arrow( vị trí:tuyệt đối; top:0; hiển thị:khối; chiều rộng:50px; chiều cao:100%; -webkit-tap-highlight-color:rgba(0,0,0,0); nền:url( "/carousel-arrow-dark.png")50%50%/20pxno-repeat; /* Hãy quay mũi tên của chúng ta về bên trái */ &.arrow-prev( left:0; ) /* Và cái thứ hai là bên phải. Hình ảnh tương tự cho mũi tên, tôi xoay nó 180 độ */ &.arrow-next( right:0; -webkit-transform:rotate(180deg); Transform:rotate(180deg); ) ) /* Tôi thực sự thích nó thích cách các slide băng chuyền trông như thế nào nền tối và nếu block.carousel-item có lớp "light", chúng ta sẽ thay đổi văn bản của nó thành màu trắng và sử dụng mũi tên màu trắng thay vì màu xám. Kiểm tra kỹ xem đường dẫn đến hình ảnh mũi tên có chính xác không */ &.light( color:white; .arrow( nền:url("/carousel-arrow-light.png")50%50%/20pxno-repeat; ) ) /* Hãy viết một truy vấn phương tiện để thay đổi kích thước của mũi tên trên các thiết bị có kích thước màn hình nhỏ hơn.*/ @media(max-width:480px)( .arrow,&.light.arrow( nền-size:10px; nền -position:10px50% ; ) ) ) /* Đặt mục tiêu liên kết thành hiển thị: none; Bằng cách này, chúng tôi loại bỏ tình trạng trình duyệt liên tục nhảy lên đầu băng chuyền mỗi khi chúng tôi nhấp vào mũi tên. Thuộc tính này có hiệu lực đối với mọi thành phần có ID bắt đầu bằng "mục đích". */ ( display:none; ) /* Ở trên, chúng ta đã làm cho tất cả các trang trình bày băng chuyền trong suốt, có nghĩa là khi băng chuyền tải, thay vào đó chúng ta sẽ có một hộp trống lớn. Hãy thay đổi giá trị độ trong suốt của slide đầu tiên thành 1 để hiển thị. Chúng tôi cũng đặt chỉ mục z thành 2, đặt nó lên trên phần còn lại của trang trình bày. */ .item-1( z-index:2; opacity:1; ) /* Nhưng chúng ta không muốn slide đầu tiên luôn có giá trị opacity là opacity: 1; nếu không, chúng ta sẽ phải thực hiện theo cách của mình thông qua slide này trong khi xoay các slide khác. */ *:target~.item-1( opacity:0; ) /* ..nhưng nếu #target-item-1 nằm trong tiêu điểm và chúng ta muốn hiển thị slide đầu tiên thì hãy chọn nó bằng biểu tượng ~ và đặt độ trong suốt trở lại 1:-) */ #target-item-1:target~.item-1( opacity:1; ) /* Nếu mục tiêu-# khác nằm trong tiêu điểm, hãy chọn chúng bằng bộ chọn ~, hiển thị mượt mà chúng và đặt chúng lên trên cùng bằng cách sử dụng z-index: 3. Tại đây, bạn có thể thêm các khoảng bổ sung bằng mã định danh mục mục tiêu nếu bạn có nhiều hơn ba khoảng đó. Có thể thêm 10 miếng cùng một lúc.. */ #target-item-2:target~.item-2,#target-item-3:target~.item-3( z-index:3; opacity:1; ) )
Các plugin băng chuyền jQuery cho phép bạn hiển thị nội dung trang web theo cách hấp dẫn hơn. Với sự trợ giúp của các plugin như vậy, bạn có thể tạo các bản trình bày đẹp mắt trực tiếp trên các trang của trang web và thu hút sự chú ý của khách truy cập.
1. Thanh trượt Ambilight của BootstrapBootstrap Ambilight Slider là một plugin để tạo thanh trượt/băng chuyền với hiệu ứng ánh sáng xung quanh và chức năng Bootstrap.
2. Băng chuyền jQuery TouchSwipe
Plugin jQuery TouchSwipe Carousel cho phép bạn phát hiện các thao tác chạm trên màn hình cảm ứng và mô phỏng thao tác nhấn nút chuột.
3.Trượt mục
ItemSlide.js là một plugin jquery để tạo băng chuyền hoạt động trên cả máy tính để bàn và thiết bị di động thiết bị cảm ứng.
4.
– plugin jquery để tạo băng chuyền/thanh trượt thích ứng.
5.
Plugin băng chuyền jquery đáp ứng đầy đủ và được tối ưu hóa cho thiết bị di động. Đối với hoạt ảnh, các chuyển tiếp CSS3 được sử dụng ở đây, nhưng cũng có một tùy chọn dự phòng trong jQuery. Plugin hỗ trợ số lượng slide không giới hạn với bất kỳ loại nội dung nào. có thể tương tác với bàn phím, đồng thời hoạt động tốt trên hầu hết các trình duyệt, kể cả trình duyệt di động.
6. SilverTrack
SilverTrack là một plugin jQuery có thể mở rộng. Nó bao gồm một lõi nhỏ mà bạn có thể kết nối các plugin tiện lợi.
7. Vòng quay Cú 2
Owl Carousel 2 là băng chuyền đáp ứng đầy đủ cho jQuery/Zepto với sự hỗ trợ của màn hình cảm ứng.
8. Sử dụng Carousel
UtilCarousel – Plugin băng chuyền jQuery với chuyển tiếp suôn sẻ, được thực hiện thông qua tăng tốc phần cứng. Nó hoàn toàn thích nghi. Plugin hỗ trợ những màn hình cảm ứng và nó sử dụng hoạt ảnh CSS3 3D được tăng tốc phần cứng. Nhờ đó, plugin sẽ hoạt động tốt trên cả máy tính để bàn và thiêt bị di động. Bạn có thể điều khiển UtilCarousel bằng cách chạm, điều hướng hoặc con lăn chuột.
9. Trơn tru
Slick là một băng chuyền jQuery đáp ứng có mọi thứ bạn cần.
10. Băng chuyền 3D CodingJack
Băng chuyền này được các thiết bị iOS và Android hỗ trợ và được trang bị chức năng vuốt cảm ứng. Trông tuyệt vời trên máy tính bảng và điện thoại thông minh.
11. Trình chiếu jQuery
Trình chiếu jQuery là một băng chuyền và thanh trượt có hỗ trợ cử chỉ cho các thiết bị cảm ứng. Kho lưu trữ plugin chỉ nặng 2 kilobyte.
12. Phim cuộn
FlimRoll là một băng chuyền jQuery thu nhỏ tập trung sự chú ý của người dùng vào đối tượng cụ thể, đặt nó ở giữa màn hình.
13. Tikslus
Tikslus là một băng chuyền jQuery đáp ứng đầy đủ với nhiều tính năng và thuộc tính. Và khả năng thích ứng cao của plugin cho phép bạn không chỉ định kích thước hình ảnh. Ngoài ra, điều đáng chú ý là hỗ trợ hoạt ảnh tùy chỉnh dựa trên các lớp CSS3. Tikslus có thể được sử dụng với plugin Jquery Mobile.
14.Hộp cuộn
Scrollbox là một plugin jQuery thu nhỏ, đơn giản giúp biến danh sách thành băng chuyền hoặc mã đánh dấu.
15. Băng chuyền Sky Touch
Sky Touch Carousel là một plugin băng chuyền jQuery với nhiều chức năng phong phú. Plugin có khả năng thích ứng, hỗ trợ màn hình cảm ứng, đồng thời hoạt động nhanh chóng và mượt mà. Cài đặt cho phép bạn thay đổi giao diện của băng chuyền bằng CSS.
16.
– plugin jQuery linh hoạt để tạo trình chiếu hoặc băng chuyền. Nó có nhiều cài đặt, bao gồm các loại chuyển tiếp, căn chỉnh hình ảnh và tốc độ chuyển đổi khung hình.
Đô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, 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ác nguyên tắc OOP và các lớp của nó dựa trên các 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 có cùng quan điểm với 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.), thanh trượt này 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 thư viện, đượ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í: tràn tương đối: ẩ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: # 000; display:table; ) .caption-container ( hiển thị: ô bảng; căn chỉnh dọc: giữa; phần đệm: 0 20px; ) #slider-nav ( vị trí: tuyệt đối; dưới cùng: -36px; căn chỉnh văn bản: giữa; trái: 50%; biến đổi: TranslateX(-50%); ) #slider-nav a ( width: 8px; chiều cao: 8px; trang trí văn bản: không có; 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; 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í: cố định !quan trọng ; lặp lại nền: không lặp lại; màu nền: #fff; họ phông chữ: "Roboto","Segoe UI","Helvetica","Georgia","Calibri","Verdana" ; %, -50%) tỉ lệ(1); #cq-popup .header ( display: inline-block; font-size: 17px; font-weight: 500; ) #cq-popup > div ( width: 500px; font- kích thước: 22px; chiều cao dòng: 36px; ) #cq-popup-btclose ( text-trang trí: 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; 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 trong 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"); el.querySelector("#prev"); ) ( 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đ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. Đối với điều này có thư viện đặc biệt, ví dụ: để kết nối HTML với HTML, lib từ w3.org thậ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.
Cuối cùng, tôi quyết định lấy nội dung của tệp HTML bên trong Mã JavaScript và tải nó vào một cái mới phần tử div, được tạo trong bộ nhớ, như tôi đã làm trước đó để kết nối tập tin CSS trong JavaScript. Phần tử được tạo được kết nối với phần cuối của phần nội dung HTML mã trang 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 thức “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 mờ. 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.
Trong thực tế, Triển khai JavaScript Trình chiếu này khác với thanh trượt thông thường một chút. 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(""));
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 vào các nút chuyển đổi trượt thủ công và đặt nó vào bên trong Lệnh gọi JavaScript hàm setInterval(), thực hiện một hành động được chỉ định sau một khoảng thời gian xác đị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ó để thực hiện chu kỳ chuyển đổi tự động.
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 đã 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.
Trong khi làm việc với nhiều 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 thực hành này các nhà phát triển tích cực sử dụng, 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 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 vào 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, đó là 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 slide-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: CSS, HTML và Tệp 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 = "\ \ /*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ủ 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 vào việc 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 đó, đố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 đó. Nhưng đã cho JavaScript thanh trượt 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 mã mới tính năng thú vị, 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ệ].
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 điều 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ỳ họa tiết 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 cũng đã gặp phải vấn đề tương tự khi bạn không thể tìm thấy đ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 băng chuyền sạch sẽ 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 bê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
Trở 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 Solid #777; display: inline-block; nền: trắng; 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 các mục màn hình lớn: 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) itemTablet: , // Cài đặt điện thoại bị tắt, trong trường hợp này chúng sẽ // được sử dụng cài đặt máy tính bả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 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.
