Chúng tôi đang viết một thanh trượt với khả năng điều hướng vô tận trong jquery. Thanh trượt hình ảnh jQuery kích thước đầy đủ. Máy ảnh - thanh trượt jQuery miễn phí

Nhưng vì chúng ta đang tìm hiểu những kiến thức cơ bản về JS nên để nghiên cứu cơ sở này, tôi sẽ mô tả cách tạo thanh trượt đơn giản chỉ với sự giúp đỡ Ngôn ngữ JavaScript. Nào, hãy bắt đầu phân tích tài liệu!

Có những loại thanh trượt nào và chúng có thể cần thiết ở đâu?

Việc tạo các thư viện thuận tiện để xem hình ảnh là bắt buộc trên tất cả các dịch vụ web có chứa ít nhất một số bức ảnh. Đây có thể là các cửa hàng trực tuyến, trang danh mục đầu tư, dịch vụ tin tức và giáo dục, trang web của các công ty và cơ sở giải trí có báo cáo hình ảnh, v.v.

Tuy nhiên, đây là cách sử dụng thanh trượt tiêu chuẩn. Công nghệ tương tự còn dùng để thu hút khách hàng đến khuyến mãi hàng hóa, dịch vụ hoặc để mô tả lợi thế của doanh nghiệp.

Hầu hết, khách hàng yêu cầu triển khai nó trên các phòng trưng bày kiểu “Carousel”. Cái này công cụ tiện dụngđể xem hình ảnh ở kích thước lớn với khả năng người dùng chuyển đổi các slide tiến và lùi. Trong trường hợp này, các hình ảnh thường tự động chuyển đổi sau một thời gian nhất định. Cơ chế này được đặt biệt danh do việc hiển thị hình ảnh được lặp lại theo hình tròn.

Ngày nay, nếu muốn, bạn có thể tìm thấy các plugin khác thường và hấp dẫn nhất trên Internet để xem một bộ ảnh.

Hoạt động độc lập

Chà, bây giờ hãy bắt đầu tạo thanh trượt của riêng chúng ta. TRÊN ở giai đoạn này học cách triển khai nó, tôi khuyên bạn nên sử dụng pure . Nó sẽ là công tắc tự động hình ảnh trong một vòng tròn.

Dưới đây tôi đã đính kèm Mã chương trìnhứng dụng của bạn. Tôi đã để lại nhận xét cho bạn khi tôi viết mã.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

Trình chuyển đổi hình ảnh tự động /*Mô tả giao diện của khung, cơ sở cho thanh trượt trong tương lai */ #slides( vị trí: tương đối; chiều cao: 415px; chiều rộng: 100%; phần đệm: 0px; list-style-type: none; box- bóng: 0 0 7px #010, 0 0 10px xanh, 0 0 15px #010, 0 0 35px #010; ) /* Chỉnh sửa hiển thị hình ảnh*/ img ( width: auto; Height: 390px; đệm: 13px; ) /* Cho biết các mục trong danh sách nội dung sẽ được hiển thị ở giữa phần tử cha, tức là V. trong trường hợp nàyở giữa phần tử ul - cơ sở cho các slide */ li ( text-align: center; ) /* Tôi mô tả hình thức của các slide */ .slide( location: tuyệt đối; opacity: 0; top: 0px ; trái: 0px; chiều cao: 100 %; chỉ mục z: 3; chiều rộng: 100%; nền: màu xanh; -moz-transition: độ mờ 1,5 giây; chuyển tiếp: độ mờ 1,5 giây; -webkit-transition: độ mờ 1,5 giây; ) /*Khi được hiển thị, đối tượng sẽ hiển thị và di chuyển về phía trước*/ .showing( opacity: 1; z-index: 4; )

var MySlider = document.querySelectorAll("#slides .slide"); var currentPicture = 0; var IntervalForChange = setInterval(nextSlide,2700); function nextSlide())( MySlider.className = "slide"; currentPicture = (currentPicture+1)%MySlider.length; MySlider.className = "trình chiếu slide"; )

Tôi hy vọng bạn không gặp vấn đề gì với mã css và html. Nhưng tôi thấy cần phải tháo rời công việc của kịch bản. Vì vậy, hãy chuyển sang giải mã những gì đã được viết.

Vì vậy, trước tiên, bằng cách sử dụng phương thức querySelectorAll, tôi gán cho biến MySlider một danh sách tất cả các phần tử trong phạm vi đã chỉ định. Cho biết mục này

document.querySelectorAll("#slides .slide")

Do đó, MySlider lưu trữ một bộ sưu tập gồm bốn phần tử.

Tiếp theo, tôi chỉ định hình ảnh nào sẽ bắt đầu hiển thị bằng cách đặt biến currentPicture về 0. Sau đó, tôi chỉ ra rằng sự thay đổi trang chiếu xảy ra sau 2,7 giây và chức năng xử lý trang chiếu tiếp theo phải được gọi.

Hãy chuyển sang chức năng của chính nó.

Ban đầu, đối với thành phần danh sách hiện tại, tôi thay đổi mô tả của các lớp, tức là Tôi viết lại “trình chiếu” thành “slide”. Kết quả là hình ảnh trở nên vô hình.

Bây giờ tôi xác định một phần tử bộ sưu tập mới sẽ được hiển thị trên màn hình. Để làm điều này tôi lấy vị trí hiện tại +1. Bạn có thể nhận thấy rằng tôi cũng sử dụng phép chia có phần dư (%) cho số trang trình bày có sẵn. Thủ thuật bằng tai này là cần thiết để bắt đầu chương trình trong một vòng tròn mới. Đây thực sự là những gì nó sẽ trông như thế nào.

Hãy để tôi bắt đầu bằng cách nói rằng bài viết này được viết để nói về cách tạo thanh trượt cuộn hình ảnh cho các trang web. Bài viết này không hề mang tính chất giáo dục mà nó chỉ đóng vai trò như một ví dụ về cách thực hiện đối tượng đang xem xét của chúng tôi. Bạn có thể sử dụng mã được cung cấp trong bài viết này như một loại mẫu cho các phát triển tương tự; Tôi hy vọng rằng tôi có thể truyền đạt cho người đọc bản chất của những gì tôi đã viết một cách đầy đủ chi tiết và theo cách dễ tiếp cận.

