Css trình chiếu tự động
|
Nếu bạn đang học hoặc thích thú với việc lập trình thì không nên bỏ qua bài viết dưới đây Hướng dẫn cách tạo slideshow bằng Java Script với 3 bước đơn giản
Bạn cần phải biết một số điều kiện trước khi bắt đầu viết mã. Ngoài việc lựa chọn một trình duyệt web và trình soạn thảo văn bản phù hợp (nhiều người khuyến khích sử dụng Sublime Text), bạn sẽ cần một số kinh nghiệm làm việc với HTML, CSS, JavaScript và jQuery Nếu bạn không tự tin về các kỹ năng của mình, hãy tham khảo một số bài viết dưới đây để có thêm kiến thức về các ngôn ngữ lập trình này nhé
1. StartSlideshow này yêu cầu một số tính năng
Có vẻ như là một danh sách các tính năng đơn giản. Chế độ tự động sẽ tự động chuyển sang hình ảnh tiếp theo cho đến hết trình chiếu. Đây là bản thảo thô nhiều người vẫn làm trước khi viết bất kỳ mã nào  Chắc chắn sẽ có nhiều bạn đang tự hỏi tại sao phải lập lại kế hoạch. Tuy nhiên việc lập kế hoạch này giúp bạn làm việc khoa học tốt hơn và từ đó nắm vững các quy tắc để có thể viết mã lớn hơn Bạn nên bắt đầu với HTML như bên dưới. Lưu nội dung này vào một tệp có tên phù hợp, có hạn như index. html.
Code on will look like this Nhìn rất phức tạp và chưa hoàn chỉnh nên chúng ta hãy phân tích trước khi cải thiện nó nhé Mã này chứa HTML “tiêu chuẩn”, các thẻ head , style, script và body. Những phần này là thành phần thiết yếu của bất kỳ trang web nào, bao gồm cả JQuery thông qua Google CDN . Đến thời điểm này không có gì độc đáo hoặc đặc biệt. . Đến thời điểm này không có gì độc đáo hoặc đặc biệt. Bên trong body là div và id của showContainer . Đây là khung bao (wapper) hoặc thùng chứa (container) bên ngoài để lưu trữ slideshow. Bạn sẽ cải thiện sau CSS. Trong thùng chứa này có ba đoạn mã, các đoạn mã này đều có chức năng giống nhau. Một lớp cha được xác định với một tên lớp của imageContainer . <div class="imageContainer" id="im_1"> Mã này được sử dụng để lưu trữ một trang trình bày duy nhất - một hình ảnh và chú thích được lưu trữ bên trong thùng chứa này. Mỗi thùng chứa một id duy nhất, bao gồm các ký tự im_ và một số. Mỗi thùng chứa một số khác nhau, từ một đến ba. Trong bước cuối cùng, hình ảnh được tham chiếu và phụ đề được lưu trữ bên trong div với lớp chú thích . <img src="Hình ảnh/1. jpg" /> Do đó chúng ta đã tạo ra các hình ảnh với tên tệp số và được lưu trữ bên trong một thư mục gọi là Hình ảnh . Bạn có thể đặt tên bằng bất kỳ thứ gì bạn thích, miễn phí là bạn cập nhật HTML phù hợp. Nếu bạn muốn tăng hoặc giảm nhiều ảnh trong trình chiếu, bạn chỉ cần sao chép và dán hoặc xóa các đoạn mã với lớp imageContainer . Lưu ý cần phải cập nhật tên tập tin và id theo yêu cầu. Cuối cùng, tạo các nút điều hướng. Điều này cho phép người dùng điều hướng các hình ảnh <div class="navButton" id="previous">❮div> Các mã ký hiệu tự thực hiện của HTML này được sử dụng để hiển thị các mũi tên chuyển tiếp và quay lại 2. CSSSau khi hoàn thành cấu trúc cốt lõi cấu trúc, đã đến lúc làm cho nó trông đẹp hơn. Sau khi thêm mã mới, trình chiếu của bạn sẽ như thế này Thêm CSS này vào giữa các thẻ kiểu của bạn. html { Hãy phân tích mã trên nhé Những hình ảnh được sử dụng đều có kích thước 670 x 503 pixel, do slideshow này chủ yếu được thiết kế theo các hình ảnh có kích thước đó. Bạn sẽ cần phải điều chỉnh CSS theo một cách thích hợp nếu bạn muốn sử dụng các hình ảnh có kích thước khác nhau. Một lời khuyên dành cho những ai mới bắt đầu là nên để hình ảnh có cùng kích thước. Bạn có thể thay đổi kích thước hình ảnh của bạn để về cùng một kích thước - các hình ảnh với các kích thước khác nhau sẽ gây ra nhiều vấn đề về sắp xếp Đoạn mã trên bao gồm các mã xác định kích thước của thùng chứa để lưu trữ hình ảnh, căn giữa, chỉ định dạng chữ, cùng với nút và màu văn bản. Có một vài kiểu có thể bạn chưa gặp trước đây
Bạn có thể thấy kết quả của hầu hết các mã này trong các nút Phần phức tạp nhất ở đây là dòng mã trông có vẻ kỳ lạ .imageContainer:not(:first-child) { Trước tiên, nó nhắm mục tiêu vào bất kỳ phần tử nào trong Lớp imageContainer . Cú pháp . not() loại trừ bất kỳ phần tử nào bên trong dấu trích từ kiểu (kiểu) này. Cuối cùng, cú pháp . con đầu lòng có nghĩa là CSS sẽ xác định bất kỳ phần tử nào phù hợp với tên nhưng bỏ qua các phần tử đầu tiên. Lý do cho điều này là đơn giản. Vì đây là trình chiếu, chỉ yêu cầu mỗi lần một ảnh xuất hiện nên CSS này sẽ khóa tất cả các hình ảnh bên ngoài hình ảnh đầu tiên. 3. JavaScriptLast end is JavaScript. Đây là logic để làm cho slideshow hoạt động theo một cách chính xác Add this code into your tag script $(tài liệu). sẵn sàng(chức năng() . Có vẻ hơi phản khoa học một chút, nhưng trước hết chúng ta sẽ bỏ qua đoạn mã đầu tiên và giải thích nửa sau của đoạn mã này You must verify the two variable. This can be coi as các biến cấu hình chính cho slideshow var currentImage = 1; Hai biến này cho biết tổng số hình ảnh trong trình chiếu và số hình ảnh được bắt đầu. Nếu bạn có nhiều hình ảnh hơn, chỉ cần thay đổi biến totalImages thành tổng số hình ảnh bạn có. Hai chức năng increaseImage và decreaseImage dùng để tăng . Nếu biến này thấp hơn một hoặc cao hơn currentImage. Nếu biến này thấp hơn một hoặc cao hơn totalImages , nó sẽ được thiết lập lại thành một hoặc totalImages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Điều này đảm bảo việc tham chiếu sẽ lặp lại khi nó kết thúc. Trở lại đoạn mã ở phần đầu. Code this " nhắm mục tiêu " vào các nút tiếp theo và quay lại. Khi bạn nhấp vào từng nút, nó sẽ gọi phương thức tăng hoặc giảm thích hợp. Sau khi hoàn thành, đơn giản nó chỉ cần làm mờ hình ảnh trên màn hình và tăng dần hình ảnh mới (được xác định theo biến currentImage ). Phương thức stop() được xây dựng trong jQuery. Thao tác này sẽ hủy bỏ mọi sự kiện (sự kiện) đang chờ xử lý. Điều này đảm bảo mỗi lần nhấn nút đều trôi chảy. Các phương thức fadeIn(1) and fadeOut(1) làm Mờ . Số lượng thời gian mờ chỉ được tính bằng mili giây. Hãy thử thay đổi số này thành số lớn hơn giới hạn như 500. Number of large meaning with the time transfer time more than. Nếu bạn để thời gian chuyển đổi quá ít, thì bạn sẽ có cảm giác thấy sự kiện xuất hiện lạ hoặc "nhấp nháy" giữa các hình ảnh thay đổi. Dưới đây là slideshow. Tính năng thăng tiến tự độngBây giờ, trình chiếu này trông khá đẹp, nhưng vẫn cần chỉnh sửa phần cuối để hoàn tất. Tự động nâng cấp là một tính năng thực sự cho slideshow “tỏa sáng”. Sau một khoảng thời gian nhất định, mỗi hình ảnh sẽ tự động chuyển sang hình ảnh tiếp theo. Tuy nhiên, người dùng vẫn có thể điều hướng để chuyển tiếp hoặc quay lại ảnh trước đó Đây là một công việc dễ dàng với jQuery. Cần tạo ra một bộ đếm thời gian để thực thi mã của bạn mỗi X giây. Thay vì viết mã mới, điều dễ dàng nhất là mô phỏng một "nhấp chuột" vào nút hình ảnh tiếp theo và để mã hiện có tất cả các công việc. Đây là JavaScript mới mà bạn cần - bổ sung chức năng này sau hàm giảm Image cửa sổ. setInterval(hàm() . Phương thức . setInterval sẽ chạy đoạn mã xác định theo thời gian được chỉ định ở cuối. Thời gian 2500 (tính bằng mili giây) có nghĩa là trình chiếu này sẽ thay đổi hình ảnh sau 2,5 giây. Con số càng nhỏ có nghĩa là mỗi hình ảnh sẽ được chuyển tiếp với tốc độ nhanh hơn. Phương thức nhấp chuột kích hoạt các nút để chạy mã khi người dùng đã nhấp chuột vào nút. Trên đây là cách cơ bản để tạo trình chiếu tự động trên web bằng JavaScript. Chúc các bạn thực hiện thành công
Thứ Hải, 19/03/2018 11. 07 3,8 ★ 25 👨 31. 234 0 Bình luận Sắp xếp theo Delete Login to Send Bạn nên đọc
Lập trình
Giới thiệu. Điều khoản. bảo mật. Hướng dẫn. Ứng dụng. Liên hệ. Quảng cáo. Facebook. YouTube. DMCA Giấy phép số 362/GP-BTTTT. Bộ Thông tin và Truyền thông cấp ngày 30/06/2016. Cơ quan chủ quản. CÔNG TY CỔ PHẦN MẠNG TRỰC TUYẾN META. address. 56 Duy Tân, Dịch Vọng Hậu, Cầu Giấy, Hà Nội. Điện thoại. 024 2242 6188. E-mail. thông tin @ meta. vn. Chịu trách nhiệm nội dung. Lê Ngọc Lâm Bản quyền © 2003-2022 QuanTriMang. com. Giữ toàn quyền. Không thể sao chép hoặc sử dụng hoặc phát hành lại bất kỳ nội dung nào thuộc về QuanTriMang. com khi chưa được cấp phép |
