Một thanh trượt đơn giản với bản xem trước jquery. Plugin trình chiếu jQuery “Easy Slides” v1.1. Thanh trượt JS tùy chỉnh - triển vọng phát triển
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 đó chuyển nó sang vị trí ban đầuđể trang trình bày đầ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 đang khoảnh khắc này Chúng tôi không ở trang trình bày cuối cùng cũng như không ở trang trình bày không tồn tại nào đó, có nghĩa là chúng tôi cần chuyển sang trang trình bày tiếp theo, chúng tôi 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 tiến hành 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 hết chỗ tài liệu. 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 phải loại trừ khả nă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 đã 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 đ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 khi tôi di chuột qua một đối tượng nào đó, trong trong trường hợp này TRÊN 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, tôi sẽ nói ngay là tôi gộp hai nút này lại 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 slide) * (số slide 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 trang chiếu, nếu chúng ta nói với anh ta rằng chúng ta cần trừ 1 từ số trang chiếu hiện tại, thì chúng ta sẽ lại nhận được một trang, theo đó 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ẻ
18/05/15 48.9KNếu bạn cần thêm thanh trượt hình ảnh jQuery chất lượng cao vào trang web của mình thì trong bài viết này bạn sẽ tìm thấy mô tả plugin cần thiết. Mặc dù JQuery đã giúp làm việc với JavaScript dễ dàng hơn nhiều nhưng chúng ta vẫn cần các plugin để tăng tốc quá trình thiết kế web.
Chúng tôi có thể thay đổi một số plugin này và tạo các thanh trượt mới phù hợp hơn nhiều cho mục đích trang web của chúng tôi.
Đối với các thanh trượt khác, bạn chỉ cần thêm tiêu đề, hình ảnh và chọn hiệu ứng chuyển tiếp slide đi kèm với thanh trượt. Tất cả các plugin này đều có tài liệu chi tiết kèm theo nên việc thêm các hiệu ứng hoặc chức năng mới vào chúng sẽ không khó. Bạn thậm chí có thể thay đổi trình kích hoạt dựa trên sự kiện nếu bạn là lập trình viên JQuery có kinh nghiệm.
Các xu hướng mới nhất như thiết kế đáp ứng rất quan trọng đối với các dự án web, cho dù bạn đang triển khai plugin hay tập lệnh. Tất cả những yếu tố này làm cho mỗi plugin này trở nên rất linh hoạt. Tất cả mọi thứ xuất hiện trong năm 2014 đều có trong danh sách này.
Thanh trượt hình ảnh jQuery
Thanh trượt đáp ứng Jssor
Gần đây tôi đã biết đến thanh trượt jQuery mạnh mẽ này và có thể tận mắt thấy rằng nó hoạt động rất tốt. Nó chứa đựng những khả năng vô hạn có thể được mở rộng thông qua mã nguồn mở của thanh trượt:
- Thiết kế thích ứng;
- Hơn 15 tùy chọn tùy chỉnh;
- Hơn 15 hiệu ứng thay đổi hình ảnh;
- Thư viện hình ảnh, băng chuyền, hỗ trợ kích thước toàn màn hình;
- Công cụ xoay biểu ngữ dọc, danh sách các slide;
- Hỗ trợ video.
Bản trình diễn | Tải xuống
PgwSlider - thanh trượt đáp ứng dựa trên JQuery/Zepto
Nhiệm vụ duy nhất của plugin này là hiển thị các slide hình ảnh. Nó rất nhỏ gọn vì các tệp JQuery chỉ có kích thước 2,5 KB, cho phép nó tải rất nhanh:
- Bố cục thích ứng;
- Tối ưu hóa SEO;
- Hỗ trợ cho các trình duyệt khác nhau;
- Chuyển đổi hình ảnh đơn giản;
- Kích thước lưu trữ chỉ là 2,5 KB.
Bản trình diễn | Tải xuống
Thanh trượt tin tức dọc Jquery
Thanh trượt JQuery linh hoạt và hữu ích được thiết kế cho các tài nguyên tin tức với danh sách các ấn phẩm ở bên trái và hình ảnh hiển thị ở bên phải:
- Thiết kế thích ứng;
- Cột dọc để chuyển đổi tin tức;
- Tiêu đề mở rộng.
Bản trình diễn | Tải xuống
Thanh trượt Wallop
Thanh trượt này không chứa jQuery, nhưng tôi muốn giới thiệu nó vì nó rất nhỏ gọn và có thể giảm đáng kể thời gian tải trang. Hãy cho tôi biết nếu bạn thích nó:
- Bố cục thích ứng;
- Thiết kế đơn giản;
- Tùy chọn thay đổi slide khác nhau;
- Mã JavaScript tối thiểu;
- Kích thước chỉ có 3KB.
Bản trình diễn | Tải xuống
Phòng trưng bày Polaroid kiểu phẳng
Một thư viện theo phong cách rải rác tài liệu trên bàn làm việc với bố cục linh hoạt và thiết kế đẹp mắt chắc chắn sẽ được nhiều bạn quan tâm. Phù hợp hơn cho máy tính bảng và màn hình lớn:
Bản trình diễn | Tải xuống
HiSlider – Thanh trượt hình ảnh HTML5, jQuery và WordPress
HiSlider đã giới thiệu một plugin thanh trượt jQuery miễn phí mới mà bạn có thể tạo nhiều thư viện hình ảnh khác nhau với các hiệu ứng chuyển tiếp tuyệt vời:
- Thanh trượt thích ứng;
- Không yêu cầu kiến thức lập trình;
- Một số mẫu và giao diện tuyệt vời;
- Hiệu ứng chuyển tiếp đẹp mắt;
- Hỗ trợ cho các nền tảng khác nhau;
- Tương thích với WordPress, Joomla, Drupal;
- Khả năng hiển thị các loại nội dung khác nhau: hình ảnh, video YouTube và video Vimeo;
- Thiết lập linh hoạt;
- Các tính năng bổ sung hữu ích;
- Không giới hạn số lượng nội dung được hiển thị.
Demo |Tải xuống
Ôi thanh trượt
WOW Slider là một thanh trượt hình ảnh jQuery đáp ứng với các hiệu ứng hình ảnh tuyệt vời ( domino, xoay, làm mờ, lật và nhấp nháy, bay ra, rèm) và các mẫu chuyên nghiệp.
WOW Slider đi kèm với trình hướng dẫn cài đặt cho phép bạn tạo các thanh trượt tuyệt vời trong vài giây mà không cần phải hiểu mã hoặc chỉnh sửa hình ảnh. Các phiên bản plugin dành cho Joomla và WordPress cũng có sẵn để tải xuống:
- Đáp ứng đầy đủ;
- Hỗ trợ tất cả các trình duyệt và tất cả các loại thiết bị;
- Ủng hộ thiết bị cảm ứng;
- Dễ dàng cài đặt trên WordPress;
- Linh hoạt trong cấu hình;
- Tối ưu hóa SEO.
Demo |Tải xuống
Nivo Slider – plugin jQuery miễn phí
Thanh trượt Nivođược cả thế giới biết đến là thanh trượt hình ảnh đẹp nhất và dễ sử dụng nhất. Plugin Nivo Slider miễn phí và được phát hành theo giấy phép MIT:
- Yêu cầu JQuery 1.7 trở lên;
- Hiệu ứng chuyển tiếp đẹp mắt;
- Cấu hình đơn giản và linh hoạt;
- Nhỏ gọn và thích ứng;
- Mã nguồn mở;
- Mạnh mẽ và đơn giản;
- Một số mẫu khác nhau;
- Cắt ảnh tự động.
Demo |Tải xuống
Thanh trượt jQuery đơn giản với tài liệu kỹ thuật
Ý tưởng này được lấy cảm hứng từ thanh trượt của Apple, trong đó một số phần tử nhỏ có thể bay ra ngoài với các hiệu ứng hoạt hình khác nhau. Các nhà phát triển đã cố gắng thực hiện khái niệm này có tính đến Yêu cầu tối thiểuđể tạo một thiết kế cửa hàng trực tuyến đơn giản trong đó các yếu tố “bay” đại diện cho các danh mục khác nhau:
- Bố cục thích ứng;
- Thiết kế tối giản;
- Nhiều hiệu ứng thay đổi thả và trượt khác nhau.
Demo |Tải xuống
Thanh trượt hình ảnh jQuery kích thước đầy đủ
Một thanh trượt rất đơn giản chiếm 100% chiều rộng trang và thích ứng với kích thước màn hình thiêt bị di động. Nó hoạt động với các chuyển tiếp CSS và hình ảnh được "xếp chồng" cùng với các điểm neo. Mỏ neo có thể được thay thế hoặc loại bỏ nếu bạn không muốn đính kèm liên kết tới hình ảnh.
Khi cài đặt, thanh trượt sẽ mở rộng đến 100% chiều rộng màn hình. Nó cũng có thể tự động giảm kích thước của hình ảnh slide:
- Thanh trượt JQuery thích ứng;
- Kích thước đầy đủ;
- Thiết kế tối giản.
Demo |Tải xuống
Thanh trượt nội dung đàn hồi + hướng dẫn
Thanh trượt nội dung đàn hồi tự động điều chỉnh chiều rộng và chiều cao dựa trên kích thước phần tử cha. Đây là một thanh trượt jQuery đơn giản. Nó bao gồm một khu vực trượt ở trên cùng và một thanh tab điều hướng ở phía dưới. Thanh trượt điều chỉnh chiều rộng và chiều cao theo kích thước của vùng chứa chính.
Khi xem trên màn hình chéo nhỏ, các tab điều hướng sẽ biến thành các biểu tượng nhỏ:
- Thiết kế thích ứng;
- Di chuyển nhấp chuột.
Demo |Tải xuống
Thanh trượt ngăn xếp 3D miễn phí
Thanh trượt thử nghiệm cuộn qua hình ảnh ở chế độ 3D. Hai ngăn xếp giống như chồng giấy, khi cuộn, hình ảnh sẽ hiển thị ở giữa thanh trượt:
- Thiết kế thích ứng;
- Lật - chuyển tiếp;
- Hiệu ứng 3D.
Demo |Tải xuống
Thanh trượt khe toàn màn hình dựa trên hướng dẫn JQuery và CSS3 +
Hướng dẫn này sẽ chỉ cho bạn cách tạo một thanh trượt có một nút xoắn: ý tưởng là “cắt” và hiển thị trang chiếu hiện tại khi bạn mở hình ảnh tiếp theo hoặc hình ảnh trước đó. Sử dụng hoạt ảnh JQuery và CSS, chúng ta có thể tạo các hiệu ứng chuyển tiếp độc đáo:
- Thiết kế thích ứng;
- Tách chuyển tiếp;
- Thanh trượt toàn màn hình.
Demo |Tải xuống
Unislider - một thanh trượt jQuery rất nhỏ
Không có chuông và còi không cần thiết, kích thước nhỏ hơn 3KB. Sử dụng bất kỳ mã HTML nào cho các slide của bạn, mở rộng nó bằng sử dụng CSS. Mọi thứ liên quan đến Unslider đều được lưu trữ trên GitHub:
- Hỗ trợ cho nhiều trình duyệt khác nhau;
- Hỗ trợ bàn phím;
- điều chỉnh chiều cao;
- Thiết kế thích ứng;
- Hỗ trợ đầu vào cảm ứng.
Bản trình diễn | Tải xuống
Trang trình bày đáp ứng tối thiểu
Plugin đơn giản và nhỏ gọn ( kích thước chỉ 1 KB), tạo thanh trượt phản hồi bằng cách sử dụng các phần tử bên trong vùng chứa. ResponsiveSLides.js hoạt động với một lượng lớn các trình duyệt, bao gồm tất cả các phiên bản IE từ IE6 trở lên:
- Đáp ứng đầy đủ;
- Kích thước 1 KB;
- Chuyển tiếp CSS3 với khả năng chạy qua JavaScript;
- Đánh dấu đơn giản sử dụng danh sách có dấu đầu dòng;
- Khả năng tùy chỉnh các hiệu ứng chuyển tiếp và thời lượng xem của một slide;
- Hỗ trợ khả năng tạo nhiều slide show;
- Cuộn tự động và thủ công.
Demo |Tải xuống
Máy ảnh - thanh trượt jQuery miễn phí
Camera là một plugin có nhiều hiệu ứng chuyển tiếp và bố cục đáp ứng. Dễ dàng cài đặt, được hỗ trợ bởi các thiết bị di động:
- Thiết kế đáp ứng đầy đủ;
- Chữ ký;
- Khả năng thêm video;
- 33 màu sắc khác nhau biểu tượng
Demo |Tải xuống
SlidesJS, plugin jQuery đáp ứng
SlideJS là plugin thích ứng dành cho JQuery (1.7.1 trở lên) có hỗ trợ cho thiết bị cảm ứng và chuyển tiếp CSS3. Hãy thử nghiệm với nó, thử một vài ví dụ làm sẵnđể giúp bạn tìm ra cách thêm SlidesJS vào dự án của mình:
- Thiết kế thích ứng;
- Chuyển tiếp CSS3;
- Hỗ trợ các thiết bị cảm ứng;
- Dễ dàng thiết lập.
Bản trình diễn | Tải xuống
Thanh trượt Jquery BX
Đây là thanh trượt jQuery đáp ứng miễn phí:
- Hoàn toàn đáp ứng - thích ứng với mọi thiết bị;
- Thay đổi trượt ngang, dọc;
- Trang trình bày có thể chứa hình ảnh, video hoặc nội dung HTML;
- Hỗ trợ mở rộng cho các thiết bị cảm ứng;
- Sử dụng chuyển tiếp CSS cho hoạt ảnh slide ( tăng tốc phần cứng);
- API gọi lại và các phương thức hoàn toàn công khai;
- Kích thước tệp nhỏ;
- Dễ để thực hiện.
Demo |Tải xuống
FlexSlider 2
Thanh trượt đáp ứng tốt nhất. Một phiên bản mớiđã được sửa đổi để tăng tốc độ và độ nén.
Bản trình diễn | Tải xuống
Galleria - Thư viện ảnh phản hồi dựa trên JavaScript
Galleria được sử dụng trên hàng triệu trang web để tạo thư viện hình ảnh trong chất lượng cao. Số lượng đánh giá tích cực về công việc của cô ấy chỉ đơn giản là ngoài bảng xếp hạng:
- Hoàn toàn miễn phí;
- Chế độ xem toàn màn hình;
- Thích ứng 100%;
- Không cần kinh nghiệm lập trình;
- Hỗ trợ iPhone, iPad và các thiết bị cảm ứng khác;
- Flickr, Vimeo, YouTube và hơn thế nữa;
- Một số chủ đề.
Bản trình diễn | Tải xuống
Blueberry - thanh trượt hình ảnh jQuery đáp ứng đơn giản
Tôi giới thiệu với bạn một thanh trượt hình ảnh jQuery được viết riêng cho thiết kế web đáp ứng. Blueberry là một plugin thanh trượt hình ảnh nguồn mở thử nghiệm được viết riêng để hoạt động với các mẫu đáp ứng:
- Thiết kế tối thiểu;
- Bố cục thích ứng;
- Bài thuyết trình.
Bản trình diễn | Tải xuống
jQuery Popeye 2.1
Các phần tử tiêu chuẩn của phiên bản đầu tiên của chương trình được sử dụng: thanh trượt được ẩn trong bên trái và trôi về bên phải. Các thành phần điều hướng và chú thích tương tự xuất hiện khi di chuột qua:
- Thiết kế thích ứng;
- Hỗ trợ chữ ký;
- Chế độ trình chiếu.
Bản trình diễn | Tải xuống
FractionSlider - plugin thanh trượt jQuery miễn phí với hiệu ứng thị sai
Hãy thử plugin tuyệt vời này. Hoạt ảnh của một số thành phần khi hiển thị hình ảnh với cài đặt cho từng thành phần. FractionSlider là một plugin jQuery dành cho hình ảnh hoặc văn bản. Nó cho phép bạn tạo hiệu ứng động cho nhiều phần 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, chẳng hạn như thay đổi khung hình hoặc di chuyển theo một hướng nhất định:
- Thiết kế thích ứng;
- Hoạt hình của các yếu tố;
- Quản lý cài đặt hoạt ảnh;
- Hoạt hình nền.
Demo |Tải xuống
Thanh trượt hình ảnh đáp ứng miễn phí có hướng dẫn
Với FlexSlider, chúng ta có thể soạn mã thanh trượt bằng " theo trường phái ấn tượng» giao diện. Plugin cho phép bạn thêm chức năng và kiểu thông qua CSS3. Tôi hy vọng bạn thích nó và sử dụng nó trong các dự án của bạn. Hãy liệt kê các chức năng của nó:
- Thiết kế thích ứng;
- Hiệu ứng mờ dần;
- Mũi tên trái, phải;
- Nút màu xanh lá cây.
Demo |Tải xuống
Sequence là một plugin miễn phí có tính năng chuyển tiếp CSS3.
Nó đi kèm với bốn chủ đề và chỉ những chủ đề phức tạp nhất, chẳng hạn như thanh trượt kiểu Apple và thanh trượt thị sai ngang, là không phản hồi:
- Ba chủ đề miễn phí;
- Thị sai trượt ngang;
- phong cách táo;
- Chủ đề thích ứng;
- Hỗ trợ các thiết bị cảm ứng;
- Dễ dàng sửa đổi;
- Hỗ trợ cho các trình duyệt khác nhau.
- 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ốt xấu
Thời gian không đứng yên và cùng với nó là sự tiến bộ. Điều này cũng ảnh hưởng đến Internet. Bạn có thể thấy diện mạo của các trang web đang thay đổi như thế nào; thiết kế thích ứng đặc biệt phổ biến. Và về vấn đề này, khá nhiều cái mới đã xuất hiện thanh trượt jquery thích ứng, phòng trưng bày, băng chuyền hoặc các plugin tương tự.
1. Thanh trượt bài viết ngang đáp ứng
Băng chuyền ngang thích ứng với hướng dẫn chi tiết về cài đặt. Nó được làm theo phong cách đơn giản nhưng bạn có thể tạo kiểu cho phù hợp với mình.
2. Thanh trượt trên Glide.js
Thanh trượt này phù hợp với bất kỳ trang web nào. Nó sử dụng Glide.js với mã nguồn mở. Màu sắc của thanh trượt có thể dễ dàng thay đổi.
3. Trình chiếu nội dung nghiêng
Thanh trượt nội dung đáp ứng. Điểm nổi bật của thanh trượt này là hiệu ứng 3D của hình ảnh cũng như các hình ảnh động khác nhau xuất hiện ngẫu nhiên.
4. Thanh trượt sử dụng canvas HTML5
Một thanh trượt rất đẹp và ấn tượng với các hạt tương tác. Nó được tạo bằng canvas HTML5,
5. Thanh trượt biến đổi hình ảnh
Thanh trượt có hiệu ứng biến hình (Chuyển đổi mượt mà từ đối tượng này sang đối tượng khác). Trong ví dụ này, thanh trượt rất phù hợp với danh mục đầu tư của nhà phát triển web hoặc studio web ở dạng danh mục đầu tư.
6. Thanh trượt tròn
Thanh trượt có dạng hình tròn có tác dụng lật ảnh.
7. Thanh trượt có nền mờ
Thanh trượt thích ứng với tính năng chuyển đổi và làm mờ nền.
8. Thời trang thích ứng thanh trượt
Thanh trượt trang web đơn giản, nhẹ và đáp ứng.
9. Slicebox - Thanh trượt hình ảnh 3D jQuery(CẬP NHẬT)
Phiên bản cập nhật Thanh trượt Slicebox với các bản sửa lỗi và tính năng mới.
10. Lưới hình ảnh đáp ứng hoạt hình miễn phí
Plugin JQuery để tạo lưới linh hoạt hình ảnh sẽ chuyển ảnh bằng các hoạt ảnh và thời gian khác nhau. Điều này có thể trông đẹp như một nền tảng hoặc thành phần trang trí trên một trang web, vì chúng ta có thể xuất hiện một cách có chọn lọc các hình ảnh mới và quá trình chuyển đổi của chúng. Plugin có nhiều phiên bản.
11. Thanh trượt linh hoạt
Một plugin miễn phí phổ quát cho trang web của bạn. Plugin này có nhiều tùy chọn thanh trượt và băng chuyền.
12. Khung ảnh
bức ảnh là một plugin phổ quát. Nó có nhiều cài đặt, mọi thứ hoạt động nhanh chóng và dễ dàng và bạn có thể xem các slide ở chế độ toàn màn hình. Thanh trượt có thể được sử dụng ở cả kích thước cố định và thích ứng, có hoặc không có hình thu nhỏ, có hoặc không có cuộn tròn, v.v.
tái bútTôi đã cài đặt thanh trượt nhiều lần và tôi nghĩ rằng đó là một trong những thanh trượt tốt nhất
13. Thư viện thanh trượt 3D miễn phí và thích ứng với hình thu nhỏ.
Thanh trượt thư viện thử nghiệm Bố cục 3DPanel với lưới và hiệu ứng hoạt hình thú vị.
14. Thanh trượt trên css3
Thanh trượt đáp ứng được thực hiện bằng css3 với vẻ ngoài mịn màng nội dung và hoạt hình nhẹ nhàng.
15. Thanh trượt WOW
Thanh trượt WOW là một thanh trượt hình ảnh với hiệu ứng hình ảnh tuyệt vời.
17. Đàn hồi
Thanh trượt đàn hồi với khả năng phản hồi đầy đủ và hình thu nhỏ của trang trượt.
18. Khe hở
Đây là thanh trượt đáp ứng toàn màn hình sử dụng hoạt ảnh css3. Thanh trượt được thực hiện trong hai phiên bản. Hoạt hình được thực hiện khá khác thường và đẹp mắt.
19. Thư viện ảnh thích ứng cộng thêm
Đơn giản thanh trượt miễn phí-gallery với tải hình ảnh.
20. Thanh trượt đáp ứng cho WordPress
Thanh trượt miễn phí thích ứng cho WP.
21. Thanh trượt nội dung thị sai
Thanh trượt với hiệu ứng thị sai và kiểm soát từng phần tử bằng CSS3.
22. Thanh trượt có link nhạc
Thanh trượt sử dụng mã nguồn mở JPlayer. Thanh trượt này giống như một bản trình bày có âm nhạc.
23. Thanh trượt với jmpress.js
Thanh trượt đáp ứng dựa trên jmpress.js và do đó sẽ cho phép bạn thêm một số hiệu ứng 3D thú vị vào các trang trình bày của mình.
24. Trình chiếu di chuột nhanh
Trình chiếu với chuyển đổi nhanh slide. Chuyển đổi slide khi di chuột.
25. Hình ảnh phù hợp với CSS3
Hình ảnh accordion sử dụng css3.
26. Plugin thư viện được tối ưu hóa cho cảm ứng
Cái này thư viện đáp ứngđược tối ưu hóa cho các thiết bị cảm ứng.
27. Phòng trưng bày 3D
Tranh Dán Tường 3D- Tạo cho Trình duyệt Safari, nơi hiệu ứng 3D sẽ hiển thị. Nếu bạn xem nó trên một trình duyệt khác, chức năng sẽ ổn nhưng hiệu ứng 3D sẽ không hiển thị.
28. Thanh trượt có phân trang
Thanh trượt đáp ứng với phân trang bằng thanh trượt UI JQuery. Ý tưởng là sử dụng một khái niệm điều hướng đơn giản. Có thể tua lại tất cả hình ảnh hoặc chuyển đổi từng slide.
29. Montage hình ảnh với jQuery
Tự động sắp xếp hình ảnh theo chiều rộng màn hình. Một điều rất hữu ích khi phát triển một trang web portfolio.
30. Phòng trưng bày 3D
Thanh trượt tròn 3D đơn giản sử dụng css3 và jQuery.
31. Chế độ toàn màn hình với hiệu ứng 3D sử dụng css3 và jQuery
Một thanh trượt có khả năng xem hình ảnh toàn màn hình với chuyển tiếp đẹp mắt.
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, trong quá trình phát triển mẫu thích ứ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ó nguồn mở, miễn phí.
Do có nhiều công cụ được cung cấp nên tôi đã biên soạn Đánh giá ngắn những phát triển đáng chú ý nhất của thanh trượt hình ảnh jQuery đáp ứng xuất hiện nhiều nhất Gần đây và phân phối mà không có bất kỳ hạn chế nào, tức là hoàn toàn miễn phí.
Thanh trượt WOW
Thanh 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.
HiSlider
HiSlider - HTML5, thanh trượt Jquery và thư viện hình ảnh, plugin hoàn toàn miễn phí cho sử dụng cá nhân trên các trang web được quản lý bởi hệ thống phổ biến— WordPress, Joomla, Drupal. Với cách này đơn giản nhưng khá công cụ chức năng, bạn có thể dễ dàng tạo các trình chiếu tuyệt vời và sống động, các bản trình bày ngoạn mục và thông báo về các tin nhắn mới trên các trang của trang web của bạn. Một số mẫu và giao diện được tạo sẵn cho thanh trượt, hiệu ứng chuyển tiếp (thay đổi) nội dung tuyệt đẹp, đầu ra của nhiều nội dung đa phương tiện khác nhau: video từ YouTube và Vimeo, linh hoạt cài đặt tùy chỉnh vân vân...
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. Dùng cho công việc thư viện jQuery v1.7+, hiệu ứng đẹp chuyển tiếp, đơn giản và rất cài đặt linh hoạt, bố trí đáp ứ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 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 đó. 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 slide. Bố cục thanh trượt đáp ứng đảm bảo nó trông đẹp như nhau trên các màn hình nhiều loại khác nhau thiết bị người dùng.
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. Làm việc với phạm vi rộng các trình duyệt, bao gồm tất cả các phiên bản của IE - sự phát triển vượt bậc nổi tiếng, 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 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.
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 những 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. Hỗ trợ từ mọi người 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ó ví dụ rõ ràng và hướng dẫn chi tiết về việc tạo, cài đặt và sử dụng. Thiết kế thích ứng, các nút đẹp và mũi tên 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. Tất cả các 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
Cách đây một thời gian, tôi đã bắt đầu học jQuery. Tôi nghĩ mọi người đều biết rằng đây là tên của thư viện phổ biến nhất để phát triển và tạo tập lệnh trong JavaScript. Với sự trợ giúp của nó, bạn có thể dễ dàng tạo ra những bức ảnh ngoạn mục và yếu tố tương tácđịa điểm.
Trong bài viết này, tôi muốn cho bạn biết cách tạo một thanh trượt phổ 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 ý?
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.
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 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 parent.sli-link 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 để 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 += " "; }); $("
Đầu tiên, cài đặt được lưu trong các biến: hwSlideSpeed - tốc độ xoay các slide, hwTimeOut - thời gian sau đó nó xảy ra thay đổi tự động slide, hwNeedLinks - kiểm soát các 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ị và nếu sai thì chúng sẽ không được hiển thị (như trên trang chính của blog của tôi ).
Tiếp theo, chúng ta đặt các thuộc tính CSS cần thiết cho các slide bằng phương thức .css(). Chúng tôi xếp chồng các khối có các trang trình bày lên nhau bằng cách sử dụng định vị tuyệt đối, sau đó ẩn tất cả chúng.hide() và sau đó chỉ hiển thị khối đầu tiên. Biến slideNum là số slide đang hoạt động, tức là bộ đếm.
Logic chính của thanh trượt jQuery của chúng tôi là hàm animSlide. Phải mất một tham số. Nếu chúng ta truyền chuỗi “next” hoặc “prew” vào đó, nó sẽ hoạt động câu điều kiện và slide tiếp theo hoặc trước đó sẽ được hiển thị tương ứng. Nếu chúng ta gửi một số dưới dạng giá trị thì số này sẽ trở thành slide hoạt động và nó sẽ được hiển thị.
Vì vậy, hàm này ẩn div hiện tại, tính toán một div mới và hiển thị nó.
Lưu ý rằng phương thức .fadeIn() giúp hiển thị slide đang hoạt động và có đối số thứ hai. Đây được gọi là chức năng gọi lại. Nó được thực thi khi slide xuất hiện hoàn toàn. Trong trường hợp này, điều này được thực hiện để đảm bảo cuộn các trang chiếu một cách tự động. Hàm rotator được xác định bên dưới gọi lại hàm animSlide để chuyển sang trang chiếu tiếp theo trong khoảng thời gian mong muốn: chúng ta sẽ có một bao đóng đảm bảo cuộn liên tục.
Mọi thứ đều hoạt động tốt, nhưng chúng tôi cần dừng tự động hóa nếu người dùng di chuyển con trỏ đến thanh trượt hoặc nhấn các nút. Biến tạm dừng được tạo ra cho mục đích này. Nếu giá trị của nó là dương - true thì chuyển mạch tự động sẽ không được. 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:
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ố đó):
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.
