Thiết kế thanh trượt khác thường bằng cách sử dụng jquery. Thư viện ảnh thích ứng cộng thêm. Phòng trưng bày với tiểu cảnh “Slider Kit”

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 điều này ứng dụng tiêu chuẩn thanh trượt. Công nghệ tương tự còn dùng để thu hút khách hàng đến quảng cáo 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, bản thân các hình ảnh thường tự động chuyển qua 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ả vẻ bề ngoài frame, 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-shadow: 0 0 7px #010, 0 0 10px blue , 0 0 15px #010, 0 0 35px #010 ) /* Chỉnh sửa hiển thị hình ảnh*/ img ( width: auto; Height: 390px; buffer: 13px; ) /* Tôi cho biết nội dung của danh sách các mục sẽ được hiển thị ở giữa phần tử- cha mẹ, 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 ; bên trái: 0px; chiều cao: 100 %; chỉ mục z: 3; nền: màu xanh; -moz-transition: độ mờ 1,5 giây; -webkit-transition: độ mờ 1,5 giây; ; chỉ số z: 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 trình bày xảy ra sau 2,7 giây và chức năng xử lý trang chiếu tiếp theo phải được gọi.

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

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

Bây giờ tôi xác định phần tử mới bộ sưu tập sẽ được hiển thị trên màn hình. Để làm điều này tôi lấy vị trí hiện tại +1. Bạn có thể nhận thấy rằng tôi cũng sử dụng phép chia có phần dư (%) cho số trang trình bày có sẵn. Thủ thuật với đôi 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 chính xác 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 làm mẫu cho những 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 chi tiết và dễ hiểu.

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 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ỉ cần xem số sê-ri của nút này và di chuyển nó đến trang chiếu mà chúng ta cần, một lần nữa bằng cách dịch chuyển trình bao bọc slide (sự thay đổi sẽ được thực hiện bằng cách thay đổi thuộc tính Transform css, 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 cả, 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 slidewrapper 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 phải cách điệu hóa toàn bộ điều này; phong cách thường không được bình luận cụ thể, 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: none; -ms-user-select: none; -o-user-select: none; chiều rộng: 100% * 4; : 1s; -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 rãi 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 với 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, 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 một 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 của 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 đang nói rằng những 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 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ể là do 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 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ỏ. Để 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 có dạng sau:

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

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

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

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

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

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

Lúc đầu đánh dấu này có thể chưa rõ, mình xin 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' 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 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, chúng ta quay lại tệp js, nơi chúng ta 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 đi 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 có; chiều rộng: 20px; màu nền: #fff; lề: 3px;

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 để cho khối của chúng ta 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ẻ

1. Trình chiếu jQuery tuyệt vời

Một bản trình chiếu lớn, ngoạn mục sử dụng công nghệ jQuery.

2. Plugin jQuery “Băng chuyền quy mô”

Trình chiếu có thể mở rộng bằng jQuery. Bạn có thể đặt kích thước trình chiếu phù hợp với mình nhất.

3. Plugin jQuery “slideJS”

Thanh trượt hình ảnh với mô tả văn bản.

4. Plugin “JSliderNews”

5. Thanh trượt jQuery CSS3

Khi bạn di chuột qua các mũi tên điều hướng, hình thu nhỏ hình tròn của trang chiếu tiếp theo sẽ xuất hiện.

6. jQuery hay Thanh trượt chu kỳ trình bày

Thanh trượt jQuery với chỉ báo tải hình ảnh. Tự động thay đổi slide được cung cấp.

7. Plugin jQuery “Thanh trượt thị sai”

Thanh trượt có hiệu ứng nền thể tích. Điểm nổi bật của thanh trượt này là chuyển động của nền, bao gồm nhiều lớp, mỗi lớp cuộn với ở tốc độ khác nhau. Kết quả là sự bắt chước hiệu ứng thể tích. Nó trông rất đẹp, bạn có thể tự mình nhìn thấy. Hiệu ứng được hiển thị mượt mà hơn trên các trình duyệt như Opera, Google Chrome,I E.

8. Thanh trượt jQuery mới, nhẹ “bxSlider 3.0”

Trên trang demo trong phần “ví dụ”, bạn có thể tìm thấy liên kết tới tất cả những lựa chọn khả thi sử dụng plugin này.

9. Thanh trượt hình ảnh jQuery, plugin “slideJS”

Một thanh trượt jQuery đầy phong cách chắc chắn có thể trang trí cho dự án của bạn.

10. Plugin trình chiếu jQuery " Trang trình bày dễ dàng»v1.1

Dễ dàng sử dụng JQuery plugin tạo slideshow.

11. Plugin trượt jQuery

Plugin jQuery nhẹ với nhiều phiên bản khác nhau. Tự động thay đổi slide được cung cấp.

12. CSS của jQuery thư viện có tính năng thay đổi slide tự động

Nếu khách truy cập không nhấp vào mũi tên “Chuyển tiếp” hoặc “Quay lại” trong một khoảng thời gian nhất định, thư viện sẽ bắt đầu cuộn tự động.

13. Thanh trượt jQuery “Nivo Slider”

Plugin rất chuyên nghiệp, chất lượng cao, nhẹ với mã hợp lệ. Có rất nhiều hiệu ứng chuyển tiếp slide khác nhau có sẵn.

14. Thanh trượt jQuery “MollySlider”

Thanh trượt mới. Thanh trượt jQuery với nhiều hiệu ứng thay đổi hình ảnh khác nhau.

15. Plugin jQuery “Slider²”

Thanh trượt nhẹ với bộ thay đổi trượt tự động.

16. Thanh trượt javascript mới

Thanh trượt với sự thay đổi hình ảnh tự động.

Plugin để thực hiện trình chiếu với tính năng thay đổi slide tự động. Có thể điều khiển màn hình bằng hình thu nhỏ của hình ảnh.

jQuery Thanh trượt CSS hình ảnh bằng plugin NivoSlider.

19. Thanh trượt jQuery “jShowOff”

Plugin để xoay nội dung. Ba tùy chọn để sử dụng: không có điều hướng (tự động thay đổi định dạng trình chiếu), điều hướng ở dạng nút, điều hướng ở dạng hình thu nhỏ.

20. Plugin “Danh mục hiệu ứng màn trập”

Plugin jQuery mới để thiết kế danh mục đầu tư của nhiếp ảnh gia. Thực hiện trong thư viện hiệu ứng thú vị thay đổi hình ảnh. Các bức ảnh nối tiếp nhau với hiệu ứng tương tự như hoạt động của màn trập ống kính.

21. Ánh sáng css css thanh trượt "TinySlider 2"

Triển khai thanh trượt hình ảnh với sử dụng javascript và CSS.

22. Thanh trượt tuyệt vời “Tinycircleslider”

Thanh trượt tròn đầy phong cách. Việc chuyển đổi giữa các hình ảnh được thực hiện bằng cách kéo thanh trượt có dạng vòng tròn màu đỏ xung quanh chu vi. Nó sẽ hoàn toàn phù hợp với trang web của bạn nếu bạn sử dụng các yếu tố hình tròn trong thiết kế của mình.

23. Thanh trượt hình ảnh với jQuery

Thanh trượt nhẹ “Bộ trượt”. Thanh trượt có nhiều kiểu dáng khác nhau: dọc và ngang. Cũng được thực hiện các loại khác nhauđiều hướng giữa các hình ảnh: sử dụng các nút “Chuyển tiếp” và “Quay lại”, sử dụng con lăn chuột, sử dụng nhấp chuột trên trang chiếu.

24. Phòng trưng bày tiểu cảnh “Slider Kit”

Phòng trưng bày "Bộ thanh trượt". Việc cuộn hình thu nhỏ được thực hiện theo cả chiều dọc và chiều ngang. Việc chuyển đổi giữa các hình ảnh được thực hiện bằng cách sử dụng: con lăn chuột, nhấp chuột hoặc di con trỏ lên hình thu nhỏ.

25. Thanh trượt nội dung jQuery “Bộ thanh trượt”

Dọc và thanh trượt ngang nội dung jQuery.

26. Trình chiếu jQuery “Bộ thanh trượt”

Trình chiếu với tính năng thay đổi slide tự động.

27. Ánh sáng javascript chuyên nghiệp Thanh trượt CSS3

Một thanh trượt jQuery và CSS3 gọn gàng được tạo vào năm 2011.

Trình chiếu jQuery với hình thu nhỏ.

29. Trình chiếu jQuery đơn giản

Trình chiếu với các nút điều hướng.

30. Trình chiếu “Skitter” jQuery tuyệt vời

Plugin jQuery Skitter để tạo trình chiếu tuyệt đẹp. Plugin hỗ trợ 22 (!) loại khác nhau hiệu ứng hoạt hình khi thay đổi hình ảnh. Có thể hoạt động với hai tùy chọn điều hướng slide: sử dụng số slide và sử dụng hình thu nhỏ. Hãy chắc chắn xem bản demo, một phát hiện chất lượng rất cao. Công nghệ sử dụng: CSS, HTML, jQuery, PHP.

31. Trình chiếu “Lúng túng”

Trình chiếu chức năng. Các slide có thể là: hình ảnh đơn giản, hình ảnh có chú thích, hình ảnh có chú giải công cụ, video. Bạn có thể sử dụng mũi tên, liên kết số trang trình bày và phím trái/phải trên bàn phím để điều hướng. Trình chiếu có nhiều phiên bản: có và không có hình thu nhỏ. Để xem tất cả các tùy chọn, hãy nhấp vào liên kết Demo #1 - Demo #6 nằm ở đầu trang demo.

Rất thiết kế ban đầu thanh trượt hình ảnh giống như một cái quạt. Chuyển tiếp slide sinh động. Điều hướng giữa các hình ảnh được thực hiện bằng cách sử dụng mũi tên. Ngoài ra còn có lẫy chuyển số tự động có thể bật tắt bằng nút Play/Pause nằm phía trên.

Thanh trượt jQuery hoạt hình. Hinh nên tự động chia tỷ lệ khi cửa sổ trình duyệt được thay đổi kích thước. Đối với mỗi hình ảnh, một khối có mô tả sẽ xuất hiện.

34. Thanh trượt “Flux Slider” sử dụng jQuery và CSS3

Thanh trượt jQuery mới. Một số hiệu ứng hoạt hình thú vị khi thay đổi slide.

35. Plugin jQuery “jSwitch”

Thư viện jQuery hoạt hình.

Trình chiếu jQuery dễ dàng với khả năng thay đổi trang trình bày tự động.

37. Một phiên bản mới plugin "SlideDeck 1.2.2"

Thanh trượt nội dung chuyên nghiệp. Có các tùy chọn thay đổi trang trình bày tự động cũng như tùy chọn sử dụng con lăn chuột để di chuyển giữa các trang trình bày.

38. Thanh trượt jQuery “Sudo Slider”

Thanh trượt hình ảnh nhẹ sử dụng jQuery. Có rất nhiều lựa chọn thực hiện: thay đổi hình ảnh theo chiều ngang và chiều dọc, có và không có liên kết đến số slide, có và không có chú thích ảnh, nhiều hiệu ứng thay đổi hình ảnh khác nhau. Có một chức năng thay đổi tự động slide. Bạn có thể tìm thấy liên kết tới tất cả các ví dụ triển khai trên trang demo.

39. Trình chiếu jQuery CSS3

Trình chiếu với hình thu nhỏ hỗ trợ chế độ thay đổi slide tự động.

40. Thanh trượt jQuery “Thanh trượt thông lượng”

Thanh trượt với nhiều hiệu ứng thay đổi hình ảnh.

41. Thanh trượt jQuery đơn giản

Thanh trượt hình ảnh phong cách sử dụng jQuery.

42. Trình chiếu jQuery “Craftyslide”

43. Trình chiếu jQuery toàn màn hình

Trình chiếu jQuery HTML5 trải dài trên toàn bộ chiều rộng của màn hình kèm theo âm thanh.

Một trình chiếu jQuery đơn giản.

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 với 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, 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); ));

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

Sau tất cả các bước chúng tôi đã thực hiện ở trên, thanh trượt của chúng tôi sẽ quay hoàn hảo, nhưng nếu có sự cố xảy ra thì sự cố có thể nằm ở phiên bản jQuery hoặc do kết nối không chính xác của bất kỳ tệp nào. Cũng không cần 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ỏ. Để 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ẻ: