Tốt hơn là viết slide bằng css hoặc jquery. Thanh trượt jQuery đơn giản có tài liệu kỹ thuật. Thanh trượt JS tùy chỉnh - triển vọng phát triển
Nhưng vì chúng ta đang tìm hiểu những kiến thức cơ bản về JS nên để nghiên cứu cơ sở này, tôi sẽ mô tả cách tạo thanh trượt đơn giản chỉ với sự giúp đỡ Ngôn ngữ JavaScript. Nào, hãy bắt đầu phân tích tài liệu!
Có những loại thanh trượt nào và chúng có thể cần thiết ở đâu?Việc tạo các thư viện thuận tiện để xem hình ảnh là bắt buộc trên tất cả các dịch vụ web có chứa ít nhất một số bức ảnh. Đây có thể là các cửa hàng trực tuyến, trang web 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 điều này ứng dụng tiêu chuẩn thanh trượt. 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 đổi sau một thời gian nhất định. Cơ chế này được đặt biệt danh do việc hiển thị hình ảnh được lặp lại theo hình tròn.
Ngày nay, nếu muốn, bạn có thể tìm thấy các plugin khác thường và hấp dẫn nhất trên Internet để xem một bộ ảnh.
Hoạt động độc lậpChà, bây giờ hãy bắt đầu tạo thanh trượt của riêng chúng ta. TRÊN ở giai đoạn này học cách triển khai nó, tôi khuyên bạn nên sử dụng pure . Nó sẽ là công tắc tự động hình ảnh trong một vòng tròn.
Dưới đây tôi đã đính kèm Mã chương trìnhứng dụng của bạn. Tôi đã để lại nhận xét cho bạn khi tôi viết mã.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
|
Trình chuyển đổi hình ảnh tự động /*Mô tả 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à V. trong trường hợp nàyở giữa phần tử ul - cơ sở cho các slide */ li ( text-align: center; ) /* Tôi mô tả hình thức của các slide */ .slide( location: tuyệt đối; opacity: 0; top: 0px ; trái: 0px; chiều cao: 100 %; chỉ số z: 3; chiều rộng: 100%; nền: màu xanh; -moz-transition: độ mờ 1,5 giây; chuyển tiếp: độ mờ 1,5 giây; -webkit-transition: độ mờ 1,5 giây; ) /*Khi được hiển thị, đối tượng sẽ hiển thị và di chuyển về phía trước*/ .showing( opacity: 1; z-index: 4; )
Tôi hy vọng bạn không gặp vấn đề gì với mã css và html. Nhưng tôi thấy cần phải tháo rời công việc của kịch bản. Vì vậy, hãy chuyển sang giải mã những gì đã được viết.
Vì vậy, trước tiên, bằng cách sử dụng phương thức querySelectorAll, tôi gán cho biến MySlider một danh sách tất cả các phần tử trong phạm vi đã chỉ định. Cho biết mục này
document.querySelectorAll("#slides .slide")
Do đó, MySlider lưu trữ một bộ sưu tập gồm bốn phần tử.
Tiếp theo, tôi chỉ định hình ảnh nào sẽ bắt đầu hiển thị bằng cách đặt biến currentPicture về 0. Sau đó, tôi chỉ ra rằng sự thay đổi trang chiếu xảy ra sau 2,7 giây và chức năng xử lý trang chiếu tiếp theo phải được gọi.
Hãy chuyển sang chức năng của chính nó.
Ban đầu, đối với thành phần danh sách hiện tại, tôi thay đổi mô tả của các lớp, tức là Tôi viết lại “trình chiếu” thành “slide”. Kết quả là hình ảnh trở nên vô hình.
Bây giờ tôi xác định phần tử mới bộ sưu tập sẽ được hiển thị trên màn hình. Để làm điều này tôi lấy vị trí hiện tại +1. Bạn có thể nhận thấy rằng tôi cũng sử dụng phép chia có phần dư (%) cho số trang trình bày có sẵn. Thủ thuật bằng tai này là cần thiết để bắt đầu chương trình trong một vòng tròn mới. Đây thực sự là những gì nó sẽ trông như thế nào.
1. Trình chiếu jQuery tuyệt vờiMột bản trình chiếu lớn, ngoạn mục sử dụng công nghệ jQuery.
2. Plugin jQuery “Băng chuyền quy mô”
Trình chiếu có thể mở rộng bằng jQuery. Bạn có thể đặt kích thước trình chiếu phù hợp với mình nhất.
3. Plugin jQuery “slideJS”
Thanh trượt hình ảnh với mô tả văn bản.
4. Plugin “JSliderNews”
Khi bạn di chuột qua các mũi tên điều hướng, hình thu nhỏ hình tròn của trang chiếu tiếp theo sẽ xuất hiện.
6. Thanh trượt “Chu trình trình bày” jQuery đẹp mắt
Thanh trượt jQuery với chỉ báo tải hình ảnh. Tự động thay đổi slide được cung cấp.
7. Plugin jQuery “Thanh trượt thị sai”
Thanh trượt có hiệu ứng nền thể tích. Điểm nổi bật của thanh trượt này là chuyển động của nền, bao gồm nhiều lớp, mỗi lớp cuộn với ở tốc độ khác nhau. Kết quả là sự bắt chước hiệu ứng thể tích. Nó trông rất đẹp, bạn có thể tự mình nhìn thấy. Hiệu ứng được hiển thị mượt mà hơn trên các trình duyệt như Opera, Google Chrome,I E.
8. Thanh trượt jQuery mới, nhẹ “bxSlider 3.0”
Trên trang demo trong phần “ví dụ”, bạn có thể tìm thấy liên kết tới tất cả những lựa chọn khả thi sử dụng plugin này.
9. Thanh trượt hình ảnh jQuery, plugin “slideJS”
Một thanh trượt jQuery đầy phong cách chắc chắn có thể trang trí cho dự án của bạn.
10. Plugin trình chiếu jQuery " Trang trình bày dễ dàng» v1.1
Một plugin jQuery dễ sử dụng để tạo trình chiếu.
11. Plugin trượt jQuery
Plugin jQuery nhẹ với nhiều phiên bản khác nhau. Tự động thay đổi slide được cung cấp.
12. CSS của jQuery thư viện có tính năng thay đổi slide tự động
Nếu khách truy cập không nhấp vào mũi tên “Chuyển tiếp” hoặc “Quay lại” trong một khoảng thời gian nhất định, thư viện sẽ bắt đầu cuộn tự động.
13. Thanh trượt jQuery “Nivo Slider”
Plugin rất chuyên nghiệp, chất lượng cao, nhẹ với mã hợp lệ. Có rất nhiều hiệu ứng chuyển tiếp slide khác nhau có sẵn.
14. Thanh trượt jQuery “MollySlider”
Thanh trượt mới. Thanh trượt jQuery với nhiều hiệu ứng thay đổi hình ảnh khác nhau.
15. Plugin jQuery “Slider²”
Thanh trượt nhẹ với bộ thay đổi trượt tự động.
16. Thanh trượt javascript mới
Thanh trượt với sự thay đổi hình ảnh tự động.
Plugin để thực hiện trình chiếu với tính năng thay đổi slide tự động. Có thể điều khiển màn hình bằng hình thu nhỏ của hình ảnh.
jQuery Thanh trượt CSS hình ảnh bằng plugin NivoSlider.
19. Thanh trượt jQuery “jShowOff”
Plugin để xoay nội dung. Ba tùy chọn để sử dụng: không có điều hướng (tự động thay đổi định dạng trình chiếu), điều hướng ở dạng nút, điều hướng ở dạng hình thu nhỏ.
20. Plugin “Danh mục hiệu ứng màn trập”
Plugin jQuery mới để thiết kế danh mục đầu tư của nhiếp ảnh gia. Bộ sưu tập có tác dụng thay đổi hình ảnh thú vị. Các bức ảnh nối tiếp nhau với hiệu ứng tương tự như hoạt động của màn trập ống kính.
21. Thanh trượt CSS javascript nhẹ “TinySlider 2”
Triển khai thanh trượt hình ảnh bằng javascript và CSS.
22. Thanh trượt tuyệt vời “Tinycircleslider”
Thanh trượt tròn đầy phong cách. Việc chuyển đổi giữa các hình ảnh được thực hiện bằng cách kéo thanh trượt có dạng vòng tròn màu đỏ xung quanh chu vi. Nó sẽ hoàn toàn phù hợp với trang web của bạn nếu bạn sử dụng các yếu tố hình tròn trong thiết kế của mình.
23. Thanh trượt hình ảnh với jQuery
Thanh trượt dễ dàng" Bộ thanh trượt" Thanh trượt có nhiều kiểu dáng khác nhau: dọc và ngang. Nhiều kiểu điều hướng khác nhau giữa các hình ảnh cũng được triển khai: sử dụng nút “Chuyển tiếp” và “Quay lại”, sử dụng con lăn chuột, sử dụng nhấp chuột trên trang chiếu.
24. Phòng trưng bày tiểu cảnh “Slider Kit”
Phòng trưng bày "Bộ thanh trượt". Việc cuộn hình thu nhỏ được thực hiện theo cả chiều dọc và chiều ngang. Việc chuyển đổi giữa các hình ảnh được thực hiện bằng cách sử dụng: con lăn chuột, nhấp chuột hoặc di con trỏ lên hình thu nhỏ.
25. Thanh trượt nội dung jQuery “Bộ thanh trượt”
Thanh trượt nội dung dọc và ngang bằng jQuery.
26. Trình chiếu jQuery “Bộ thanh trượt”
Trình chiếu với tính năng thay đổi slide tự động.
27. Thanh trượt CSS3 javascript chuyên nghiệp nhẹ
Một thanh trượt jQuery và CSS3 gọn gàng được tạo vào năm 2011.
Trình chiếu jQuery với hình thu nhỏ.
29. Trình chiếu jQuery đơn giản
Trình chiếu với các nút điều hướng.
30. Trình chiếu “Skitter” jQuery tuyệt vời
Plugin jQuery Skitter để tạo trình chiếu tuyệt đẹp. Plugin hỗ trợ 22 (!) loại hiệu ứng hoạt hình khác nhau khi thay đổi hình ảnh. Có thể hoạt động với hai tùy chọn điều hướng slide: sử dụng số slide và sử dụng hình thu nhỏ. Hãy chắc chắn xem bản demo, một phát hiện chất lượng rất cao. Công nghệ sử dụng: CSS, HTML, jQuery, PHP.
31. Trình chiếu “Lúng túng”
Trình chiếu chức năng. Slide có thể là: hình ảnh đơn giản, hình ảnh có chú thích, hình ảnh có chú giải công cụ, video. Bạn có thể sử dụng mũi tên, liên kết số trang trình bày và phím trái/phải trên bàn phím để điều hướng. Trình chiếu có nhiều phiên bản: có và không có hình thu nhỏ. Để xem tất cả các tùy chọn, hãy nhấp vào liên kết Demo #1 - Demo #6 nằm ở đầu trang demo.
Rất thiết kế ban đầu thanh trượt hình ảnh giống như một cái quạt. Chuyển tiếp slide sinh động. Điều hướng giữa các hình ảnh được thực hiện bằng cách sử dụng mũi tên. Ngoài ra còn có lẫy chuyển số tự động có thể bật tắt bằng nút Play/Pause nằm phía trên.
Thanh trượt jQuery hoạt hình. Hình nền tự động chia tỷ lệ khi cửa sổ trình duyệt được thay đổi kích thước. Đối với mỗi hình ảnh, một khối có mô tả sẽ xuất hiện.
34. Thanh trượt “Flux Slider” sử dụng jQuery và CSS3
Thanh trượt jQuery mới. Một số hiệu ứng hoạt hình thú vị khi thay đổi slide.
35. Plugin jQuery “jSwitch”
Thư viện jQuery hoạt hình.
Trình chiếu jQuery dễ dàng với khả năng thay đổi trang chiếu tự động.
37. Phiên bản mới của plugin “SlideDeck 1.2.2”
Thanh trượt nội dung chuyên nghiệp. Có các tùy chọn thay đổi trang trình bày tự động cũng như tùy chọn sử dụng con lăn chuột để di chuyển giữa các trang trình bày.
38. Thanh trượt jQuery “Sudo Slider”
Thanh trượt hình ảnh nhẹ sử dụng jQuery. Có rất nhiều lựa chọn thực hiện: thay đổi hình ảnh theo chiều ngang và chiều dọc, có và không có liên kết đến số slide, có và không có chú thích ảnh, nhiều hiệu ứng thay đổi hình ảnh khác nhau. Có chức năng thay đổi slide tự động. Bạn có thể tìm thấy liên kết tới tất cả các ví dụ triển khai trên trang demo.
39. Trình chiếu jQuery CSS3
Trình chiếu với hình thu nhỏ hỗ trợ chế độ thay đổi slide tự động.
40. Thanh trượt jQuery “Thanh trượt thông lượng”
Thanh trượt với nhiều hiệu ứng thay đổi hình ảnh.
41. Thanh trượt jQuery đơn giản
Thanh trượt hình ảnh phong cách sử dụng jQuery.
42. Trình chiếu jQuery “Craftyslide”
Trình chiếu jQuery HTML5 trải dài trên toàn bộ chiều rộng của màn hình kèm theo âm thanh.
Một trình chiếu jQuery đơn giản.
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ó, rất dễ dàng để tạo ra các yếu tố trang web có tính tương tác và ngoạn mục.
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ổ dụng đơn giản bằ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). Tất cả những gì bạn cần làm là dán số lượng yêu cầu div 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ất cứ thứ gì có thể được chèn vào bên trong chúng. Mã HTML, ví dụ như một hình ảnh hoặc một 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) chính giữa 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 được yếu tố đơn giản số loại, sẽ được tự động chèn vào số lượng được yêu cầu, cùng 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 vắn, căn chỉnh tất cả chúng ở giữa, đồng thời, 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 tồn tại (như trong trang chủ blog của tôi).
Tiếp theo chúng ta cài đặt những thứ cần thiết Thuộc tính CSS 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.
Thích nghi, hoặc nếu bạn muốn, thiết kế web đáp ứng bây giờ không chỉ là một xu hướng thiết kế khác, 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, nó tồn tại trên Internet 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 chúng đều được cung cấp miễn phí, 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 diễn biến đáng chú ý nhất jQuery đáp ứng thanh trượt hình ảnh xuất hiện ngay lúc đó 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(xoay, nhô ra, làm mờ, xoắn ốc, rèm, v.v.) và nhiều mẫu tạo 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. Cũng có sẵn để tải xuống riêng Plugin WordPress và một mô-đun cho Joomla. 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, hoàn toàn plugin 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 sự trợ giúp của công cụ đơn giản nhưng khá chức năng này, 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 và thông báo ngoạn mục về 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 vời, đầu ra của nhiều nội dung đa phương tiện khác nhau: video từ YouTube và Vimeo, cài đặt người dùng linh hoạt, v.v...
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. Sẽ tốt hơn nếu bạ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í Plugin Nivo Thanh trượt tới blog của bạn, may mắn thay có đủ 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. Thư viện jQuery v1.7+ được sử dụng cho công việc, 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ác 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 đó. VỚI sử dụng JQuery và hoạt ảnh 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.
Camera là một plugin JQuery miễn phí để tổ chức trình chiếu trên các trang của 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 cách khác, khá đơn giản thanh trượt thích ứng trên 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 nhúng với dịch vụ phổ biến: Flickr, Vimeo, YouTube và những nơi 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 phần tử 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. Được hỗ trợ bởi tất cả các 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 dụng cụ chắc chắn, được thiết kế tốt, được cung cấp kèm theo ví dụ rõ ràng và hướng dẫn chi tiết cách 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ể đặt các phương thức hoạt ảnh khác nhau, làm mờ trang chiếu hoặc chuyển tiếp từ một hướng cụ thể. 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 các sản phẩm được đề cập. 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
Hãy để tôi bắt đầu bằng cách nói rằng bài viết này được viết để nói về cách tạo thanh trượt cuộn hình ảnh cho các trang web. Bài viết này không hề mang tính chất giáo dục mà nó chỉ đóng vai trò như một ví dụ về cách thực hiện đối tượng đang xem xét của chúng tôi. Bạn có thể sử dụng mã được cung cấp trong bài viết này như một loại mẫu cho các phát triển tương tự; Tôi hy vọng rằng tôi có thể truyền đạt cho người đọc bản chất của những gì tôi đã viết một cách đầy đủ chi tiết và theo cách dễ tiếp cận.
Và bây giờ, cách đây không lâu, tôi cần cài đặt một thanh trượt trên một trang web, nhưng sau khi tìm kiếm trên Internet các tập lệnh tạo sẵn, tôi không tìm thấy điều gì hữu ích, bởi vì một số không hoạt động như tôi cần, trong khi một số khác không khởi động được mà không có lỗi trong bảng điều khiển. Đối với tôi, việc sử dụng các plugin jQuery cho thanh trượt dường như quá nhàm chán, bởi vì... Mặc dù điều này sẽ giải quyết được vấn đề nhưng tôi sẽ không hiểu cơ chế này hoạt động như thế nào và việc sử dụng một plugin cho chỉ một thanh trượt là không tối ưu cho lắm. Tôi cũng không thực sự muốn hiểu các tập lệnh quanh co, vì vậy tôi quyết định viết tập lệnh của riêng mình cho thanh trượt mà tôi sẽ tự đánh dấu nếu cần.
Đầu tiên, chúng ta cần quyết định logic của chính thanh trượt, sau đó tiến hành triển khai. Ở giai đoạn này, việc hiểu rõ ràng về hoạt động của cơ chế này là rất quan trọng, vì nếu không có nó, chúng ta không thể viết mã hoạt động chính xác theo cách chúng ta muốn.
Đối tượng chính của chúng ta sẽ là khung nhìn, nghĩa là một khối trong đó chúng ta sẽ thấy các hình ảnh của chúng ta quay như thế nào, trong đó chúng ta sẽ có một trình bao bọc slide, đây sẽ là khối của chúng ta chứa tất cả các hình ảnh được xếp thành một dòng và sẽ thay đổi vị trí của nó bên trong khung nhìn. 
Tiếp theo, ở các cạnh bên trong khung nhìn, theo chiều dọc ở giữa sẽ có các nút quay lại và tiến lên, khi bấm vào chúng ta cũng sẽ thay đổi vị trí của slidewrapper so với khung nhìn, từ đó gây ra hiệu ứng cuộn qua ảnh. Và cuối cùng, đối tượng cuối cùng sẽ là các nút điều hướng của chúng ta, nằm ở cuối khung nhìn. 
Khi nhấp vào chúng, chúng ta sẽ chỉ nhìn vào số sê-ri của nút này và di chuyển nó đến trang chiếu mà chúng ta cần, một lần nữa bằng cách dịch chuyển trình bao bọc slide (sự thay đổi sẽ được thực hiện bằng cách thay đổi thuộc tính css biến đổi, giá trị của nó sẽ là tính liên tục).
Tôi nghĩ logic về cách thức hoạt động của toàn bộ điều này sẽ rõ ràng sau những gì tôi đã nêu ở trên, nhưng nếu vẫn nảy sinh hiểu lầm ở đâu đó thì mọi thứ sẽ trở nên rõ ràng hơn trong đoạn mã bên dưới, bạn chỉ cần một chút kiên nhẫn.
Bây giờ hãy viết! Trước hết, hãy mở tệp chỉ mục của chúng tôi và viết đánh dấu mà chúng tôi cần ở đó:
Như bạn có thể thấy, không có gì phức tạp, block-for-slider chỉ đóng vai trò là khối trong đó thanh trượt của chúng ta sẽ được đặt, bên trong nó là khung nhìn, nơi đặt trình bao bọc slide của chúng ta, cũng là một danh sách lồng nhau, đây là các slide và img là những hình ảnh bên trong chúng. Hãy chú ý đến thực tế là tất cả các hình ảnh phải có cùng kích thước hoặc ít nhất là tỷ lệ, nếu không thanh trượt sẽ trông bị cong, bởi vì kích thước của nó phụ thuộc trực tiếp vào tỷ lệ của hình ảnh.
Bây giờ chúng ta cần cách điệu hóa toàn bộ điều này; thông thường phong cách không được chú ý đặc biệt, nhưng tôi quyết định vẫn thu hút sự chú ý đến điều này để không có sự hiểu lầm trong tương lai.
nội dung ( lề: 0; đệm: 0; ) #block-for-slider ( width: 800px; lề: 0 tự động; lề trên: 100px; ) #viewport ( chiều rộng: 100%; hiển thị: bảng; vị trí: tương đối; tràn: ẩn; -webkit-user-select: không có; -moz-user-select: không có; -ms-user-select: không có; -o-user-select: không có; người dùng chọn: không có; ) #slidewrapper ( vị trí: tương đối; chiều rộng: calc (100% * 4); trên cùng: 0; trái: 0; lề: 0; phần đệm: 0; -webkit-transition: 1s; -o-transition: 1s; transition: 1s; -webkit -transition-timing-function: easy-in-out; -o-transition-timing-function: easy-in-out; transition-timing-function: easy-in-out; ) #slidewrapper ul, #slidewrapper li ( lề : 0; phần đệm: 0; ) #slidewrapper li ( width: calc(100%/4); list-style: none; display: inline; float: left; ) .slide-img ( width: 100%; )
Hãy bắt đầu với block-for-slider , một lần nữa, đây là khối của chúng tôi trên trang mà chúng tôi sẽ phân bổ cho thanh trượt, chiều cao của nó sẽ phụ thuộc vào chiều rộng và tỷ lệ của hình ảnh của chúng tôi, bởi vì khung nhìn chiếm toàn bộ chiều rộng của block-for-slider, khi đó bản thân slide có cùng chiều rộng và theo đó, hình ảnh bên trong nó thay đổi chiều cao tùy thuộc vào chiều rộng (tỷ lệ được giữ nguyên). Tôi đặt phần tử này trên trang của mình theo chiều ngang ở giữa, với 100px thụt vào từ trên cùng, làm cho vị trí của nó thuận tiện hơn cho ví dụ.
Phần tử khung nhìn, như đã đề cập, chiếm toàn bộ chiều rộng của thanh trượt khối của chúng tôi, nó có thuộc tính tràn: ẩn, điều này sẽ cho phép chúng tôi ẩn nguồn cấp dữ liệu hình ảnh của mình, mở rộng ra ngoài khung nhìn. 
Thuộc tính CSS tiếp theo là user-select:none, cho phép bạn loại bỏ phần đánh dấu màu xanh lam của từng phần tử thanh trượt khi bạn nhấp vào nút nhiều lần.
Chuyển sang trình bao bọc slide, tại sao vị trí: tương đối mà không phải tuyệt đối? Mọi thứ đều rất đơn giản, bởi vì... nếu chúng ta chọn tùy chọn thứ hai, thì với thuộc tính tràn khung nhìn:ẩn, hoàn toàn không có gì xuất hiện với chúng ta, bởi vì bản thân khung nhìn sẽ không điều chỉnh theo chiều cao của trình bao bọc thanh trượt, đó là lý do tại sao nó sẽ có chiều cao: 0. Tại sao chiều rộng lại quan trọng và tại sao chúng ta lại đặt nó? Vấn đề là các slide của chúng ta sẽ có chiều rộng bằng 100% của khung nhìn và để sắp xếp chúng thẳng hàng, chúng ta cần một vị trí để chúng đứng, vì vậy chiều rộng của slidewrapper phải bằng 100% chiều rộng của khung nhìn nhân với số trang trình bày (trong trường hợp của tôi là 4). Đối với transition và transition-timing-function , ở đây 1s có nghĩa là sự thay đổi vị trí của slidewrapper sẽ xảy ra trong vòng 1 giây và chúng ta sẽ quan sát nó, và easy-in-out là một loại hoạt ảnh trong đó lần đầu tiên nó diễn ra chậm và tăng tốc đến giữa rồi lại giảm tốc độ, tại đây bạn có thể đặt các giá trị theo ý mình.
Khối thuộc tính tiếp theo đặt trình bao bọc slide và các phần tử con của nó không có phần đệm, không cần nhận xét ở đây.
Tiếp theo, chúng ta tạo kiểu cho các trang chiếu của mình, chiều rộng của chúng phải bằng chiều rộng của khung nhìn, nhưng vì... chúng nằm trong một slidewrapper có chiều rộng bằng chiều rộng khung nhìn nhân với số trang chiếu, sau đó để lấy lại chiều rộng khung nhìn, chúng ta cần chia 100% chiều rộng của slidewrapper cho số trang chiếu (trong trường hợp của tôi, một lần nữa, bằng 4). Sau đó chúng tôi biến chúng thành phần tử nội tuyến sử dụng display:inline và đặt float sang trái bằng cách thêm thuộc tính float:left. Về list-style:none Tôi có thể nói rằng tôi sử dụng nó để xóa điểm đánh dấu mặc định khỏi li , trong hầu hết các trường hợp, đó là một loại tiêu chuẩn.
Với slide-img mọi thứ đều đơn giản, hình ảnh sẽ chiếm toàn bộ chiều rộng của slide, slide sẽ điều chỉnh theo chiều cao của nó, slidewrapper sẽ điều chỉnh theo chiều cao của slide và chiều cao của khung nhìn sẽ lần lượt lấy giá trị của chiều cao của slidewrapper , vì vậy chiều cao của thanh trượt của chúng ta sẽ phụ thuộc vào tỷ lệ của hình ảnh và kích thước của khối , được cung cấp cho thanh trượt mà tôi đã viết ở trên.
Tôi nghĩ tại thời điểm này chúng ta đã tìm ra các kiểu, bây giờ hãy tạo một trình chiếu đơn giản không có nút và sau khi đảm bảo rằng nó hoạt động bình thường, chúng ta sẽ thêm và tạo kiểu cho chúng.
Hãy mở tệp js của chúng tôi, tệp này sẽ chứa mã thanh trượt, đừng quên kết nối jQuery, bởi vì Chúng tôi sẽ viết bằng cách sử dụng khuôn khổ này. Nhân tiện, tại thời điểm viết bài này, tôi đang sử dụng jQuery phiên bản 3.1.0. Tệp có tập lệnh phải được đưa vào cuối thẻ body, bởi vì chúng ta sẽ làm việc với các phần tử DOM cần được khởi tạo trước.
Hiện tại, chúng ta cần khai báo một vài biến, một biến sẽ lưu trữ số lượng trang trình bày mà chúng ta nhìn thấy tại một thời điểm nhất định trong khung nhìn, tôi gọi nó là slideNow và biến thứ hai sẽ lưu trữ số lượng các trang trình bày tương tự này, đây là slideCount.
var slideNow = 1; var slideCount = $("#slidewrapper").children().length);
Biến slideNow phải được đặt giá trị ban đầu 1, bởi vì Khi tải trang, dựa trên đánh dấu của chúng tôi, chúng tôi sẽ thấy trang trình bày đầu tiên trong chế độ xem.
Trong slideCount, chúng ta sẽ đặt số lượng phần tử con của slidewrapper, mọi thứ ở đây đều hợp lý.
Tiếp theo các bạn tạo một hàm có nhiệm vụ chuyển slide từ phải sang trái, khai báo nhé:
hàm nextSlide() ( )
Chúng ta sẽ gọi nó trong khối chính của mã mà chúng ta sẽ đề cập sau, nhưng bây giờ chúng ta sẽ cho hàm của mình biết nó cần làm gì:
function nextSlide() ( if (slideNow == slideCount || slideNow slideCount) ( $("#slidewrapper").css("transform", "translate(0, 0)"); slideNow = 1; ) else ( TranslateWidth = -$("#viewport").width() * (slideNow); $("#slidewrapper").css(( "transform": "translate(" + TranslateWidth + "px, 0)", "-webkit- Transform": "translate(" + TranslateWidth + "px, 0)", "-ms-transform": "translate(" + TranslateWidth + "px, 0)", )); slideNow++; ) )
Đầu tiên, chúng tôi kiểm tra xem hiện tại chúng tôi có đang ở trang trình bày cuối cùng của nguồn cấp dữ liệu không? Để làm điều này, chúng tôi lấy số lượng tất cả các trang trình bày của mình bằng cách sử dụng $("#slidewrapper").children().length và kiểm tra nó với số lượng trang trình bày của chúng tôi, nếu chúng bằng nhau thì điều này có nghĩa là chúng tôi cần bắt đầu hiển thị nguồn cấp dữ liệu một lần nữa, từ 1 slide , có nghĩa là chúng ta thay đổi thuộc tính biến đổi CSS của slidewrapper thành Translate(0, 0) , do đó chuyển nó về vị trí ban đầu để slide đầu tiên nằm trong trường xem của chúng ta, chúng ta cũng đừng quên về –webkit và –ms để hiển thị đầy đủ trên nhiều trình duyệt (xem tài liệu tham khảo thuộc tính .css). Sau đó, đừng quên cập nhật giá trị của biến slideNow, cho nó biết rằng slide số 1 đang ở chế độ xem: slideNow = 1;
Điều kiện tương tự bao gồm việc kiểm tra xem số lượng trang trình bày mà chúng tôi nhìn thấy có nằm trong số lượng trang trình bày của chúng tôi hay không, nhưng nếu bằng cách nào đó điều này không được đáp ứng thì chúng tôi sẽ quay lại trang trình bày đầu tiên một lần nữa.
Nếu điều kiện đầu tiên không được đáp ứng thì điều này cho thấy rằng chúng ta đang khoảnh khắc này Chúng ta không ở trên slide cuối cùng cũng như không ở trên slide nào đó không tồn tại, có nghĩa là chúng ta cần chuyển sang slide tiếp theo, chúng ta sẽ thực hiện việc này bằng cách dịch chuyển slidewrapper sang trái một giá trị bằng chiều rộng khung nhìn, sự thay đổi sẽ lại xảy ra xảy ra thông qua thuộc tính dịch quen thuộc, giá trị của nó sẽ bằng "translate(" + TranslateWidth + "px, 0)" , trong đó dịchWidth là khoảng cách mà slidewrapper của chúng ta được dịch chuyển. Nhân tiện, hãy khai báo biến này ở đầu mã của chúng ta:
var dịchWidth = 0;
Sau khi chuyển sang slide tiếp theo, hãy thông báo cho slide của chúng ta rằng chúng ta sẽ thấy slide tiếp theo: slideNow++;
Tại thời điểm này, một số độc giả có thể thắc mắc: tại sao chúng ta không thay thế $("#viewport").width() bằng một số biến như slideWidth để luôn có sẵn chiều rộng của trang trình bày? Câu trả lời rất đơn giản, nếu trang web của chúng ta có tính thích ứng thì theo đó, khối được phân bổ cho thanh trượt cũng có tính thích ứng, dựa vào đó chúng ta có thể hiểu rằng khi thay đổi kích thước chiều rộng cửa sổ mà không cần tải lại trang (ví dụ: bật điện thoại lên). cạnh của nó), chiều rộng của khung nhìn sẽ thay đổi và theo đó, chiều rộng của một trang chiếu sẽ thay đổi. Trong trường hợp này, trình bao bọc slide của chúng tôi sẽ được chuyển sang giá trị chiều rộng ban đầu, có nghĩa là hình ảnh sẽ được hiển thị theo từng phần hoặc hoàn toàn không hiển thị trong khung nhìn. Bằng cách viết $("#viewport").width() thay vì slideWidth vào hàm của chúng ta, chúng ta buộc nó phải tính chiều rộng của khung nhìn mỗi khi chúng ta chuyển đổi các slide, từ đó đảm bảo rằng khi chiều rộng màn hình thay đổi mạnh, nó sẽ cuộn đến slide chúng tôi cần.
Tuy nhiên, chúng ta đã viết một hàm, bây giờ chúng ta cần gọi nó sau một khoảng thời gian nhất định, chúng ta cũng có thể lưu khoảng đó vào một biến để nếu muốn thay đổi, chúng ta chỉ có thể thay đổi một giá trị trong mã:
var slideInterval = 2000;
Thời gian tính bằng js được biểu thị bằng mili giây.
Bây giờ chúng ta hãy viết cấu trúc sau:
$(document).ready(function () ( setInterval(nextSlide, slideInterval); ));
Mọi thứ ở đây không thể đơn giản hơn; thông qua cấu trúc $(document).ready(function ()()) chúng ta nói rằng các hành động sau phải được thực hiện sau khi tài liệu đã được tải đầy đủ. Tiếp theo, chúng ta chỉ cần gọi hàm nextSlide với một khoảng bằng slideInterval bằng cách sử dụng hàm setInterval tích hợp sẵn.
Sau tất cả các bước chúng tôi đã thực hiện ở trên, thanh trượt của chúng tôi sẽ quay hoàn hảo, nhưng nếu có sự cố xảy ra thì sự cố có thể nằm ở phiên bản jQuery hoặc do kết nối không chính xác của bất kỳ tệp nào. Cũng không cần loại trừ rằng bạn có thể đã mắc lỗi ở đâu đó trong mã, vì vậy tôi chỉ có thể khuyên bạn nên kiểm tra kỹ mọi thứ. 
Trong lúc chờ đợi, hãy tiếp tục, thêm vào thanh trượt của chúng ta một chức năng như dừng cuộn khi di con trỏ. Để thực hiện việc này, chúng ta cần viết nội dung sau vào khối mã chính (bên trong $(document).ready( Cấu trúc hàm ()()):
$("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval(nextSlide, slideInterval); ));
Để bắt đầu phân tích mã này, chúng ta cần biết switchInterval là gì. Đầu tiên, đây là một biến lưu trữ lệnh gọi định kỳ đến hàm nextSlide, nói một cách đơn giản, chúng ta có dòng mã này: setInterval(nextSlide, slideInterval); , biến thành thế này: switchInterval = setInterval(nextSlide, slideInterval); . Sau những thao tác này, khối mã chính của chúng tôi đã lượt xem tiếp theo:
$(document).ready(function () ( var switchInterval = setInterval(nextSlide, slideInterval); $("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval ( nextSlide, slideInterval); )); ));
Ở đây tôi sử dụng sự kiện di chuột, có nghĩa là “khi di chuột”, sự kiện này cho phép tôi theo dõi thời điểm tôi di con trỏ qua một số đối tượng, trong trường hợp này là khung nhìn.
Sau khi di chuột, tôi xóa khoảng mà tôi chỉ ra trong ngoặc đơn (đây là switchInterval của chúng tôi), sau đó, cách nhau bằng dấu phẩy, tôi viết những gì tôi sẽ làm khi di chuyển con trỏ trở lại, trong khối này tôi lại gán switchInterval của chúng ta cho một định kỳ gọi hàm nextSlide.
Bây giờ, nếu kiểm tra, chúng ta có thể xem thanh trượt của chúng ta phản ứng như thế nào khi di chuột, dừng chuyển đổi trang trình bày.
Bây giờ là lúc thêm các nút vào thanh trượt của chúng ta, hãy bắt đầu với các nút tiến và lùi.
Trước hết, hãy đánh dấu chúng:
Lúc đầu đánh dấu này có thể chưa rõ, mình sẽ nói ngay là mình gói 2 nút này vào 1 div với lớp prev-next-btns chỉ để các bạn tiện theo dõi, các bạn không cần phải làm thế này, kết quả sẽ không thay đổi, bây giờ chúng ta sẽ thêm kiểu cho chúng và mọi thứ sẽ trở nên rõ ràng:
#prev-btn, #next-btn ( vị trí: tuyệt đối; chiều rộng: 50px; chiều cao: 50px; màu nền: #fff; bán kính đường viền: 50%; trên cùng: calc(50% - 25px); ) #prev- btn:hover, #next-btn:hover ( con trỏ: con trỏ; ) #prev-btn ( trái: 20px; ) #next-btn ( phải: 20px; )
Đầu tiên, chúng ta định vị các nút bằng cách sử dụng location:absolute , từ đó tự do kiểm soát vị trí của chúng bên trong khung nhìn của chúng ta, sau đó chúng ta sẽ chỉ ra kích thước của các nút này và sử dụng bán kính đường viền Hãy bo tròn các góc để các nút này biến thành hình tròn. Màu của chúng sẽ là màu trắng, nghĩa là #fff và phần bù của chúng từ cạnh trên của khung nhìn sẽ bằng một nửa chiều cao của khung nhìn này trừ đi một nửa chiều cao của chính nút đó (trong trường hợp của tôi là 25px), vì vậy chúng ta có thể đặt chúng theo chiều dọc ở trung tâm. Tiếp theo, chúng tôi sẽ chỉ định rằng khi chúng tôi di chuột qua chúng, con trỏ của chúng tôi sẽ thay đổi thành con trỏ và cuối cùng chúng tôi sẽ thông báo cho từng nút của mình rằng chúng phải cách các cạnh của chúng 20px để chúng tôi có thể nhìn thấy chúng theo cách phù hợp với chúng tôi .
Một lần nữa, bạn có thể tạo kiểu cho các thành phần trang theo cách bạn muốn, tôi chỉ đưa ra ví dụ về các kiểu mà tôi quyết định sử dụng.
Sau khi tạo kiểu, thanh trượt của chúng ta sẽ trông giống như thế này: 
Tiếp theo, quay lại tệp js của chúng tôi, nơi chúng tôi sẽ mô tả hoạt động của các nút. Chà, hãy thêm một chức năng nữa, nó sẽ hiển thị cho chúng ta slide trước:
hàm prevSlide() ( if (slideNow == 1 || slideNow slideCount) ( TranslateWidth = -$("#viewport").width() * (slideCount - 1); $("#slidewrapper").css(( " Transform": "translate(" + TranslateWidth + "px, 0)", "-webkit-transform": "translate(" + TranslateWidth + "px, 0)", "-ms-transform": "translate(" + TranslateWidth + "px, 0)", )); slideNow = slideCount; ) else ( TranslateWidth = -$("#viewport").width() * (slideNow - 2); $("#slidewrapper").css( ("transform": "translate(" + TranslateWidth + "px, 0)", "-webkit-transform": "translate(" + TranslateWidth + "px, 0)", "-ms-transform": "translate( " + TranslateWidth + "px, 0)", )); slideNow--; ) )
Nó được gọi là prevSlide và sẽ chỉ được gọi khi nhấp vào prev-btn. Trước tiên, chúng tôi kiểm tra xem chúng tôi có ở trang trình bày đầu tiên hay không, ở đây chúng tôi cũng kiểm tra xem slideNow của chúng tôi có vượt quá phạm vi thực tế của các trang trình bày hay không và nếu bất kỳ điều kiện nào là đúng, chúng tôi sẽ chuyển đến trang trình bày cuối cùng, di chuyển trình bao bọc slide đến giá trị chúng ta cần. Chúng tôi sẽ tính giá trị này bằng công thức: (chiều rộng của một trang trình bày) * (số trang trình bày - 1), chúng tôi lấy tất cả những điều này bằng dấu trừ, bởi vì chúng ta di chuyển nó sang bên trái, hóa ra khung nhìn bây giờ sẽ hiển thị cho chúng ta trang chiếu cuối cùng. Ở cuối khối này, chúng ta cũng cần thông báo cho biến slideNow rằng trang chiếu cuối cùng hiện đang ở trong chế độ xem của chúng ta.
Nếu chúng ta không ở slide đầu tiên thì chúng ta cần quay lại 1, để làm điều này, chúng ta lại thay đổi thuộc tính biến đổi của slidewrapper . Công thức là: (chiều rộng của một trang trình bày) * (số trang trình bày hiện tại - 2), một lần nữa, chúng ta lấy tất cả những điều này bằng dấu trừ. Nhưng tại sao -2 mà không phải -1, chúng ta chỉ cần lùi lại 1 slide thôi? Thực tế là nếu chúng ta ở trên slide thứ 2, thì biến x của thuộc tính Transform:translate(x,0) của slidewrapper của chúng ta đã bằng chiều rộng của một slide, nếu chúng ta nói với nó rằng chúng ta cần để trừ 1 từ số lượng của trang chiếu hiện tại, thì chúng ta sẽ lại nhận được một, theo đó trình bao bọc slide đã được dịch chuyển, vì vậy chúng ta sẽ cần phải dịch chuyển các độ rộng khung nhìn tương tự này bằng 0, nghĩa là trên slideNow - 2.
Bây giờ chúng ta chỉ cần thêm những dòng này vào khối mã chính:
$("#next-btn").click(function() ( nextSlide(); )); $("#prev-btn").click(function() ( prevSlide(); ));
Ở đây, chúng tôi chỉ theo dõi xem các nút của chúng tôi có được nhấp hay không và trong trường hợp này, chúng tôi gọi các chức năng chúng tôi cần, mọi thứ đều đơn giản và hợp lý.
Bây giờ, hãy thêm các nút điều hướng trang trình bày và quay lại phần đánh dấu:
Như bạn có thể thấy, một danh sách lồng nhau đã xuất hiện bên trong khung nhìn, hãy đặt cho nó mã định danh nav-btns , bên trong nó là các nút điều hướng, chúng ta sẽ gán cho chúng lớp slide-nav-btn , tuy nhiên, chúng ta có thể kết thúc bằng đánh dấu, hãy chuyển sang các kiểu:
#nav-btns ( vị trí: tuyệt đối; chiều rộng: 100%; đáy: 20px; phần đệm: 0; lề: 0; căn chỉnh văn bản: giữa; ) .slide-nav-btn ( vị trí: tương đối; hiển thị: khối nội tuyến; kiểu danh sách: không; chiều rộng: 20px; chiều cao: 20px; màu nền: #fff; bán kính đường viền: 50%; lề: 3px; ) .slide-nav-btn:hover ( con trỏ: con trỏ; )
Chúng tôi cung cấp khối nav-btns, trong đó các nút của chúng tôi được đặt, thuộc tính location:absolute để nó không kéo dài khung nhìn theo chiều cao, bởi vì slidewrapper có thuộc tính location:relative, chúng ta đặt chiều rộng thành 100% để căn giữa các nút theo chiều ngang so với khung nhìn bằng cách sử dụng text-align:center, sau đó sử dụng thuộc tính Bottom, chúng ta cho khối của mình biết rằng nó phải ở một khoảng cách 20px tính từ cạnh dưới.
Với các nút, chúng tôi thực hiện tương tự như với các trang trình bày, nhưng bây giờ chúng tôi cung cấp cho chúng display:inline-block , bởi vì với display:inline chúng không đáp ứng với chiều rộng và chiều cao vì đang ở trong một khối định vị tuyệt đối. Hãy làm cho chúng có màu trắng và sử dụng bán kính đường viền quen thuộc, tạo cho chúng hình dạng hình tròn. Khi chúng ta di chuột qua chúng, chúng ta sẽ thay đổi giao diện của con trỏ để hiển thị thông thường.
Bây giờ chúng ta hãy chuyển sang phần jQuery:
Đầu tiên, hãy khai báo một biến navBtnId, biến này sẽ lưu trữ chỉ mục của nút mà chúng ta đã nhấp vào:
var navBtnId = 0;
$(".slide-nav-btn").click(function() ( navBtnId = $(this).index(); if (navBtnId + 1 != slideNow) ( TranslateWidth = -$("#viewport"). width() * (navBtnId); $("#slidewrapper").css(( "transform": "translate(" + TranslateWidth + "px, 0)", "-webkit-transform": "translate(" + TranslateWidth + "px, 0)", "-ms-transform": "translate(" + TranslateWidth + "px, 0)", )); slideNow = navBtnId + 1; ) );
Ở đây, khi chúng ta nhấp vào slide-nav-btn, chúng ta gọi một hàm trước hết gán cho biến navBtnId là chỉ mục của nút được nhấp, tức là số sê-ri của nó, vì quá trình đếm ngược bắt đầu từ 0, thì nếu chúng ta nhấp vào nút thứ hai, sau đó nó được ghi vào giá trị navBtnId 1. Tiếp theo, chúng tôi kiểm tra xem chúng tôi thêm một vào số sê-ri của nút để lấy một số như thể đếm ngược bắt đầu không phải từ 0 mà từ 1, chúng tôi so sánh con số này với số của slide hiện tại, nếu chúng khớp nhau thì chúng ta sẽ không thực hiện bất kỳ hành động hành động nào vì slide mong muốn đã có trong khung nhìn.
Nếu slide chúng ta cần không nằm trong trường xem của khung nhìn thì chúng ta sẽ tính khoảng cách cần di chuyển slidewrapper sang trái, sau đó thay đổi giá trị của thuộc tính biến đổi CSS để dịch (cùng khoảng cách tính bằng pixel, 0 ). Chúng tôi đã làm điều này nhiều lần, vì vậy sẽ không có câu hỏi nào. Cuối cùng, chúng ta lại lưu giá trị của slide hiện tại vào biến slideNow; giá trị này có thể được tính bằng cách thêm một giá trị vào chỉ mục của nút được nhấp.
Trên thực tế, đó là tất cả, nếu có điều gì đó không rõ ràng, thì tôi sẽ để lại một liên kết đến jsfiddle, nơi tất cả mã được viết trong tài liệu sẽ được cung cấp.
Cám ơn vì sự quan tâm của bạn!
Thẻ: Thêm thẻ