Và bây giờ, cách đây không lâu, tôi cần cài đặt một thanh trượt trên một trang web, nhưng sau khi tìm kiếm trên Internet các tập lệnh tạo sẵn, tôi không tìm thấy điều gì hữu ích, bởi vì một số không hoạt động như tôi cần, trong khi một số khác không khởi động được mà không có lỗi trong bảng điều khiển. Đối với tôi, việc sử dụng các plugin jQuery cho thanh trượt dường như quá nhàm chán, bởi vì... Mặc dù điều này sẽ giải quyết được vấn đề nhưng tôi sẽ không hiểu cơ chế này hoạt động như thế nào và việc sử dụng một plugin cho chỉ một thanh trượt là không tối ưu cho lắm. Tôi cũng không thực sự muốn hiểu 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 ta sẽ là khung nhìn, nghĩa là một khối trong đó chúng ta sẽ thấy các hình ảnh của chúng ta quay như thế nào, trong đó chúng ta sẽ có một trình bao bọc slide, đây sẽ là khối của chúng ta chứa tất cả các hình ảnh được xếp thành một dòng và sẽ thay đổi vị trí của nó bên trong khung nhìn.

Tiếp theo, ở các cạnh bên trong khung nhìn, theo chiều dọc ở giữa sẽ có các nút quay lại và tiến lên, khi bấm vào chúng ta cũng sẽ thay đổi vị trí của slidewrapper so với khung nhìn, từ đó gây ra hiệu ứng cuộn qua ảnh. Và cuối cùng, đối tượng cuối cùng sẽ là các nút điều hướng của chúng ta, nằm ở cuối khung nhìn.

Khi nhấp vào chúng, chúng ta sẽ chỉ nhìn vào số sê-ri của nút này và di chuyển nó đến trang trình bày mà chúng ta cần, một lần nữa bằng cách dịch chuyển trình bao bọc slide (sự thay đổi sẽ được thực hiện bằng cách thay đổi thuộc tính css biến đổi, giá trị của nó sẽ là tính liên tục).

Tôi nghĩ logic về cách thức hoạt động của toàn bộ điều này sẽ rõ ràng sau những gì tôi đã nêu ở trên, nhưng nếu vẫn nảy sinh 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, hãy mở tệp chỉ mục của chúng tôi và viết đánh dấu mà chúng tôi cần ở đó:

Như bạn có thể thấy, không có gì phức tạp, block-for-slider chỉ đóng vai trò là khối trong đó thanh trượt của chúng ta sẽ được đặt, bên trong nó là khung nhìn, nơi đặt trình bao bọc slide của chúng ta, cũng là một danh sách lồng nhau, đây là các slide và img là những hình ảnh bên trong chúng. Hãy chú ý đến thực tế là tất cả các hình ảnh phải có cùng kích thước hoặc ít nhất là tỷ lệ, nếu không thanh trượt sẽ trông bị cong, bởi vì kích thước của nó phụ thuộc trực tiếp vào tỷ lệ của hình ảnh.

Bây giờ chúng ta cần cách điệu hóa toàn bộ điều này; thông thường phong cách không được chú ý đặc biệt, nhưng tôi quyết định vẫn thu hút sự chú ý đến điều này để không có sự hiểu lầm trong tương lai.

nội dung ( lề: 0; đệm: 0; ) #block-for-slider ( width: 800px; lề: 0 tự động; lề trên: 100px; ) #viewport ( chiều rộng: 100%; hiển thị: bảng; vị trí: tương đối; tràn: ẩn; -webkit-user-select: không có; -moz-user-select: không có; -ms-user-select: không có; -o-user-select: không có; người dùng chọn: không có; ) #slidewrapper ( vị trí: tương đối; chiều rộng: calc (100% * 4); trên cùng: 0; trái: 0; lề: 0; phần đệm: 0; -webkit-transition: 1s; -o-transition: 1s; transition: 1s; -webkit -transition-timing-function: easy-in-out; -o-transition-timing-function: easy-in-out; transition-timing-function: easy-in-out; ) #slidewrapper ul, #slidewrapper li ( lề : 0; phần đệm: 0; ) #slidewrapper li ( width: calc(100%/4); list-style: none; display: inline; float: left; ) .slide-img ( width: 100%; )

Hãy bắt đầu với block-for-slider , một lần nữa, đây là khối của chúng tôi trên trang mà chúng tôi sẽ phân bổ cho thanh trượt, chiều cao của nó sẽ phụ thuộc vào chiều rộng và tỷ lệ của hình ảnh của chúng tôi, bởi vì khung nhìn chiếm toàn bộ chiều rộng của block-for-slider, khi đó bản thân slide có cùng chiều rộng và theo đó, hình ảnh bên trong nó thay đổi chiều cao tùy thuộc vào chiều rộng (tỷ lệ được giữ nguyên). Tôi đặt phần tử này trên trang của mình theo chiều ngang ở giữa, với 100px thụt vào từ trên cùng, làm cho vị trí của nó thuận tiện hơn cho ví dụ.

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

Thuộc tính CSS tiếp theo là user-select:none, cho phép bạn loại bỏ phần đánh dấu màu xanh lam của từng phần tử thanh trượt khi bạn nhấp vào nút nhiều lần.

Chuyển sang trình bao bọc slide, tại sao vị trí: tương đối mà không phải tuyệt đối? Mọi thứ đều rất đơn giản, bởi vì... nếu chúng ta chọn tùy chọn thứ hai, thì với thuộc tính tràn khung nhìn:ẩn, hoàn toàn không có gì xuất hiện với chúng ta, bởi vì bản thân khung nhìn sẽ không điều chỉnh theo chiều cao của trình bao bọc thanh trượt, đó là lý do tại sao nó sẽ có chiều cao: 0. Tại sao chiều rộng lại quan trọng và tại sao chúng ta lại đặt nó? Vấn đề là các slide của chúng ta sẽ có chiều rộng bằng 100% của khung nhìn và để sắp xếp chúng thẳng hàng, chúng ta cần một vị trí để chúng đứng, vì vậy chiều rộng của slidewrapper phải bằng 100% chiều rộng của khung nhìn nhân với số trang trình bày (trong trường hợp của tôi là 4). Đối với transition và transition-timing-function , ở đây 1s có nghĩa là sự thay đổi vị trí của slidewrapper sẽ xảy ra trong vòng 1 giây và chúng ta sẽ quan sát nó, và easy-in-out là một loại hoạt ảnh trong đó lần đầu tiên nó diễn ra chậm và tăng tốc đến giữa rồi lại giảm tốc độ, tại đây bạn có thể đặt các giá trị theo ý mình.

Khối thuộc tính tiếp theo đặt trình bao bọc slide và các phần tử con của nó không có phần đệm, không cần nhận xét ở đây.

