Một lựa chọn các thanh trượt thích ứng. Thanh trượt hình ảnh tùy chỉnh bằng jQuery

Thiết kế web thích ứng, hoặc nếu bạn thích, thiết kế web đáp ứng giờ đây không chỉ là một xu hướng thiết kế khác mà nó đã là một tiêu chuẩn nhất định để phát triển trang web, đảm bảo tính linh hoạt của trang web và cảm nhận hình ảnh hài hòa trên màn hình của nhiều thiết bị người dùng khác nhau. 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ể. Ngày nay mọi thứ đơn giản hơn nhiều, có một số lượng lớn các giải pháp làm sẵn trên Internet và điều đặc biệt hài lòng là hầu hết chúng đều có sẵn miễn phí, nguồn mở.

Do có nhiều công cụ được cung cấp, tôi đã biên soạn một bản tổng quan ngắn gọn về những phát triển đáng chú ý nhất của thanh trượt hình ảnh jQuery đáp ứng đã xuất hiện gần đây và được 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 WOW

Thanh trượt hình ảnh jQuery đáp ứng với một bộ hiệu ứng hình ảnh tuyệt vời (xoay, bay 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. Một plugin WordPress riêng biệt và một mô-đun dành cho Joomla cũng có sẵn để tải xuống. Tôi chắc chắn rằng nhiều người sẽ thích thanh trượt tuyệt vời này, cả người mới bắt đầu và quản trị viên web có kinh nghiệm.

HiSlider

HiSlider - HTML5, thanh trượt Jquery và thư viện hình ảnh, plugin hoàn toàn miễn phí để sử dụng cá nhân trên các trang web chạy hệ thống phổ biến - WordPress, Joomla, Drupal. Với 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...

Thanh trượt Nivo

Nivo Slider là một cái cũ tốt, được nhiều người biết đến, một trong những thanh trượt hình ảnh đẹp nhất và dễ sử dụng nhất. Plugin JQuery Nivo Slider được tải xuống và sử dụng miễn phí và được cấp phép theo giấy phép MIT. Ngoài ra còn có một plugin riêng dành cho WordPress, nhưng tiếc là nó đã được trả phí và bạn sẽ phải trả $29 cho một giấy phép. Tốt hơn hết bạn nên thực hiện một chút phép thuật với các tệp chủ đề WP và đính kèm phiên bản jQuery miễn phí của plugin Nivo Slider vào blog của bạn, vì có rất nhiều thông tin về cách thực hiện việc này trên Internet.
Về chức năng, mọi thứ đều ổn với điều này. Nó sử dụng thư viện jQuery v1.7+, hiệu ứng chuyển tiếp đẹp mắt, 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 hướng dẫn 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à plugin jQuery 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 khe

Thanh trượt hình ảnh toàn màn hình sử dụng JQuery và CSS3 + hướng dẫn chi tiết về tích hợp plugin vào các trang website. Ý tưởng là cắt slide hiện tại đang mở với nội dung cụ thể khi chuyển sang nội dung tiếp theo hoặc trước đó. Sử dụng hoạt ảnh JQuery và CSS, bạn có thể tạo các hiệu ứng chuyển tiếp độc đáo giữa các trang chiếu. Bố cục đáp ứng của thanh trượt đảm bảo rằng nó trông đẹp như nhau trên các loại thiết bị người dùng khác nhau.

Thanh trượt nội dung đàn hồi

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.

Thanh trượt ngăn xếp 3D

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ố.

Trang trình bày tối thiểu

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. Bố cục đơn giản sử dụng danh sách không có thứ tự, tùy chỉnh các chuyển tiếp và khoảng thời gian, điều khiển chuyển đổi trang chiếu tự động và thủ công cũng như hỗ trợ nhiều trình chiếu cùng một lúc. Đây là một "em bé" vui tươi.

Máy ảnh

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, một thanh trượt nhẹ với nhiều hiệu ứng chuyển tiếp, bố cục đáp ứng 100% và cài đặt rấ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 di động). 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.

bxSlider jQuery

