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é
- JavaScript là gì?
- 10 mã CSS đơn giản bạn có thể học trong 10 phút
- Tìm hiểu về cơ chế hoạt động của jQuery
1. Start
Slideshow này yêu cầu một số tính năng
- Image support
- Điều khiển để thay đổi hình ảnh
- Chú thích văn bản
- Chế độ tự độ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.
MUO Slideshow
Cối xay gió
Cây
Chó
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 .
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 .
Dog
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
❮
❯
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. CSS
Sau 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ọ phông chữ. helvetica, arial;
}
#showContainer {
/* Main wrapper for all images */
width: 670px;
phần đệm. 0;
lề. 0 tự động;
tràn. ẩn;
vị trí. họ hàng;
}
. navButton {
/* Làm cho các nút trông đẹp mắt */
con trỏ. con trỏ;
phao. trái;
chiều rộng. 25px;
chiều cao. 22px;
phần đệm. 10px;
lề phải. 5px;
tràn. ẩn;
căn chỉnh văn bản. chính giữa;
màu. trắng;
độ dày của phông chữ. in đậm;
cỡ chữ. 18px;
nền. #000000;
độ mờ. 0. 65;
người dùng chọn. không có;
}
. nút điều hướng. di chuột {
độ mờ. 1;
}
. chú thích {
phao. đúng;
}
. hình ảnhContainer. không phải[. con đầu lòng] {
/* Ẩn tất cả hình ảnh ngoại trừ */
hiển thị đầu tiên: không có;
}
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
- con trỏ. con trỏ - thay đổi con trỏ từ mũi tên sang ngón tay trỏ khi bạn di chuyển con trỏ qua các nút.
- độ mờ. 0. 65 - Tăng độ trong suốt của các nút.
- người dùng chọn. không có - chắc chắn rằng bạn không vô tình đánh dấu văn bản trên các nút.
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. JavaScript
Last 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[] .
$['#previous'].bật['nhấp chuột', function[]{
// Change to the previous image
$['#im_' + currentImage].dừng[]. mờ dần[1];
. [];
$['#im_' + currentImage].dừng[]. mờ dần[1];
.
$['#next'].bật['nhấp chuột', function[]{
// Change to the next image
$['#im_' + currentImage].dừng[]. mờ dần[1];
. [];
$['#im_' + currentImage].dừng[]. mờ dần[1];
.
var currentImage = 1;
var totalImages = 3;
function increaseImage[] {
/* Increase currentImage by 1.
* Đặt lại thành 1 nếu lớn hơn TotalImages
*/
++currentImage< . ;
if[currentImage > totalImages] {
currentImage = 1;
}
}
function decreaseImage[] {
/* Decrease currentImage by 1.
* Đặt lại thành TotalImages nếu nhỏ hơn 1
*/
--currentImage