Tiếp theo, chúng ta tạo kiểu cho các trang chiếu của mình, chiều rộng của chúng phải bằng chiều rộng của khung nhìn, nhưng vì... chúng nằm trong một slidewrapper có chiều rộng bằng chiều rộng khung nhìn nhân với số trang chiếu, sau đó để lấy lại chiều rộng khung nhìn, chúng ta cần chia 100% chiều rộng của slidewrapper cho số trang chiếu (trong trường hợp của tôi, một lần nữa, bằng 4). Sau đó chúng tôi biến chúng thành phần tử nội tuyến sử dụng display:inline và đặt float sang trái bằng cách thêm thuộc tính float:left. Về list-style:none Tôi có thể nói rằng tôi sử dụng nó để xóa điểm đánh dấu mặc định khỏi li , trong hầu hết các trường hợp, đó là một loại tiêu chuẩn.

Với slide-img mọi thứ đều đơn giản, hình ảnh sẽ chiếm toàn bộ chiều rộng của slide, slide sẽ điều chỉnh theo chiều cao của nó, slidewrapper sẽ điều chỉnh theo chiều cao của slide và chiều cao của khung nhìn sẽ lần lượt lấy giá trị của chiều cao của slidewrapper , vì vậy chiều cao của thanh trượt của chúng ta sẽ phụ thuộc vào tỷ lệ của hình ảnh và kích thước của khối , được cung cấp cho thanh trượt mà tôi đã viết ở trên.

Tôi nghĩ tại thời điểm này chúng ta đã tìm ra các kiểu, bây giờ hãy tạo một trình chiếu đơn giản không có nút và sau khi đảm bảo rằng nó hoạt động bình thường, chúng ta sẽ thêm và tạo kiểu cho chúng.

Hãy mở tệp js của chúng tôi, tệp này sẽ chứa mã thanh trượt, đừng quên kết nối jQuery, bởi vì Chúng tôi sẽ viết bằng cách sử dụng khuôn khổ này. Nhân tiện, tại thời điểm viết bài này, tôi đang sử dụng jQuery phiên bản 3.1.0. Tệp có tập lệnh phải được đưa vào cuối cùng thẻ cơ thể, bởi vì chúng ta sẽ làm việc với các phần tử DOM cần được khởi tạo trước.

Hiện tại, chúng ta cần khai báo một vài biến, một biến sẽ lưu trữ số lượng trang trình bày mà chúng ta nhìn thấy tại một thời điểm nhất định trong khung nhìn, tôi gọi nó là slideNow và biến thứ hai sẽ lưu trữ số lượng các trang trình bày tương tự này, đây là slideCount.

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

Biến slideNow phải được đặt giá trị ban đầu 1, bởi vì Khi tải trang, dựa trên đánh dấu của chúng tôi, chúng tôi sẽ thấy trang trình bày đầu tiên trong chế độ xem.

Trong slideCount chúng ta sẽ đặt số lượng phần tử con slidewrapper, mọi thứ ở đây đều hợp lý.
Tiếp theo các bạn tạo một hàm có nhiệm vụ chuyển slide từ phải sang trái, khai báo nhé:

hàm nextSlide() ( )

Chúng ta sẽ gọi nó trong khối chính của mã mà chúng ta sẽ đề cập sau, nhưng bây giờ chúng ta sẽ cho hàm của mình biết nó cần làm gì:

function nextSlide() ( if (slideNow == slideCount || slideNow slideCount) ( $("#slidewrapper").css("transform", "translate(0, 0)"); slideNow = 1; ) else ( TranslateWidth = -$("#viewport").width() * (slideNow); $("#slidewrapper").css(( "transform": "translate(" + TranslateWidth + "px, 0)", "-webkit- Transform": "translate(" + TranslateWidth + "px, 0)", "-ms-transform": "translate(" + TranslateWidth + "px, 0)", )); slideNow++; ) )

Đầu tiên, chúng tôi kiểm tra xem hiện tại chúng tôi có đang ở trang trình bày cuối cùng của nguồn cấp dữ liệu không? Để làm điều này, chúng tôi lấy số lượng tất cả các trang trình bày của mình bằng cách sử dụng $("#slidewrapper").children().length và kiểm tra nó với số lượng trang trình bày của chúng tôi, nếu chúng bằng nhau thì điều này có nghĩa là chúng tôi cần bắt đầu hiển thị lại nguồn cấp dữ liệu, từ 1 slide , có nghĩa là chúng tôi thay đổi thuộc tính biến đổi CSS của trình bao bọc slide thành Translate(0, 0) , do đó chuyển nó thành vị trí ban đầuđể trang trình bày đầu tiên nằm 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 sách tham khảo về thuộc tính css). Sau đó, đừng quên cập nhật giá trị của biến slideNow, cho nó biết rằng slide số 1 đang ở chế độ xem: slideNow = 1;

Điều kiện tương tự bao gồm việc kiểm tra xem số lượng trang trình bày mà chúng tôi nhìn thấy có nằm trong số lượng trang trình bày của chúng tôi hay không, nhưng nếu bằng cách nào đó điều này không được đáp ứng thì chúng tôi sẽ quay lại trang trình bày đầu tiên một lần nữa.

Nếu điều kiện đầu tiên không được đáp ứng thì điều này cho thấy rằng chúng ta đang khoảnh khắc này Chúng ta không ở trên slide cuối cùng cũng như không ở trên slide nào đó không tồn tại, có nghĩa là chúng ta cần chuyển sang slide tiếp theo, chúng ta sẽ thực hiện việc này bằng cách dịch chuyển slidewrapper sang trái một giá trị bằng chiều rộng khung nhìn, sự thay đổi sẽ lại xảy ra xảy ra thông qua thuộc tính dịch quen thuộc, giá trị của nó sẽ bằng "translate(" + TranslateWidth + "px, 0)" , trong đó dịchWidth là khoảng cách mà slidewrapper của chúng ta được dịch chuyển. Nhân tiện, hãy khai báo biến này ở đầu mã của chúng ta:

var dịchWidth = 0;

Sau khi chuyển sang slide tiếp theo, hãy thông báo cho slide của chúng ta rằng chúng ta sẽ thấy slide tiếp theo: slideNow++;