Một thanh trượt phản hồi khá đơn giản khác trong jQuery. Bạn có thể đặt bất kỳ nội dung, video, hình ảnh, văn bản và các thành phần khác trên trang trình bày của mình. Hỗ trợ mở rộng cho màn hình cảm ứng. Sử dụng hoạt ảnh chuyển tiếp CSS. Một số lượng lớn các biến thể khác nhau của trình chiếu và thư viện hình ảnh nhỏ gọn. Điều khiển tự động và bằng tay. Chuyển đổi các slide bằng cách sử dụng các nút và bằng cách chọn hình thu nhỏ. Kích thước tệp nguồn nhỏ, rất dễ cấu hình và thực hiện.

FlexSlider 2

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.

phòng trưng bày

Một plugin jQuery đáp ứng nổi tiếng và khá phổ biến để tạo các thư viện hình ảnh và thanh trượt chất lượng cao. Giao diện thanh trượt, nhờ bảng điều khiển, trông giống như một trình phát video quen thuộc; plugin bao gồm một số chủ đề thiết kế khác nhau. Hỗ trợ video và hình ảnh được nhúng từ các dịch vụ phổ biến: Flickr, Vimeo, YouTube và các dịch vụ khác. Tài liệu chi tiết về thiết lập và sử dụng.

việt quất

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...

jQuery Popeye 2.1

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.

Sự liên tiếp

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.

Vuốt

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 đáp ứng

Thanh trượt hình ảnh thích ứng đẹp mắt của Vladimir Kudinov các đồng chí ạ. Một công cụ vững chắc, được thiết kế tốt, được cung cấp các ví dụ minh họa và hướng dẫn chi tiết để 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 màu xanh lá cây, mọi thứ khá đẹp và êm dịu, không có áp lực.

Phân sốThanh trượt

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 từng cài đặt 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 sản phẩm được xem xét. Bạn có thể tìm hiểu tất cả thông tin chi tiết và mô tả chi tiết về chức năng của một plugin cụ thể 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. Sử dụng jQuery - pluginĐối với một thanh trượt, nó dường như không mấy thú vị đối với tôi, 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 những đoạn script quanh co, vì vậy tôi quyết định viết đoạn script của riêng mình cho thanh trượt, đoạn script này tôi sẽ tự đánh dấu khi 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 tôi sẽ là khung nhìn, nghĩa là khối mà chúng ta sẽ thấy hình ảnh của chúng ta xoay như thế nào, trong đó chúng ta sẽ có slidewrapper, đây sẽ là khối của chúng tôi 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ó trong khung nhìn.

Tiếp theo, ở các mặt bên trong khung nhìn, theo chiều dọc ở giữa sẽ có nút quay lại và tiến lên, khi các bạn bấm vào chúng ta cũng sẽ thay đổi vị trí của mình slidewrapper tương đối khung nhìn, do đó gây ra hiệu ứng cuộn qua các hình ả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 ở phía dưới khung nhìn.

