Thư viện JQuery: thanh trượt cho trang web của bạn

Với việc thông qua thời gian và sự phát triển của công nghệ trong lĩnh vực thiết kế web đang thay đổi và nhu cầu / yêu cầu của người dùng đến các trang web nội dung. Nếu trước đó là chủ yếu nội dung văn bản với một số lượng nhỏ các hình ảnh theo chủ đề, ngày nay nó là thành phần chủ đạo của đồ họa. Nó cho phép bạn nhanh chóng có được các thông tin cần thiết và hữu ích nhất, và không lãng phí thời gian đọc văn bản dài. Trong mối liên hệ với điều này ngày càng phổ biến và, trên thực tế, một yếu tố cần thiết của một trang web là thanh trượt. Họ là các khối với nội dung khác nhau trong họ - từ hình ảnh đến các liên kết. Một cách hiện đại để thêm một đối tượng web nhất định - sử dụng thư viện JQuery. Thanh trượt tạo với công cụ này, có được một cảm thấy thoải mái, dễ sử dụng, và trông rất ấn tượng. Tiếp theo chúng ta xem làm thế nào để làm cho các yếu tố của trang web trên của riêng họ. Nhờ một số đủ lớn các công cụ tiêu chuẩn hóa, nó có thể thực hiện các JQuery trượt-type và nội dung đa dạng.

Làm thế nào để thêm một thanh trượt trên một trang web?

Cách để thêm một slide-khối để trang số. Thường thậm chí không phải viết mã HTML và nghiên cứu kỹ kịch bản. Có một số lượng đáng kể các thư viện miễn phí, cung cấp cho người dùng một mẫu làm sẵn cho phép bạn thêm JQuery-thanh trượt trên trang web của bạn. Tất cả bạn phải làm - là để sao chép nó vào mã nguồn của trang web của bạn và tận hưởng kết quả. Tuy nhiên, trong trường hợp này khả năng thực hiện của trí tưởng tượng sáng tạo của bạn bị hạn chế. Vì vậy, nó rất hữu ích để có thể tạo ra các yếu tố thiết kế một cách độc lập. Để làm điều này, bạn cần phải biết làm thế nào để thực hiện thanh trượt đơn giản JQuery, và chỉ làm phức tạp nó, bạn luôn có thể thêm các yếu tố phụ trong các mã.

Tạo một thanh trượt của mình: trong mã HTML

Thứ nhất, bắt đầu từ đâu - là để đăng ký bố trí tương lai của thanh trượt.

1. Được thành lập vào đơn vị HTML-file Slideshow, mà sẽ chứa tất cả các slide của chúng tôi (hình ảnh, vv).
2. Nó nằm danh sách ul, mỗi đoạn trong đó sẽ lưu trữ một slide riêng biệt.

Chúng tôi đang làm việc với CSS

Sau đó, chúng tôi áp dụng cho nó những đặc điểm của phong cách mong muốn sử dụng CSS-tài liệu. Nó là cần thiết để áp đặt nội dung JQuery trượt của chúng tôi để hoạt động đúng và có cái nhìn đúng đắn. Ở giai đoạn này, chúng tôi đang phải đối mặt với những nhiệm vụ sau:

• chắc chắn rằng trên đơn vị Slideshow hiển thị chỉ có một, ngay tại thời điểm này trượt (hoặc nội dung hình ảnh), và phần còn lại được ẩn;
• sắp xếp các slide một sau khi khác (trái sang phải);
• làm ul-container, mà các cửa hàng slide di động (trái và phải).

Để làm điều này, thiết lập các tùy chọn sau trong CSS-file:

• cho Slideshow: overflow-x - di chuyển, overflow-y - ẩn:
• cho ul: float - trái.

Ngoài ra bạn có thể thiết lập các thông số của độ rộng (width), chiều cao (chiều cao), nền (background) và vân vân.

Chúng tôi đặt mã này trong JQuery

HTML và CSS tất cả các thay đổi cần thiết đã được thực hiện. Nó vẫn còn trường hợp của mã JQuery, thanh trượt, mà cần phải có các thông số sau:

• Slides nên thành công lẫn nhau với một khoảng thời gian nhất định;
• khi bạn di chuột con trỏ chuột lên phong trào của họ nên chấm dứt.

Để làm điều này, chúng ta khai báo hai biến: slidewidth (tương đương với chiều dài của slide) và slidertime (xác định thời gian trình chiếu). Các bộ đếm thời gian sẽ bắt đầu khi toàn bộ trang được trang web nạp. Bằng cách tham số này, chúng tôi buộc hành động của trỏ trỏ chuột vào một slide (mà dừng trình chiếu).

Hãy chắc chắn để định chiều dài thùng ul. Nó sẽ bằng số lượng các slide, nhân với độ dài của mỗi slide.

Chèn chức năng chịu trách nhiệm cho việc thay đổi các slide. Đó là tất cả, bạn có thể kiểm tra việc thực hiện các thanh trượt của bạn.

phần kết luận

Trong bài viết này, chúng tôi đã xem xét làm thế nào để tạo riêng JQuery thanh trượt cùng của họ để chèn một trang của trang web của mình. Sử dụng ví dụ của một thanh trượt đơn giản, bạn có thể đưa ra cách giải thích riêng của họ về nó, làm cho những thay đổi phù hợp với mã nguồn. Điều này sẽ cải thiện việc thiết kế và sử dụng các trang web của bạn thuận tiện hơn cho khách.