Tại thời điểm này, một số độc giả có thể thắc mắc: tại sao chúng ta không thay thế $("#viewport").width() bằng một số biến như slideWidth để luôn có sẵn chiều rộng của trang trình bày? Câu trả lời rất đơn giản, nếu trang web của chúng ta có tính thích ứng thì theo đó, khối được phân bổ cho thanh trượt cũng có tính thích ứng, dựa vào đó chúng ta có thể hiểu rằng khi thay đổi kích thước chiều rộng cửa sổ mà không cần tải lại trang (ví dụ: bật điện thoại lên). cạnh của nó), chiều rộng của khung nhìn sẽ thay đổi và theo đó, chiều rộng của một trang chiếu sẽ thay đổi. Trong trường hợp này, trình bao bọc slide của chúng tôi sẽ được chuyển sang giá trị chiều rộng ban đầu, có nghĩa là hình ảnh sẽ được hiển thị theo từng phần hoặc hoàn toàn không hiển thị trong khung nhìn. Bằng cách viết $("#viewport").width() thay vì slideWidth vào hàm của chúng ta, chúng ta buộc nó phải tính chiều rộng của khung nhìn mỗi khi chúng ta chuyển đổi các slide, từ đó đảm bảo rằng khi chiều rộng màn hình thay đổi mạnh, nó sẽ cuộn đến slide chúng tôi cần.

Tuy nhiên, chúng ta đã viết một hàm, bây giờ chúng ta cần gọi nó sau một khoảng thời gian nhất định, chúng ta cũng có thể lưu khoảng đó vào một biến để nếu muốn thay đổi, chúng ta chỉ có thể thay đổi một giá trị trong mã:

var slideInterval = 2000;

Thời gian tính bằng js được biểu thị bằng mili giây.

Bây giờ chúng ta hãy viết cấu trúc sau:

$(document).ready(function () ( setInterval(nextSlide, slideInterval); ));

Mọi thứ ở đây không thể đơn giản hơn; thông qua cấu trúc $(document).ready(function ()()) chúng ta nói rằng các hành động sau phải được thực hiện sau khi tài liệu đã được tải đầy đủ. Tiếp theo, chúng ta chỉ cần gọi hàm nextSlide với một khoảng bằng slideInterval bằng cách sử dụng hàm setInterval tích hợp sẵn.

Sau tất cả các 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 trong kết nối không chính xác bất kỳ tập tin. Cũng không cần loại trừ rằng bạn có thể đã mắc lỗi ở đâu đó trong mã, vì vậy tôi chỉ có thể khuyên bạn nên kiểm tra kỹ mọi thứ.