Khi nhấp vào chúng, chúng ta sẽ chỉ cần xem số sê-ri của nút này và di chuyển nó đến trang trình bày mà chúng ta cần, một lần nữa bằng cách dịch chuyển slidewrapper(sự thay đổi sẽ được thực hiện thông qua việc thay đổi chuyển đổi thuộc tính css, giá trị của nó sẽ được tính toán 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 sự 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 chúng ta hãy mở tập tin chỉ mục và viết đánh dấu chúng ta cần ở đó:

Như bạn thấy, không có gì phức tạp, khối cho thanh trượtđóng vai trò chỉ là khối trong đó thanh trượt của chúng ta sẽ được đặt, bên trong nó đã có khung nhìn, trong đó có chứa của chúng tôi slidewrapper, hay còn gọi là danh sách lồng nhau, ở đây lý là các slide, và hình ảnh- 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 khối cho thanh trượt, tôi nhắc lại, đâ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 khối cho thanh trượt, thì chính tôi cầu trượt có cùng chiều rộng và theo đó, hình ảnh bên trong nó thay đổi chiều cao tùy theo chiều rộng (tỷ lệ được duy trì). 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ụ.

Yếu tố khung nhìn, như đã đề cập, chiếm toàn bộ chiều rộng của chúng tôi khối cho thanh trượt, nó có tính chất tràn:ẩn, nó sẽ cho phép chúng tôi ẩn nguồn cấp dữ liệu hình ảnh của mình, nguồn cấp dữ liệu này mở rộng ra ngoài khung nhìn.

Tiếp theo thuộc tính css - người dùng chọn: không, cho phép bạn loại bỏ phần đánh dấu màu xanh lam của từng thành phần thanh trượt riêng lẻ khi bạn nhấp liên tục vào các nút.

Hãy chuyển sang slidewrapper, Tại sao chức vụ: tương đối, nhưng không 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: bị ẩn Nó dường như chẳng là gì đối với chúng ta, bởi vì... riêng tôi khung nhìn sẽ không điều chỉnh theo chiều cao slidewrapper, bởi vì 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ó? Thực tế là các slide của chúng ta sẽ có chiều rộng bằng 100% từ khung nhìn, và để sắp xếp chúng thành một đường thẳng, chúng ta cần một vị trí để chúng đứng, sao cho chiều rộng slidewrapper nên bằng nhau Chiều rộng khung nhìn 100%, nhân với số trang trình bày (trong trường hợp của tôi là 4). Về việc chuyển tiếp Và chức năng chuyển đổi thời gian, thì ở đây 1 giây có nghĩa là một sự thay đổi là một sự thay đổi vị trí slidewrapper sẽ xảy ra trong vòng 1 giây và chúng ta sẽ quan sát nó, và dễ dàng ra vào– một loại hoạt ảnh trong đó nó bắt đầu chậm, tăng tốc về giữa và sau đó lại chậm lại; tại đây bạn có thể đặt các giá trị theo ý mình.

Khối thuộc tính tiếp theo chỉ định slidewrapper và các phần tử con của nó không có phần đệm, không có nhận xét nào ở đây.

Tiếp theo, chúng ta tạo kiểu cho các slide của mình, chiều rộng của chúng phải bằng chiều rộng khung nhìn, nhưng bởi vì họ đang ở trong slidewrapper, chiều rộng của nó bằng chiều rộng của khung nhìn nhân với số slide, sau đó sẽ có chiều rộng khung nhìn một lần nữa, chúng ta cần 100% chiều rộng slidewrapper chia cho số trang trình bày (trong trường hợp của tôi, một lần nữa, cho 4). Sau đó, chúng ta sẽ biến chúng thành các phần tử nội tuyến bằng cách sử dụng Hiển thị nội dòng và đặt luồng sang bên trái bằng cách thêm thuộc tính nổi: trái. Về kiểu danh sách: không có 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 lý, trong hầu hết các trường hợp là một loại tiêu chuẩn.

có slide-img Rất đơn giản, hình ảnh sẽ chiếm toàn bộ chiều rộng cầu trượt, cầu trượtđiều chỉnh theo chiều cao của nó, slidewrapperđiều chỉnh theo chiều cao cầu trượt, và chiều cao khung nhìn lần lượt sẽ lấy giá trị chiều cao slidewrapper, do đó, chiều cao của thanh trượt của chúng tôi 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ở của chúng tôi tập tin js, sẽ chứa mã 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 phiên bản jQuery 3.1.0. Tệp có tập lệnh phải được đưa vào cuối thẻ thân hình, 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.

Bây giờ 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 slide 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 cho cô ấy trượt ngay bây giờ và cái thứ hai sẽ lưu trữ số lượng các slide tương tự, cái này slideĐếm.

var slideNow = 1; var slideCount = $("#slidewrapper").children().length);

Biến đổi trượt ngay bây giờ cần phải đặt giá trị ban đầu là 1, 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 khung nhìn.

TRONG slideĐếm chúng tôi sẽ đặt số lượng trẻ em slidewrapper, mọi thứ đều hợp lý ở đây.
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ì:

