Home-theater-designers
Nếu bạn đã đọc hướng dẫn của chúng tôi về cách tạo một trang web , bạn có thể tự hỏi phải làm gì tiếp theo để cải thiện kỹ năng của mình. Tạo trình chiếu ảnh là một nhiệm vụ dễ dàng một cách đáng ngạc nhiên và có thể dạy cho bạn những kỹ năng quý giá cần thiết để có được một công việc lập trình.
Hôm nay tôi sẽ hướng dẫn bạn cách tạo một trình chiếu JavaScript từ đầu. Hãy bắt tay ngay vào!
Điều kiện tiên quyết
Bạn sẽ cần biết một số điều trước khi có thể bắt đầu viết mã. Cùng với một trình duyệt web thích hợp và trình soạn thảo văn bản mà bạn chọn (tôi khuyên bạn nên Văn bản tuyệt vời ), bạn sẽ cần một số kinh nghiệm với HTML , CSS , JavaScript , và jQuery .
Nếu bạn không tự tin vào kỹ năng của mình, hãy đảm bảo rằng bạn đã đọc hướng dẫn của chúng tôi để sử dụng Mô hình đối tượng tài liệu và các mẹo này để học CSS. Nếu bạn tự tin với JavaScript nhưng chưa bao giờ sử dụng jQuery trước đây, thì hãy xem hướng dẫn cơ bản của chúng tôi về jQuery.
1. Bắt đầu
Trình chiếu này yêu cầu một số tính năng:
- Hỗ trợ hình ảnh
- Kiểm soát thay đổi hình ảnh
- Chú thích văn bản
- Chế độ tự động
Nó có vẻ là một danh sách các tính năng đơn giản. Chế độ tự động sẽ tự động chuyển hình ảnh sang hình ảnh tiếp theo trong trình tự. Đây là bản phác thảo thô tôi đã làm trước khi viết bất kỳ mã nào:
Nếu bạn đang tự hỏi tại sao phải lập kế hoạch, thì hãy xem những sai lầm lập trình tồi tệ nhất trong lịch sử này. Dự án này sẽ không khiến bất kỳ ai bị giết, nhưng điều quan trọng là phải có hiểu biết vững chắc về mã và quy trình lập kế hoạch trước khi làm việc với mã lớn hơn - ngay cả khi nó chỉ là một bản phác thảo sơ bộ.
Đây là HTML ban đầu bạn cần để bắt đầu. Lưu nó vào một tệp có tên thích hợp, chẳng hạn như index.html :
MUO Slideshow
Windmill
Plant
Dog
❮
❯
Đây là mã trông như thế nào:
Nó hơi rác rưởi phải không? Hãy chia nhỏ nó trước khi chúng ta cải thiện nó.
Mã này chứa 'tiêu chuẩn' HTML , cái đầu , Phong cách , kịch bản , và cơ thể người các thẻ. Những phần này là thành phần thiết yếu của bất kỳ trang web nào. JQuery được bao gồm thông qua Google CDN - không có gì độc đáo hoặc đặc biệt cho đến nay.
Bên trong phần thân là một div với id là showContainer . Đây là một trình bao bọc hoặc thùng chứa bên ngoài để lưu trữ trình chiếu. Bạn sẽ cải thiện điều này sau này với CSS. Bên trong thùng chứa này, có ba khối mã, mỗi khối có mục đích tương tự.
Một lớp cha được định nghĩa với tên lớp là imageContainer :
Điều này được sử dụng để lưu trữ một trang trình bày - hình ảnh và chú thích được lưu trữ bên trong vùng chứa này. Mỗi vùng chứa có một id duy nhất, bao gồm các ký tự bên trong_ và một số. Mỗi thùng chứa có một số khác nhau, từ một đến ba.
Bước cuối cùng, một hình ảnh được tham chiếu và chú thích được lưu trữ bên trong một div với đầu đề lớp:
Dog
Tôi đã tạo hình ảnh của mình bằng tên tệp số và lưu trữ chúng bên trong một thư mục có tên Hình ảnh . Bạn có thể gọi bất cứ thứ gì bạn thích, miễn là bạn cập nhật HTML để phù hợp.
Nếu bạn muốn có nhiều hoặc ít hình ảnh trong trình chiếu của mình, chỉ cần sao chép và dán hoặc xóa các khối mã bằng imageContainer lớp, nhớ cập nhật tên tệp và id theo yêu cầu.
Cuối cùng, các nút điều hướng được tạo. Những điều này cho phép người dùng điều hướng qua các hình ảnh:
❮
❯ Này Thực thể HTML mã được sử dụng để hiển thị các mũi tên tiến và lùi, theo cách tương tự như cách thức hoạt động của phông chữ biểu tượng.
2. CSS
Bây giờ cấu trúc cốt lõi đã có, đã đến lúc làm cho nó khá . Đây là những gì nó sẽ trông như thế nào sau mã mới này:
Thêm CSS này vào giữa Phong cách các thẻ:
html {
font-family: helvetica, arial;
}
#showContainer {
/* Main wrapper for all images */
width: 670px;
padding: 0;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.navButton {
/* Make buttons look nice */
cursor: pointer;
float: left;
width: 25px;
height: 22px;
padding: 10px;
margin-right: 5px;
overflow: hidden;
text-align: center;
color: white;
font-weight: bold;
font-size: 18px;
background: #000000;
opacity: 0.65;
user-select: none;
}
.navButton:hover {
opacity: 1;
}
.caption {
float: right;
}
.imageContainer:not(:first-child) {
/* Hide all images except the first */
display: none;
}Điều đó có vẻ tốt hơn bây giờ phải không? Chúng ta hãy xem mã.
Tôi đang sử dụng hình ảnh mẫu mà tất cả đều là 670 x 503 điểm ảnh , vì vậy trình chiếu này chủ yếu được thiết kế xung quanh các hình ảnh có kích thước đó. Bạn sẽ cần điều chỉnh CSS một cách thích hợp nếu bạn muốn sử dụng hình ảnh có kích thước khác. Tôi khuyên bạn nên thay đổi kích thước hình ảnh của mình cho phù hợp với kích thước - các hình ảnh khác nhau có kích thước khác nhau sẽ gây ra các vấn đề về kiểu dáng.
Phần lớn của CSS này là tự giải thích. Có mã để xác định kích thước của vùng chứa để lưu trữ hình ảnh, căn giữa mọi thứ, chỉ định phông chữ, cùng với nút và màu văn bản. Có một số phong cách mà bạn có thể chưa từng gặp trước đây:
- con trỏ: con trỏ - Thao tác này thay đổi con trỏ từ mũi tên thành ngón tay trỏ khi bạn di chuyển con trỏ qua các nút.
- độ mờ: 0,65 - Điều này làm tăng độ trong suốt của các nút.
- user-select: none - Điều này đảm bảo bạn không thể vô tình làm nổi bật văn bản trên các nút.
Bạn có thể xem kết quả của hầu hết mã này trong các nút:
Phần phức tạp nhất ở đây là dòng trông kỳ lạ này:
.imageContainer:not(:first-child) {Nó có thể trông khá bất thường, nhưng nó khá tự giải thích.
Đầu tiên, nó nhắm mục tiêu đến bất kỳ phần tử nào có imageContainer lớp. Các :không phải() cú pháp tuyên bố rằng bất kỳ phần tử nào bên trong dấu ngoặc phải là loại trừ từ phong cách này. cuối cùng : con đầu lòng cú pháp tuyên bố rằng CSS này nên nhắm mục tiêu bất kỳ phần tử nào phù hợp với tên nhưng bỏ qua phần tử đầu tiên. Lý do cho điều này là đơn giản. Vì đây là bản trình chiếu nên chỉ yêu cầu một hình ảnh tại một thời điểm. CSS này ẩn tất cả các hình ảnh ngoài hình ảnh đầu tiên.
3. JavaScript
Phần cuối cùng của câu đố là JavaScript. Đây là logic để thực sự làm cho chức năng trình chiếu hoạt động chính xác.
Thêm mã này vào của bạn kịch bản nhãn:
$(document).ready(function() {
$('#previous').on('click', function(){
// Change to the previous image
$('#im_' + currentImage).stop().fadeOut(1);
decreaseImage();
$('#im_' + currentImage).stop().fadeIn(1);
});
$('#next').on('click', function(){
// Change to the next image
$('#im_' + currentImage).stop().fadeOut(1);
increaseImage();
$('#im_' + currentImage).stop().fadeIn(1);
});
var currentImage = 1;
var totalImages = 3;
function increaseImage() {
/* Increase currentImage by 1.
* Resets to 1 if larger than totalImages
*/
++currentImage;
if(currentImage > totalImages) {
currentImage = 1;
}
}
function decreaseImage() {
/* Decrease currentImage by 1.
* Resets to totalImages if smaller than 1
*/
--currentImage;
if(currentImage <1) {
currentImage = totalImages;
}
}
});Nó có vẻ phản trực quan, nhưng tôi sẽ bỏ qua các khối mã ban đầu và chuyển thẳng sang giải thích mã từ nửa đầu - đừng lo lắng, tôi giải thích tất cả các mã!
Bạn cần xác định hai biến. (Đây là cách xác định các biến trong JavaScript.) Các biến này có thể được coi là các biến cấu hình chính cho trình chiếu:
var currentImage = 1;
var totalImages = 3;Chúng lưu trữ tổng số hình ảnh trong trình chiếu và số hình ảnh để bắt đầu. Nếu bạn có nhiều hình ảnh hơn, chỉ cần thay đổi totalImages biến thành tổng số hình ảnh bạn có.
Hai chức năng tăng hình ảnh và giảm hình ảnh tiến lên hoặc rút lui hình ảnh hiện tại Biến đổi. Nếu biến này thấp hơn một hoặc cao hơn totalImages , nó được đặt lại thành một hoặc totalImages . Điều này đảm bảo trình chiếu sẽ lặp lại khi nó kết thúc.
Quay lại mã lúc đầu. Mã này 'nhắm mục tiêu' các nút tiếp theo và trước đó. Khi bạn nhấp vào mỗi nút, nó sẽ gọi tăng hoặc giảm bớt các phương pháp. Sau khi hoàn tất, nó chỉ đơn giản làm mờ hình ảnh trên màn hình và mờ dần trong hình ảnh mới (như được định nghĩa bởi hình ảnh hiện tại Biến đổi).
Các ngừng lại() phương thức được xây dựng trong jQuery. Điều này sẽ hủy mọi sự kiện đang chờ xử lý. Điều này đảm bảo mỗi lần nhấn nút diễn ra trơn tru và có nghĩa là bạn không có 100 nút nhấn đang chờ thực hiện nếu bạn hơi điên cuồng trên con chuột. Các fadeIn (1) và fadeOut (1) các phương pháp làm mờ dần các hình ảnh theo yêu cầu. Con số chỉ định khoảng thời gian mờ dần tính bằng mili giây. Hãy thử thay đổi số này thành một số lớn hơn, chẳng hạn như 500. Số lớn hơn dẫn đến thời gian chuyển đổi lâu hơn. Tuy nhiên, hãy đi quá xa và bạn có thể bắt đầu thấy các sự kiện lạ hoặc 'nhấp nháy' giữa các thay đổi hình ảnh. Đây là trình chiếu đang hoạt động:
Tiến lên tự động
Trình chiếu này bây giờ trông khá ổn, nhưng cần có một lần hoàn thiện cuối cùng. Tự động nâng cấp là một tính năng sẽ thực sự làm cho trình chiếu này 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 tiến hoặc lùi.
cách xóa tin nhắn trên mac
Đây là một công việc dễ dàng với jQuery. Một bộ đếm thời gian cần được tạo để thực thi mã của bạn mỗi NS giây. Tuy nhiên, thay vì viết mã mới, điều dễ dàng nhất để làm 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ó thực hiện tất cả công việc.
Đây là JavaScript mới bạn cần - thêm JavaScript sau giảm hình ảnh hàm số:
window.setInterval(function() {
$('#previous').click();
}, 2500);Không có nhiều chuyện xảy ra ở đây. Các window.setInterval phương thức sẽ chạy một đoạn mã thường xuyên, như được xác định bởi 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ẽ tiến lên sau mỗi 2,5 giây. Một con số nhỏ hơn có nghĩa là mỗi hình ảnh sẽ phát triển với tốc độ nhanh hơn. Các nhấp chuột phương thức kích hoạt các nút để chạy mã như thể người dùng đã nhấp vào nút bằng chuột của họ.
Nếu bạn đã sẵn sàng cho thử thách JavaScript tiếp theo của mình, hãy thử xây dựng trang web bằng trình tạo trang web tĩnh như GatsbyJS hoặc khung giao diện người dùng như Vue. Nếu bạn là người học Ruby, Jekyll cũng là một lựa chọn. Đây là cách Jekyll và GatsbyJS đấu với nhau.
Tín dụng hình ảnh: Tharanat Sardsri qua Shutterstock.com
Đăng lại Đăng lại tiếng riu ríu E-mail 8 trang web tốt nhất để tải xuống sách nói miễn phíSách nói là một nguồn giải trí tuyệt vời và dễ đọc hơn nhiều. Dưới đây là tám trang web tốt nhất mà bạn có thể tải chúng xuống miễn phí.
Đọc tiếp Chủ đề liên quan- Lập trình
- JavaScript
- Thiết kế web
Joe tốt nghiệp ngành Khoa học Máy tính tại Đại học Lincoln, Vương quốc Anh. Anh ấy là một nhà phát triển phần mềm chuyên nghiệp và khi anh ấy không lái máy bay không người lái hay viết nhạc, anh ấy thường có thể bị bắt gặp chụp ảnh hoặc sản xuất video.
Xem thêm từ Joe CoburnTheo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
Bấm vào đây để đăng ký