Trong lúc chờ đợi, hãy tiếp tục, thêm vào thanh trượt của chúng ta một chức năng như dừng cuộn khi di con trỏ. Để thực hiện việc này, chúng ta cần viết nội dung sau vào khối mã chính (bên trong $(document).ready( Cấu trúc hàm ()()):

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

Để bắt đầu phân tích mã này, chúng ta cần biết switchInterval là gì. Đầu tiên, đây là một biến lưu trữ lệnh gọi định kỳ đến hàm nextSlide, nói một cách đơn giản, chúng ta có dòng mã này: setInterval(nextSlide, slideInterval); , biến thành thế này: switchInterval = setInterval(nextSlide, slideInterval); . Sau những thao tác này, khối mã chính của chúng tôi đã lượt xem tiếp theo:

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

Ở đây tôi sử dụng sự kiện di chuột, có nghĩa là “khi di chuột”, sự kiện này cho phép tôi theo dõi thời điểm tôi di con trỏ qua một đối tượng, trong trường hợp này là khung nhìn.

Sau khi di chuột, tôi xóa khoảng mà tôi chỉ ra trong ngoặc đơn (đây là switchInterval của chúng tôi), sau đó, cách nhau bằng dấu phẩy, tôi viết những gì tôi sẽ làm khi di chuyển con trỏ trở lại, trong khối này tôi lại gán switchInterval của chúng ta cho một định kỳ gọi hàm nextSlide.

Bây giờ, nếu kiểm tra, chúng ta có thể xem thanh trượt của chúng ta phản ứng như thế nào khi di chuột, dừng chuyển đổi trang trình bày.

Bây giờ là lúc thêm các nút vào thanh trượt của chúng ta, hãy bắt đầu với các nút tiến và lùi.

Trước hết, hãy đánh dấu chúng:

Lúc đầu đánh dấu này có thể chưa rõ, mình sẽ nói ngay là mình gói 2 nút này vào 1 div với lớp prev-next-btns chỉ để các bạn tiện theo dõi, các bạn không cần phải làm thế này, kết quả sẽ không thay đổi, bây giờ chúng ta sẽ thêm kiểu cho chúng và mọi thứ sẽ trở nên rõ ràng:

#prev-btn, #next-btn ( vị trí: tuyệt đối; chiều rộng: 50px; chiều cao: 50px; màu nền: #fff; bán kính đường viền: 50%; trên cùng: calc(50% - 25px); ) #prev- btn:hover, #next-btn:hover ( con trỏ: con trỏ; ) #prev-btn ( trái: 20px; ) #next-btn ( phải: 20px; )

Đầu tiên, chúng ta định vị các nút bằng cách sử dụng location:absolute , từ đó tự do kiểm soát vị trí của chúng bên trong khung nhìn của chúng ta, sau đó chúng ta sẽ chỉ ra kích thước của các nút này và sử dụng bán kính đường viền Hãy bo tròn các góc để các nút này biến thành hình tròn. Màu của chúng sẽ là màu trắng, nghĩa là #fff và phần bù của chúng từ cạnh trên của khung nhìn sẽ bằng một nửa chiều cao của khung nhìn này trừ đi một nửa chiều cao của chính nút đó (trong trường hợp của tôi là 25px), vì vậy chúng ta có thể đặt chúng theo chiều dọc ở trung tâm. Tiếp theo, chúng tôi sẽ chỉ định rằng khi chúng tôi di chuột qua chúng, con trỏ của chúng tôi sẽ thay đổi thành con trỏ và cuối cùng chúng tôi sẽ thông báo cho từng nút của mình rằng chúng phải cách các cạnh của chúng 20px để chúng tôi có thể nhìn thấy chúng theo cách phù hợp với chúng tôi .

Một lần nữa, bạn có thể tạo kiểu cho các thành phần trang theo cách bạn muốn, tôi chỉ đưa ra ví dụ về các kiểu mà tôi quyết định sử dụng.

Sau khi tạo kiểu, thanh trượt của chúng ta sẽ trông giống như thế này:

Tiếp theo, quay lại tệp js của chúng tôi, nơi chúng tôi sẽ mô tả hoạt động của các nút. Chà, hãy thêm một chức năng nữa, nó sẽ hiển thị cho chúng ta slide trước:

hàm prevSlide() ( if (slideNow == 1 || slideNow slideCount) ( TranslateWidth = -$("#viewport").width() * (slideCount - 1); $("#slidewrapper").css(( " Transform": "translate(" + TranslateWidth + "px, 0)", "-webkit-transform": "translate(" + TranslateWidth + "px, 0)", "-ms-transform": "translate(" + TranslateWidth + "px, 0)", )); slideNow = slideCount; ) else ( TranslateWidth = -$("#viewport").width() * (slideNow - 2); $("#slidewrapper").css( ("transform": "translate(" + TranslateWidth + "px, 0)", "-webkit-transform": "translate(" + TranslateWidth + "px, 0)", "-ms-transform": "translate( " + TranslateWidth + "px, 0)", )); slideNow--; ) )

Nó được gọi là prevSlide và sẽ chỉ được gọi khi nhấp vào prev-btn. Trước tiên, chúng tôi kiểm tra xem chúng tôi có ở trang trình bày đầu tiên hay không, ở đây chúng tôi cũng kiểm tra xem slideNow của chúng tôi có vượt quá phạm vi thực tế của các trang trình bày hay không và nếu bất kỳ điều kiện nào là đúng, chúng tôi sẽ chuyển đến trang trình bày cuối cùng, di chuyển trình bao bọc slide đến giá trị chúng ta cần. Chúng tôi sẽ tính giá trị này bằng công thức: (chiều rộng của một trang trình bày) * (số trang trình bày - 1), chúng tôi lấy tất cả những điều này bằng dấu trừ, bởi vì chúng ta di chuyển nó sang bên trái, hóa ra khung nhìn bây giờ sẽ hiển thị cho chúng ta trang chiếu cuối cùng. Ở cuối khối này, chúng ta cũng cần thông báo cho biến slideNow rằng trang chiếu cuối cùng hiện đang ở trong chế độ xem của chúng ta.

Nếu chúng ta không ở slide đầu tiên thì chúng ta cần quay lại 1, để làm điều này, chúng ta lại thay đổi thuộc tính biến đổi của slidewrapper . Công thức là: (chiều rộng của một trang trình bày) * (số trang trình bày hiện tại - 2), một lần nữa, chúng ta lấy tất cả những điều này bằng dấu trừ. Nhưng tại sao -2 mà không phải -1, chúng ta chỉ cần lùi lại 1 slide thôi? Thực tế là nếu chúng ta ở trên slide thứ 2, thì biến x của thuộc tính Transform:translate(x,0) của slidewrapper của chúng ta đã bằng chiều rộng của một slide, nếu chúng ta nói với nó rằng chúng ta cần để trừ 1 từ số lượng của trang chiếu hiện tại, thì chúng ta sẽ lại nhận được một, theo đó trình bao bọc slide đã được dịch chuyển, vì vậy chúng ta sẽ cần phải dịch chuyển các độ rộng khung nhìn tương tự này bằng 0, nghĩa là trên slideNow - 2.

Bây giờ chúng ta chỉ cần thêm những dòng này vào khối mã chính:

$("#next-btn").click(function() ( nextSlide(); )); $("#prev-btn").click(function() ( prevSlide(); ));

Ở đây, chúng tôi chỉ theo dõi xem các nút của chúng tôi có được nhấp hay không và trong trường hợp này, chúng tôi gọi các chức năng chúng tôi cần, mọi thứ đều đơn giản và hợp lý.

Bây giờ, hãy thêm các nút điều hướng trang trình bày và quay lại phần đánh dấu:

Như bạn có thể thấy, một danh sách lồng nhau đã xuất hiện bên trong khung nhìn, hãy đặt cho nó mã định danh nav-btns , bên trong nó là các nút điều hướng, chúng ta sẽ gán cho chúng lớp slide-nav-btn , tuy nhiên, chúng ta có thể kết thúc bằng đánh dấu, hãy chuyển sang các kiểu:

#nav-btns ( vị trí: tuyệt đối; chiều rộng: 100%; đáy: 20px; phần đệm: 0; lề: 0; căn chỉnh văn bản: giữa; ) .slide-nav-btn ( vị trí: tương đối; hiển thị: khối nội tuyến; kiểu danh sách: không; chiều rộng: 20px; chiều cao: 20px; màu nền: #fff; bán kính đường viền: 50%; lề: 3px; ) .slide-nav-btn:hover ( con trỏ: con trỏ; )

Chúng tôi cung cấp khối nav-btns, trong đó các nút của chúng tôi được đặt, thuộc tính location:absolute để nó không kéo dài khung nhìn theo chiều cao, bởi vì slidewrapper có thuộc tính location:relative, chúng ta đặt chiều rộng thành 100% để căn giữa các nút theo chiều ngang so với khung nhìn bằng cách sử dụng text-align:center , sau đó sử dụng thuộc tính Bottom, chúng ta cho khối của mình biết rằng nó phải ở một khoảng cách 20px tính từ cạnh dưới.

Với các nút, chúng tôi thực hiện tương tự như với các trang trình bày, nhưng bây giờ chúng tôi cung cấp cho chúng display:inline-block , bởi vì với display:inline chúng không đáp ứng với chiều rộng và chiều cao vì đang ở trong một khối định vị tuyệt đối. Hãy làm cho chúng có màu trắng và sử dụng bán kính đường viền quen thuộc, tạo cho chúng hình dạng hình tròn. Khi chúng ta di chuột qua chúng, chúng ta sẽ thay đổi giao diện của con trỏ để hiển thị thông thường.

Bây giờ chúng ta hãy chuyển sang phần jQuery:
Đầu tiên, hãy khai báo một biến navBtnId, biến này sẽ lưu trữ chỉ mục của nút mà chúng ta đã nhấp vào:

var navBtnId = 0;
$(".slide-nav-btn").click(function() ( navBtnId = $(this).index(); if (navBtnId + 1 != slideNow) ( TranslateWidth = -$("#viewport"). width() * (navBtnId); $("#slidewrapper").css(( "transform": "translate(" + TranslateWidth + "px, 0)", "-webkit-transform": "translate(" + TranslateWidth + "px, 0)", "-ms-transform": "translate(" + TranslateWidth + "px, 0)", )); slideNow = navBtnId + 1; ) );

Ở đây, khi chúng ta nhấp vào slide-nav-btn, chúng ta gọi một hàm mà trước hết gán cho biến navBtnId là chỉ mục của nút được nhấp, tức là số sê-ri của nó, vì quá trình đếm ngược bắt đầu từ 0, thì nếu chúng ta nhấp vào nút thứ hai, sau đó nó được ghi vào giá trị navBtnId 1. Tiếp theo, chúng tôi kiểm tra xem chúng tôi thêm một vào số sê-ri của nút để lấy một số như thể đếm ngược bắt đầu không phải từ 0 mà từ 1, chúng tôi so sánh con số này với số của slide hiện tại, nếu chúng khớp nhau thì chúng ta sẽ không thực hiện bất kỳ hành động hành động nào vì slide mong muốn đã có trong khung nhìn.

Nếu slide chúng ta cần không nằm trong trường xem của khung nhìn thì chúng ta sẽ tính khoảng cách cần di chuyển slidewrapper sang trái, sau đó thay đổi giá trị của thuộc tính biến đổi CSS để dịch (cùng khoảng cách tính bằng pixel, 0 ). Chúng tôi đã làm điều này nhiều lần, vì vậy sẽ không có câu hỏi nào. Cuối cùng, chúng ta lại lưu giá trị của slide hiện tại vào biến slideNow; giá trị này có thể được tính bằng cách thêm một giá trị vào chỉ mục của nút được nhấp.

Trên thực tế, đó là tất cả, nếu có điều gì đó không rõ ràng, thì tôi sẽ để lại một liên kết đến jsfiddle, nơi tất cả mã được viết trong tài liệu sẽ được cung cấp.

Cám ơn vì sự quan tâm của bạn!

Thẻ: Thêm thẻ

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 ý?

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.

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

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

Đây là nội dung slide 1 Đây là nội dung slide 2 Đây là nội dung slide 3

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

#slider-wrap( /* Wrapper cho thanh trượt và các nút */ width:660px; ) #slider( /* Wrapper cho thanh trượt */ width:640px; Height:360px; tràn: ẩn; viền:#eee Solid 10px; vị trí:tương đối; ) .slide( /* Slide */ width:100%; chiều cao:100%; ) .sli-links( /* Các nút để thay đổi trang trình bày */ lề-top:10px; text-align:center;) .sli-links . control-slide(margin:2px; display:inline-block; width:16px; chiều cao:16px; tràn:ẩn; text-indent:-9999px; nền:url(radioBg.png) trung tâm phía dưới không- lặp lại;) .sli -links .control-slide:hover( con trỏ:con trỏ; vị trí nền:trung tâm trung tâm;) .sli-links .control-slide.active( vị trí nền: đỉnh trung tâm;) #prewbutton, #nextbutton ( /* Liên kết " Tiếp theo" và "Trước" */ display:block; width:15px; chiều cao:100%; vị trí:tuyệt đối; top:0; tràn:ẩn; thụt lề văn bản:-999px; nền:url(arrowBg .png) trung tâm bên trái không lặp lại; độ mờ: 0,8; z-index:3; phác thảo: không ! quan trọng;) #prewbutton(left:10px;) #nextbutton( right:10px; nền:url(arrowBg.png) phải trung tâm không lặp lại; ) #prewbutton:hover, #nextbutton:hover( opacity:1;)

Chúng ta hãy xem xét nó chi tiết hơn. Đầu tiên chúng ta cung cấp cho khối chính, ID "slider-wrap", chiều rộng mong muốn. Vì tất cả các khối khác được chèn vào nó nên không cần chỉ định chiều cao; nó sẽ phụ thuộc vào những gì bên trong. Sau đó, chúng ta cần đặt kích thước của vùng chứa nơi đặt các slide. Đây là #thanh trượt. Hãy cung cấp cho nó chiều rộng và chiều cao, chẳng hạn như đường viền 10 pixel. Ở đây chiều rộng là 640px, nhỏ hơn chiều rộng của phần gốc vì chúng ta đang thêm các đường viền 10px ở bên phải và bên trái. Bản thân chiều rộng của các slide (.slide) cũng phụ thuộc vào chiều rộng của div này.

Và điều cuối cùng: chúng ta cần đặt vị trí: tương đối cho vùng chứa slide vì các slide bên trong có vị trí tuyệt đối. Đối với các slide, chỉ có chiều rộng và chiều cao được đặt trong CSS. Các thuộc tính còn lại được đặt trong tập lệnh jQuery.

Selector.sli-links là một khối sẽ chứa các nút để di chuyển đến slide cần thiết. Các nút này là các thành phần đơn giản của số loại, sẽ được tự động chèn vào số lượng được yêu cầu, cùng với các liên kết gốc.sli 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 để họ có thể được nhìn thấy, tôi đã hỏi họ định vị tuyệt đối và một lớp trên cùng (z-index:3) để chúng xuất hiện phía trên các trang chiếu. Tôi nghĩ với CSS ở đâ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 + ""; )); $("" + $adderSpan +"").appendTo("#slider-wrap"); $(".control-slide:first").addClass("active"); $(".control-slide").click(function())( var goToNum = parsFloat($(this).text()); animSlide(goToNum); )); var tạm dừng = sai; var rotator = function())( if(!pause)(slideTime = setTimeout(function())(animSlide("next")), hwTimeOut);) ) $("#slider-wrap").hover(function( ))( clearTimeout(slideTime); tạm dừng = true;), function()(pause = false; rotator(); )); công cụ quay vòng(); ));

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

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