hàm nextSlide() ( if (slideNow == slideCount || slideNow<= 0 || 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 slide bằng cách sử dụng $("#slidewrapper").children().length và kiểm tra nó bằng số 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ị lại nguồn cấp dữ liệu, từ trang trình bày 1, có nghĩa là chúng tôi thay đổi chuyển đổi thuộc tính css Tại slidewrapper TRÊN dịch(0, 0), do đó dịch chuyển nó về vị trí ban đầu để slide đầu tiên xuất hiện trong tầm nhìn của chúng ta, chúng ta cũng đừng quên –webkit và –msđể hiển thị đầy đủ trên nhiều trình duyệt (xem. tham chiếu thuộc tính css). Sau này, đừng quên cập nhật giá trị của biến trượt ngay bây giờ, nói với cô ấy rằng slide số 1 đang được 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 hiện không ở trang trình bày cuối cùng cũng như không ở trang trình bày nào đó không tồn tại, có nghĩa là chúng ta cần chuyển sang trang 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ự dịch chuyển sẽ lại xảy ra thông qua tính chất quen thuộc dịch, giá trị của nó sẽ bằng "translate(" + TranslateWidth + "px, 0)", Ở đâu dịchChiều rộng– khoảng cách mà chúng tôi slidewrapper. 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, chúng ta hãy nói với slide của chúng ta. Bây giờ 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 tôi không thay thế $("#viewport").width()đến một số biến, ví dụ chiều rộng trượtđể 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 cửa sổ mà không cần tải lại trang (ví dụ: xoay điện thoại ở bên cạnh), chiều rộng 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 của chúng tôi slidewrapper 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 vào chức năng của chúng tôi $("#viewport").width() thay vì chiều rộng trượt chúng tôi buộc nó phải tính chiều rộng mỗi khi chúng tôi chuyển đổi trang trình bày khung nhìn, từ đó đảm bảo khi chiều rộng màn hình thay đổi mạnh, chúng ta có thể cuộn đến slide mình 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ứ không thể đơn giản hơn ở đây, chúng ta đang xem xét thiết kế $(document).ready(function () ()) Chúng tôi đang 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 slide tiếp theo với một khoảng bằng trượt Khoảng thời gian, sử dụng chức năng tích hợp tập khoảng thời gian.

Sau tất cả các hành động mà 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 với bạn thì vấn đề có thể nằm ở phiên bản jQuery hoặc kết nối không chính xác của bất kỳ tập tin 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ỏ, để làm được điều này, chúng ta cần viết vào khối mã chính (bên trong cấu trúc $(document).ready(function ()()) Thứ này:

$("#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 cái gì là chuyển đổi Khoảng thời gian. Đầ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 có dạng sau:

$(document).ready(function () ( var switchInterval = setInterval(nextSlide, slideInterval); $("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval ( nextSlide, slideInterval); )); ));

Ở đây tôi đang sử dụng sự kiện bay lượn, 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ỏ lên một đối tượng nào đó, trong trường hợp này là khung nhìn.

Sau khi di chuột, tôi xóa khoảng thời gian mà tôi chỉ ra trong ngoặc (đây là khoảng thời gian của chúng tôi chuyển đổi Khoảng thời gian), 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 cho chuyển đổi Khoảng thời gian gọi hàm định kỳ slide tiếp theo.

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ể khó hiểu, nhưng tôi sẽ nói ngay rằng tôi đã gói hai nút này thành một div với lớp trước-tiếp theo-btnsĐể thuận tiện cho bạn, bạn không cần phải làm điều này, kết quả sẽ không thay đổi, bây giờ chúng tôi 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 của mình thông qua vị trí: tuyệt đối, nhờ đó chúng ta sẽ tự do kiểm soát vị trí của họ trong phạm vi của chúng ta khung nhìn, sau đó chúng tôi 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, tức là #fff, và khoảng cách của chúng từ cạnh trên khung nhìn sẽ bằng một nửa chiều cao của cái này khung nhìn trừ đi một nửa chiều cao của nút (trong trường hợp của tôi là 25px), bằng cách này chúng ta có thể đặt chúng theo chiều dọc ở giữa. Tiếp theo, chúng tôi sẽ chỉ ra 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, hãy nói với từng nút của chúng ta rằng chúng nên được đặt lùi lại 20px so với các cạnh của chúng để chúng ta có thể nhìn thấy chúng theo cách phù hợp với chúng ta.

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, chúng ta quay trở lại với tập tin js, nơi chúng tôi 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<= 0 || 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à trướcTrượt, nó sẽ chỉ được gọi khi bạn click vào trước-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 liệu chúng tôi có trượt ngay bây giờ vượt quá phạm vi thực tế của các trang trình bày của chúng tôi và nếu bất kỳ điều kiện nào được kích hoạt, chúng tôi sẽ chuyển đến trang trình bày cuối cùng, dịch chuyển slidewrapperđế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 dịch nó sang trái, hóa ra là khung nhìn bây giờ sẽ hiển thị cho chúng ta slide cuối cùng. Ở cuối khối này, chúng ta cũng cần cho biết biến trượt ngay bây giờ rằng slide cuối cùng hiện đang ở trong tầm nhìn của chúng ta.

Nếu chúng ta không ở trang trình bày đầ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 cho 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 trang trình bày thứ 2, thì biến x của cải biến đổi: dịch (x, 0) của chúng tôi slidewrapperđã bằng chiều rộng của một slide, nếu chúng ta nói với anh ta rằng chúng ta cần trừ 1 từ số lượng slide hiện tại, chúng ta sẽ lại nhận được một slide mà chúng ta đã dịch chuyển slidewrapper, vì vậy bạn sẽ cần chuyển các độ rộng tương tự này thành 0 khung nhìn, 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, bên trong khung nhìn một danh sách lồng nhau đã xuất hiện, hãy đặt cho nó một mã định danh điều hướng-btns, bên trong nó lý– các nút điều hướng của chúng tôi, chúng tôi sẽ gán cho chúng một lớp trượt-nav-btn, tuy nhiên, chúng ta có thể hoàn thành việc đá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ỏ; )

khối điều hướng-btns, trong đó các nút của chúng tôi được đặt, chúng tôi cung cấp thuộc tính vị trí: tuyệt đối, để nó không bị giãn khung nhìn về chiều cao, bởi vì Tại slidewrapper tài sản chức vụ: tương đối, chúng tôi đặt chiều rộng thành 100% để sử dụng căn chỉnh văn bản:giữa căn giữa các nút theo chiều ngang so với khung nhìn, sau đó sử dụng tính chất đáy Chúng ta cho khối của mình biết rằng nó phải cách cạnh dưới 20px.

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 hiển thị: khối nội tuyến, bởi vì Tại Hiển thị nội dòng họ không trả lời chiều rộng Và chiều cao, bởi vì đang ở trong một khối định vị tuyệt đối. Hãy làm cho chúng trắng và sử dụng những gì chúng ta đã biết bán kính đường viền Hãy cho chúng hình dạng của một vòng 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ờ, hãy bắt đâù jQuery - các bộ phận:
Đầ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; ) );

Chúng tôi ở đây khi bạn nhấp vào trượt-nav-btn gọi một hàm đầu tiên gán cho một biến điều hướngBtnId 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, nên nếu chúng ta nhấp vào nút thứ hai thì điều hướngBtnId giá trị 1 được ghi lại. Tiếp theo, chúng tôi thực hiện kiểm tra, trong đó chúng tôi thêm một vào số sê-ri của nút để nhận được một số như thể việc đếm ngược bắt đầu không phải từ 0 mà từ 1, chúng tôi so sánh số này với số của trang trình bày hiện tại, nếu chúng khớp nhau thì chúng tôi sẽ không thực hiện bất kỳ hành động nào, vì trang trình bày được yêu cầu đã có sẵn khung nhìn.

Nếu slide chúng ta cần không xuất hiện khung nhìn, sau đó chúng ta tính khoảng cách mà chúng ta cần di chuyển slidewrapper sang trái rồi thay đổi giá trị chuyển đổi thuộc tính 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 một biến trượt ngay bây giờ, giá trị này có thể được tính bằng cách thêm một 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ẻ

Chúng ta cần một thanh trượt đơn giản có tính năng cuộn tự động. Bắt đầu nào...

Mô tả cách hoạt động của thanh trượt.

Các slide sẽ được xếp thành hàng và cuộn sau một khoảng thời gian nhất định.

Khung màu đỏ hiển thị phần hiển thị của thanh trượt.

Ở cuối thanh trượt bạn cần nhân đôi slide đầu tiên. Điều này là cần thiết để đảm bảo cuộn từ slide thứ ba sang slide đầu tiên. Bạn cũng cần thêm slide cuối cùng vào đầu để có thể cuộn ngược từ slide đầu tiên đến slide thứ ba. Dưới đây được hiển thị cách thanh trượt hoạt động theo hướng thuận.

Khi thanh trượt đến cuối, một bản sao của nó từ đầu thanh trượt sẽ ngay lập tức được đặt vào vị trí của trang chiếu cuối cùng. Sau đó chu kỳ lặp lại một lần nữa. Điều này tạo ra ảo giác về một thanh trượt vô tận.

đánh dấu HTML

Đầu tiên, hãy tạo một thanh trượt đơn giản với khả năng cuộn tự động. Nó đòi hỏi hai container để hoạt động. Cái đầu tiên sẽ đặt kích thước vùng hiển thị của thanh trượt và cái thứ hai là cần thiết để đặt các thanh trượt trong đó. Bố cục thanh trượt sẽ trông như thế này:

> >

Kiểu trượt

.slider-box( chiều rộng : 320px ; chiều cao : 210px ; tràn : ẩn ; ) .slider( vị trí : tương đối ; chiều rộng : 10000px ; chiều cao : 210px ; ) .slider img( float : left ; z-index : 0 ; )

Container.slider-box chỉ định kích thước của thanh trượt. Sử dụng thuộc tính tràn: ẩn, tất cả các phần tử không có trong khu vực bên trong phần tử đều bị ẩn.

Container.slider được đặt thành chiều rộng lớn. Điều này là cần thiết để tất cả các slide đều khớp với dòng.

Các slide được căn chỉnh bằng thuộc tính float:left.

Dưới đây là sơ đồ bố trí các khối trượt.

Kịch bản

Các slide sẽ di chuyển bằng cách thay đổi trơn tru thuộc tính lề trái của container.slider.

$(function () ( var width= $(".slider-box" ) .width () ; // Chiều rộng thanh trượt. khoảng = 4000; // Khoảng thời gian thay đổi slide.$(".slider img:last" ) .clone () .prependTo ("".slider" ) ; // Bản sao của slide cuối cùng được đặt ở đầu.$().eq(1).clone().appendTo(".slider"); // Bản sao của slide đầu tiên được đặt ở cuối. // Container.slider được dịch chuyển sang trái theo chiều rộng của một slide. setInterval("animation()", interval) ; // Hàm animation() được khởi chạy để thay đổi slide.) ) ; hàm animation() ( var Margin = ParseInt($(".slider") .css ("marginLeft" ) ); // Khối hiện tại offset.slider width= $(".slider-box" ) .width() , // Chiều rộng thanh trượt. SlidersAmount= $(".slider" ) .children () .length ; // Số slide trong thanh trượt. if (margin!= (- width* (slidersAmount- 1 ) ) ) // Nếu slide hiện tại không phải là slide cuối cùng,( lề= chiều rộng lề; // thì giá trị lề sẽ giảm theo chiều rộng của slide.) khác ( // Nếu slide cuối cùng được hiển thị,$(".slider" ) .css ("lề trái", - chiều rộng) ; // sau đó block.slider trở về vị trí ban đầu, lề=- chiều rộng* 2 ; ) $(".slider") .animate ((marginLeft:margin) , 1000 ) ; // Block.slider được dịch sang trái 1 slide. } ;

Kết quả là một thanh trượt đơn giản có khả năng cuộn tự động vô tậ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). Bạn chỉ cần chèn số lượng div cần thiết và mọi thứ khác sẽ tự tính toán. Vâng, có thể lưu ý rằng số lượng slide là không giới hạn.

Tập lệnh tương thích với tất cả các trình duyệt hiện đại: IE, Opera, Firefox, Safari, Chrome (vì thanh trượt không sử dụng CSS3).

Hãy bắt đầu với đánh dấu HTML. Trang hoặc mẫu HTML cần được chèn vào vị trí cần thiết.

Đây là nội dung slide 1

Đây là nội dung slide 2

Đây là nội dung slide 3

Mọi thứ ở đây đều đơn giản, như bạn có thể thấy, bạn có thể chèn bao nhiêu slide tùy thích bằng cách tạo các div mới. Bạn có thể chèn bất kỳ mã HTML nào vào bên trong chúng, ví dụ như hình ảnh hoặc khối văn bản. Chỉ cần đừng quên bao gồm chính thư viện jQuery cùng với tất cả các tập lệnh js. Nếu bạn không biết cách, hãy xem ví dụ.

#slider-wrap( /* Wrapper cho thanh trượt và các nút */ width:660px; ) #slider( /* Wrapper cho thanh trượt */ width:640px; Height:360px; tràn: ẩn; viền:#eee Solid 10px; vị trí:tương đối; ) .slide( /* Slide */ width:100%; chiều cao:100%; ) .sli-links( /* Các nút để thay đổi trang trình bày */ lề-top:10px; text-align:center;) .sli-links . control-slide(margin:2px; display:inline-block; width:16px; chiều cao:16px; tràn:ẩn; text-indent:-9999px; nền:url(radioBg.png) trung tâm phía dưới không- lặp lại;) .sli -links .control-slide:hover( con trỏ:con trỏ; vị trí nền:trung tâm trung tâm;) .sli-links .control-slide.active( vị trí nền: đỉnh trung tâm;) #prewbutton, #nextbutton ( /* Liên kết " Tiếp theo" và "Trước" */ display:block; width:15px; chiều cao:100%; vị trí:tuyệt đối; top:0; tràn:ẩn; thụt lề văn bản:-999px; nền:url(arrowBg .png) 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 là các thành phần đơn giản của biểu mẫu con số, 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 parent.sli-link của chúng. Đối với các nút, chúng tôi thiết lập giao diện đẹp mắt, cụ thể là, chúng tôi tạo từng nút vuông, căn chỉnh tất cả chúng ở giữa và cũng nhờ vào tràn: ẩn và thụt lề văn bản:-9999px, chúng tôi xóa văn bản, chỉ để lại các biểu tượng nền , cũng thay đổi khi di chuột tới phần tử con trỏ này. Để 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 để làm cho chúng hiển thị, tôi đã đặt cho chúng một vị trí 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 ở đây mọi thứ đều rõ ràng và đơn giản: 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 + ""; }); $("

" + $addSpan + "

").appendTo("#slider-wrap"); $(".control-slide:first").addClass("active"); $(".control-slide").click(function())( var goToNum = parsFloat($(this).text()); animSlide(goToNum); )); varpause = false; 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; công cụ quay vòng(); ) ); công cụ quay vòng(); ));

Đầu tiên, cài đặt được lưu trong các biến: hwSlideSpeed - tốc độ xoay slide, hwTimeOut - thời gian sau đó slide tự động thay đổi, hwNeedLinks - điều khiển liên kết "Tiếp theo" và "Trước" - nếu giá trị của biến này là đúng thì các liên kết này sẽ được hiển thị, còn nếu sai thì theo đó chúng sẽ không hiển thị (như trên trang chính blog của tôi).

Tiếp theo, chúng ta đặt các thuộc tính CSS cần thiết cho các slide bằng phương thức .css(). Chúng tôi xếp chồng các khối có các trang trình bày lên nhau bằng cách sử dụng định vị tuyệt đối, sau đó ẩn tất cả chúng.hide() và sau đó chỉ hiển thị khối đầu tiên. Biến slideNum là số slide đang hoạt động, tức là bộ đếm.

Logic chính của thanh trượt jQuery của chúng tôi là hàm animSlide. Phải mất một tham số. Nếu chúng ta chuyển các chuỗi “next” hoặc “prew” vào đó, thì các toán tử có điều kiện sẽ hoạt động 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:Đó chưa 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.