Logic chính của thanh trượt jQuery của chúng tôi là hàm animSlide. Phải mất một tham số. Nếu chúng ta truyền chuỗi “next” hoặc “prew” vào đó, nó sẽ hoạt động câu điều kiện và slide tiếp theo hoặc trước đó sẽ được hiển thị tương ứng. Nếu chúng ta gửi một số dưới dạng giá trị thì số này sẽ trở thành slide hoạt động và nó sẽ được hiển thị.

Vì vậy, hàm này ẩn div hiện tại, tính toán một div mới và hiển thị nó.

Lưu ý rằng phương thức .fadeIn() giúp hiển thị slide đang hoạt động và có đối số thứ hai. Đây được gọi là chức năng gọi lại. Nó được thực thi khi slide xuất hiện hoàn toàn. Trong trường hợp này, điều này được thực hiện để đảm bảo cuộn các trang chiếu một cách tự động. Hàm rotator được xác định bên dưới gọi lại hàm animSlide để chuyển sang trang chiếu tiếp theo trong khoảng thời gian mong muốn: chúng ta sẽ có một bao đóng đảm bảo cuộn liên tục.

Mọi thứ đều hoạt động tốt, nhưng chúng tôi cần dừng tự động hóa nếu người dùng di chuyển con trỏ đến thanh trượt hoặc nhấn các nút. Biến tạm dừng được tạo ra cho mục đích này. Nếu giá trị của nó là dương - true thì 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:

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, code được đơn giản hóa, tốt cho SEO.

Kết quả là bố cục thanh trượt sẽ trông giống như thế này (Tôi đã sử dụng hình ảnh làm trang trình bày và cài đặt 5 trong số đó):

0 1 2 3

Dưới đây bạn có thể xem cách thanh trượt jQuery của chúng tôi hoạt động trên trang demo và tải xuống tất cả các nguồn cần thiết.

Cuối cùng, một số điểm về việc tích hợp thanh trượt này với Drupal. Bạn có thể thêm mã này vào tệp mẫu, chẳng hạn như trong page.tpl.php và đính kèm tập lệnh dưới dạng tệp js riêng biệt vào chủ đề. Jquery trong Drupal được bật theo mặc định nhưng chạy ở chế độ tương thích (). Có hai lựa chọn để cải thiện. Hoặc bọc tất cả mã js:

(hàm ($) ( // Tất cả mã của bạn... ))(jQuery);

hoặc thay thế các ký hiệu $ trong toàn bộ tập lệnh bằng jQuery. Như thế này:

JQuery(document).ready(function(e) ( jQuery(".slide").css(("position" : "absolute", "top:"0", "left": "0")).hide ().eq(0).show(); var slideNum = 0; var slideTime; slideCount = jQuery("#slider .slide").size(); var animSlide = function(arrow)( // v.v.

Ví dụ này đã thực hiện phương pháp đầu tiên.

Cảm ơn vì đã đọc! Để lại ý kiến, trở lại. Bạn cũng có thể đăng ký RSS để nhận thông tin cập nhật blog trước!

Đã thêm: Đó không phải là tất cả. Đọc. Ở đó chúng tôi sẽ thêm các tính năng mới cho tập lệnh này.

Bây giờ hãy viết! Trước hết, hãy mở tệp chỉ mục của chúng tôi và viết đánh dấu mà chúng tôi cần ở đó:

Khối thuộc tính tiếp theo đặt trình bao bọc slide và các phần tử con của nó không có phần đệm, không cần nhận xét ở đây.

Tiếp theo, chúng ta tạo kiểu cho các trang chiếu của mình, chiều rộng của chúng phải bằng chiều rộng của khung nhìn, nhưng vì... chúng nằm trong một slidewrapper có chiều rộng bằng chiều rộng khung nhìn nhân với số trang chiếu, sau đó để lấy lại chiều rộng khung nhìn, chúng ta cần chia 100% chiều rộng của slidewrapper cho số trang chiếu (trong trường hợp của tôi, một lần nữa, bằng 4). Sau đó, chúng ta sẽ biến chúng thành các phần tử nội tuyến bằng cách sử dụng display:inline và đặt float sang trái bằng cách thêm thuộc tính float:left. Về list-style:none Tôi có thể nói rằng tôi sử dụng nó để xóa điểm đánh dấu mặc định khỏi li , trong hầu hết các trường hợp, đó là một loại tiêu chuẩn.

Hãy mở tệp js của chúng tôi, tệp này sẽ chứa mã thanh trượt, đừng quên kết nối jQuery, bởi vì Chúng tôi sẽ viết bằng cách sử dụng khuôn khổ này. Nhân tiện, tại thời điểm viết bài này, tôi đang sử dụng jQuery phiên bản 3.1.0. Tệp có tập lệnh phải được đưa vào cuối thẻ body, bởi vì chúng ta sẽ làm việc với các phần tử DOM cần được khởi tạo trước.

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

Biến slideNow cần được đặt thành 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 chế độ xem.

Trong slideCount, chúng ta sẽ đặt số lượng phần tử con của slidewrapper, mọi thứ ở đây đều hợp lý.
Tiếp theo các bạn tạo một hàm có nhiệm vụ chuyển slide từ phải sang trái, khai báo nhé:

hàm nextSlide() ( )

Chúng ta sẽ gọi nó trong khối chính của mã mà chúng ta sẽ đề cập sau, nhưng bây giờ chúng ta sẽ cho hàm của mình biết nó cần làm gì:

Đầu tiên, chúng tôi kiểm tra xem hiện tại chúng tôi có đang ở trang trình bày cuối cùng của nguồn cấp dữ liệu không? Để làm điều này, chúng tôi lấy số lượng tất cả các trang trình bày của mình bằng cách sử dụng $("#slidewrapper").children().length và kiểm tra nó với số lượng trang trình bày của chúng tôi, nếu chúng bằng nhau thì điều này có nghĩa là chúng tôi cần bắt đầu hiển thị nguồn cấp dữ liệu một lần nữa, từ 1 slide , có nghĩa là chúng ta thay đổi thuộc tính biến đổi CSS của slidewrapper thành Translate(0, 0) , do đó chuyển nó về vị trí ban đầu để slide đầu tiên nằm trong trường xem của chúng ta, chúng ta cũng đừng quên về –webkit và –ms để hiển thị đầy đủ trên nhiều trình duyệt (xem tài liệu tham khảo thuộc tính .css). Sau đó, đừng quên cập nhật giá trị của biến slideNow, cho nó biết rằng slide số 1 đang ở chế độ xem: slideNow = 1;

Nếu điều kiện đầu tiên không được đáp ứng, thì điều này có nghĩa là chúng ta hiện không ở trên slide cuối cùng cũng như trên một slide không tồn tại, có nghĩa là chúng ta cần chuyển sang slide tiếp theo, chúng ta sẽ thực hiện điều này bằng cách dịch chuyển slidewrapper sang trái bởi giá trị bằng chiều rộng khung nhìn, sự thay đổi sẽ lại xảy ra thông qua thuộc tính dịch quen thuộc, giá trị của nó sẽ bằng "translate(" + TranslateWidth + "px, 0)" , trong đó dịchWidth là khoảng cách mà chúng ta slidewrapper được dịch chuyển. Nhân tiện, hãy khai báo biến này ở đầu mã của chúng ta:

var dịchWidth = 0;

Sau khi chuyển sang slide tiếp theo, hãy thông báo cho slide của chúng ta rằng chúng ta sẽ thấy slide tiếp theo: slideNow++;

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); ));

Sau tất cả các bước chúng tôi đã thực hiện ở trên, thanh trượt của chúng tôi sẽ quay hoàn hảo, nhưng nếu có sự cố xảy ra thì sự cố có thể nằm ở phiên bản jQuery hoặc do kết nối không chính xác của bất kỳ tệp nào. Cũng không cần loại trừ rằng bạn có thể đã mắc lỗi ở đâu đó trong mã, vì vậy tôi chỉ có thể khuyên bạn nên kiểm tra kỹ mọi thứ.

Trong lúc chờ đợi, hãy tiếp tục, thêm vào thanh trượt của chúng ta một chức năng như dừng cuộn khi di con trỏ. Để thực hiện việc này, chúng ta cần viết nội dung sau vào khối mã chính (bên trong $(document).ready( Cấu trúc hàm ()()):

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

Bâ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 rằng tôi gói hai nút này vào một div với lớp prev-next-btns chỉ để 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 ta sẽ thêm kiểu cho chúng và mọi thứ sẽ ổn. Rõ ràng:

Đầu tiên, chúng ta định vị các nút bằng cách sử dụng vị trí: tuyệt đối, từ đó tự do kiểm soát vị trí của chúng trong khung nhìn, sau đó chúng ta sẽ chỉ định kích thước của các nút này và sử dụng bán kính đường viền để làm tròn các góc sao cho các nút này biến thành hình tròn. Màu của chúng sẽ là màu trắng, nghĩa là #fff và phần bù của chúng từ cạnh trên của khung nhìn sẽ bằng một nửa chiều cao của khung nhìn này trừ đi một nửa chiều cao của chính nút đó (trong trường hợp của tôi là 25px), vì vậy chúng ta có thể đặt chúng theo chiều dọc ở trung tâm. Tiếp theo, chúng tôi sẽ chỉ định rằng khi chúng tôi di chuột qua chúng, con trỏ của chúng tôi sẽ thay đổi thành con trỏ và cuối cùng chúng tôi sẽ thông báo cho từng nút của mình rằng chúng phải cách các cạnh của chúng 20px để chúng tôi có thể nhìn thấy chúng theo cách phù hợp với chúng tôi .

Một lần nữa, bạn có thể tạo kiểu cho các thành phần trang theo cách bạn muốn, tôi chỉ đưa ra ví dụ về các kiểu mà tôi quyết định sử dụng.

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(); ));

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:

Bây giờ chúng ta hãy chuyển sang phần jQuery:
Đầu tiên, hãy khai báo một biến navBtnId, biến này sẽ lưu trữ chỉ mục của nút mà chúng ta đã nhấp vào:

Cám ơn vì sự quan tâm của bạn!

thẻ:

thanh trượt jquery
css
hoạt hình css3
html

Thêm thẻ

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

Do có nhiều công cụ được cung cấp, 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 jQuery đáp ứng thanh trượt hình ảnh đã 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ộ tuyệt vời hiệu ứng hình ảnh(rẽ, khởi hành, làm mờ, xoắn ốc, rèm, v.v.) và nhiều các mẫu làm sẵn. Với trình hướng dẫn chèn trang tích hợp của WOW Slider, bạn có thể dễ dàng và dễ dàng tạo các trình chiếu tuyệt đẹp trong vài phút. Trang web của nhà phát triển chứa tất cả tài liệu cần thiết để thiết lập và sử dụng plugin bằng tiếng Nga, cũng như các ví dụ trực tiếp tuyệt vời về cách hoạt động của plugin. 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, hoàn toàn plugin miễn phí Vì 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 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 đẹ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. Sẽ tốt hơn nếu bạn thực hiện một chút phép thuật với các tệp chủ đề WP và đính kèm phiên bản jQuery miễn phí Plugin Nivo Thanh trượt tới blog của bạn, may mắn thay có đủ thông tin về cách thực hiện việc này trên Internet.
Về chức năng, mọi thứ đều ổn với điều này theo thứ tự hoàn hảo. Thư viện jQuery v1.7+ được sử dụng cho công việc, hiệu ứng đẹp chuyển tiếp, cài đặt đơn giản và rất linh hoạt, bố 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ủa họ sản phẩm của Apple, trong đó một số đối tượng nhỏ (hình ảnh) thay đổi bằng cách nhấp vào danh mục đã chọn với hiệu ứng hoạt hình đơn giản. Codrops theo ý của bạn bài học chi tiết về việc tạo thanh trượt này, bố cục hoàn chỉnh của đánh dấu Html, bộ quy tắc CSS và plugin jQuery thực thi cũng như 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. Hoạt động với nhiều loại trình duyệt, bao gồm tất cả các phiên bản IE - chiếc phanh nổi tiếng về tiến độ, từ IE6 trở lên. Tác phẩm sử dụng các chuyển tiếp CSS3 kết hợp với javascript để đảm bảo độ tin cậy. Đánh dấu đơn giản sử dụng danh sách không có thứ tự, cài đặt chuyển tiếp và khoảng thời gian, điều khiển chuyển đổi trang chiếu tự động và thủ công, cũng như hỗ trợ nhiều trình chiếu cùng một lúc. Đây là một "em bé" vui tươi.

Máy ảnh

Camera là một plugin JQuery miễn phí để tổ chức trình chiếu trên các trang của trang web, thanh trượt nhẹ với nhiều hiệu ứng chuyển tiếp, bố cục đáp ứng 100% và rất cài đặt đơn giản. Hoàn toàn phù hợp trên màn hình của mọi thiết bị người dùng (màn hình PC, máy tính bảng, điện thoại thông minh và Điện thoại cầm tay). Khả năng trình diễn video nhúng. Tự động thay đổi trang trình bày 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 cách khác, khá đơn giản thanh trượt thích ứng trên jQuery. Bạn có thể đặt bất kỳ nội dung, video, hình ảnh, văn bản và các thành phần khác trên trang trình bày của mình. Hỗ trợ mở rộng 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 thanh trượt cùng tên, với tốc độ 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

Đơn giản, không rườm rà, miễn phí Thanh trượt jQuery hình ảnh được viết riêng cho thiết kế web đáp ứng. Quả việt quất đang thử nghiệm plugin jQuery mã nguồn 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 dụng cụ chắc chắn, được thiết kế tốt, được cung cấp kèm theo ví dụ rõ ràng Và hướng dẫn chi tiết về việc tạo, cài đặt và sử dụng. Thiết kế thích ứng, các nút đẹp và mũi tên xanh, mọi thứ khá đẹp và êm dịu, không có áp lực.

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ể cài đặt Các phương pháp khác nhau hoạt ảnh, mờ dần trang chiếu hoặc chuyển tiếp từ một hướng nhất định. Tự động hiển thị và điều khiển thủ công bằng cách sử dụng các mũi tên điều hướng bật lên khi bạn di chuột qua hình ảnh. 10 loại hiệu ứng hoạt hình slide và hơn thế nữa...

Đánh giá hóa ra khá rộng rãi, nhưng không đủ thông tin do số lượng lớn các sản phẩm được đề cập. Mọi chi tiết và mô tả chi tiết chức năng về plugin này hoặc plugin kia, bạn có thể tìm hiểu trực tiếp trên trang của nhà phát triển. Tôi chỉ có thể hy vọng rằng tôi đã giúp ai đó dễ dàng tìm thấy công cụ rất cần thiết đó để tạo thanh trượt hình ảnh đầy màu sắc trên các trang trên trang web của họ.

Với tất cả sự tôn trọng, Andrew