Xây dựng băng chuyền với JavaScript – cách tạo javascript băng chuyền

Lần tới khi bạn nghĩ đến việc sử dụng Flash, có lẽ bạn nên xem xét Javascript để xây dựng một băng chuyền.

Bạn đang xem : cách tạo javascript băng chuyền

Lần tới khi bạn nghĩ đến việc sử dụng Flash, có lẽ bạn nên xem xét Javascript để tạo băng chuyền.

Flash có thể làm cho các trang Web trông đẹp đẽ nhưng vì lý do này hay lý do khác, không phải ai cũng cài đặt trình phát trên trình duyệt khách. Nếu bạn hoặc người dùng của bạn là một trong những người kém may mắn có bản phân phối Linux 64-bit hoặc bạn ghét có các hình ảnh động trên trang Web của mình, thì bạn buộc phải sử dụng flash.

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo băng chuyền hữu dụng hơn trong JavaScript thay vì Flash.

JavaScript – Ít hơn hai tệ nạn

Với mục đích của bài viết này, chúng tôi sẽ không tranh luận về lý do tại sao chúng tôi phát triển băng chuyền và chấp nhận rằng chúng tôi buộc phải tạo một băng chuyền.

Sau đó, câu hỏi trở thành: tại sao sử dụng JavaScript trên Flash?

  • Nó nhẹ hơn so với triển khai Flash – bằng cách tối ưu hóa mã của chúng tôi, chúng tôi sẽ có thể có một băng chuyền chức năng chỉ trong vài kilobyte, sẽ mất nhiều thời gian hơn để tải hình ảnh so với HTML và JavaScript của chúng tôi.
  • Khả năng bảo trì là một lý do khác, nhiều nhà phát triển biết JavaScript so với những nhà phát triển có năng lực trong Flash. Có lẽ không có tài nguyên thiết kế để tạo ra một triển khai flash đầy đủ tính năng, đột nhiên để nó cho các nhà phát triển có nghĩa là JavaScript là một sự thay thế khả thi.
  • Sự xuống cấp. Việc cung cấp nội dung hữu ích cho người đã tắt JavaScript sẽ dễ dàng hơn rất nhiều so với người không có Flash.
  • Khả năng tiếp cận. Trình đọc màn hình điều hướng băng chuyền trong dòng dễ dàng hơn so với bên ngoài đặt băng chuyền trong đối tượng Flash.
  • Google. Nếu nội dung của bạn nằm trong trang thì Google có thể lập chỉ mục nội dung đó, nếu nó ở dạng Flash thì Googlebot không thể theo dõi các liên kết mà không ẩn nội dung băng chuyền trong trang.

Cơ sở HTML

Với những lý do này, hãy bắt đầu tạo băng chuyền của chúng tôi bằng cách hiển thị hoàn toàn bốn câu chuyện mà chúng tôi sẽ sử dụng trong ví dụ này.

 & lt; html & gt;
& lt; body & gt;
& lt; div id = "storyContainer" & gt;
& lt; div id = "story1" & gt;
& lt; a href = "http://www.builderau.com.au/program/iis/soa/Protect_IIS_log_files_by_moving_them_to_a_secure_location/0,339028427,339271617,00.htm" class = "ched" & gt; Secure IIS & lt; / a & gt;
 Các tệp nhật ký là điều cần thiết để tạo lại các sự kiện trước khi máy chủ Web IIS bị lỗi. Tìm hiểu cách bảo vệ các tệp nhật ký của bạn bằng mẹo này.
 & lt; span class = "fstory" & gt; & lt; a href = "http://www.cnet.com.au/software/security/0,39029558,40058242,00.htm" & gt; Toàn bộ câu chuyện & lt; / a & gt; & lt; / span & gt;
& lt; / div & gt;
& lt; div id = "story2" & gt;
& lt; a href = "http://www.builderau.com.au/program/html/soa/Microformats_and_Mapping/0,339028420,339271486,00.htm" class = "ched" & gt; User Group Mash & lt; / a & gt;
 Tìm nhóm người dùng Úc gần bạn với giao diện bản đồ Google mới của chúng tôi.
 & lt; span class = "fstory" & gt; & lt; a href = "http://www.builderau.com.au/program/html/soa/Microformats_and_Mapping/0,339028420,339271486,00.htm" & gt; Toàn bộ câu chuyện & lt ; / a & gt; & lt; / span & gt;
& lt; / div & gt;
& lt; div id = "story3" & gt;
& lt; a href = "http://www.builderau.com.au/program/dotnet/soa/Quick_Start_guide_to_Microsoft_NET_development/0,339028399,339271495,00.htm" class = "ched" & gt; .NET 101 & lt; / a & gt;
 Tìm hiểu cách .NET Framework hoạt động và các công cụ bạn sẽ cần để thiết lập và chạy trong hướng dẫn bắt đầu nhanh này.
 & lt; span class = "fstory" & gt; & lt; a href = "http://www.builderau.com.au/program/dotnet/soa/Quick_Start_guide_to_Microsoft_NET_development/0,339028399,339271495,00.htm" & gt; Toàn bộ câu chuyện & lt ; / a & gt; & lt; / span & gt;
& lt; / div & gt;
& lt; div id = "story4" & gt;
& lt; a href = "http://www.builderau.com.au/program/css/soa/Undilities_the_CSS_box_model/0,39028392,39269220,00.htm" class = "ched" & gt; Hiểu CSS & lt; / a & gt;
 Trước khi đi sâu vào CSS, hãy tìm hiểu một số trình điều khiển và khái niệm cốt lõi.

 & lt; span class = "fstory" & gt; & lt; a href = "http://www.builderau.com.au/program/css/soa/Undilities_the_CSS_box_model/0,39028392,39269220,00.htm" & gt; Toàn bộ câu chuyện & lt ; / a & gt; & lt; / span & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;

Mona Lisa không có gì đối với chúng ta vào thời điểm này. Hãy thêm một số phong cách cho các div này và làm cho nó giống với các băng chuyền mà chúng ta biết:

& lt; html & gt;
& lt; đầu & gt;
& lt; phong cách & gt;
.storydiv {
 chiều cao: 182px;
 chiều rộng: 355px;
 padding-left: 175px;
 đầu trang: 0px;
 trái: 0px;
}

# câu chuyện1 {
 background: url (http://www.builderau.com.au/i/s/cov/securitychain170110.gif) không lặp lại;
}

# story2 {
 background: url (http://www.builderau.com.au/i/s/cov/browser170110.jpg) không lặp lại;
}

# story3 {
 background: url (http://www.builderau.com.au/i/s/cov/dotnet170110.gif) không lặp lại;
}

# story4 {
 background: url (http://www.builderau.com.au/i/s/cov/tools170110.jpg) không lặp lại;
}

.storyDesc {
 padding-top: 10px;
 padding-right: 8px;
 hiển thị: khối;
}

.fStory {
 padding-top: 10px;
 hiển thị: khối;
 font-weight: bold;
}
& lt; / style & gt;

& lt; / head & gt;
& lt; body & gt;
& lt; div id = "storyContainer" & gt;
& lt; div id = "story1" class = "storydiv" & gt;
& lt; a href = "http://www.builderau.com.au/program/iis/soa/Protect_IIS_log_files_by_moving_them_to_a_secure_location/0,339028427,339271617,00.htm" class = "ched" & gt; Secure IIS & lt; / a & gt;
 & lt; span class = "storydesc" & gt;
 Các tệp nhật ký là điều cần thiết để tạo lại các sự kiện trước khi máy chủ Web IIS bị lỗi. Tìm hiểu cách bảo vệ tệp nhật ký của bạn bằng mẹo này. & Lt; / span & gt;
 & lt; span class = "fstory" & gt; & lt; a href = "http://www.cnet.com.au/software/security/0,39029558,40058242,00.htm" & gt; Toàn bộ câu chuyện & lt; / a & gt; & lt; / span & gt;
& lt; / div & gt;
& lt; div id = "story2" class = "storydiv" & gt;
& lt; a href = "http://www.builderau.com.au/program/html/soa/Microformats_and_Mapping/0,339028420,339271486,00.htm" class = "ched" & gt; User Group Mash & lt; / a & gt;
 & lt; span class = "storydesc" & gt;
 Tìm nhóm người dùng Úc ở gần bạn bằng giao diện bản đồ Google mới của chúng tôi. & Lt; / span & gt;
 & lt; span class = "fstory" & gt; & lt; a href = "http://www.builderau.com.au/program/html/soa/Microformats_and_Mapping/0,339028420,339271486,00.htm" & gt; Toàn bộ câu chuyện & lt ; / a & gt; & lt; / span & gt;
& lt; / div & gt;
& lt; div id = "story3" class = "storydiv" & gt;
& lt; a href = "http://www.builderau.com.au/program/dotnet/soa/Quick_Start_guide_to_Microsoft_NET_development/0,339028399,339271495,00.htm" class = "ched" & gt; .NET 101 & lt; / a & gt;
 & lt; span class = "storydesc" & gt;
 Tìm hiểu cách .NET Framework hoạt động và các công cụ bạn sẽ cần để thiết lập và chạy trong hướng dẫn bắt đầu nhanh này. & Lt; / span & gt;
 & lt; span class = "fstory" & gt; & lt; a href = "http://www.builderau.com.au/program/dotnet/soa/Quick_Start_guide_to_Microsoft_NET_development/0,339028399,339271495,00.htm" & gt; Toàn bộ câu chuyện & lt ; / a & gt; & lt; / span & gt;
& lt; / div & gt;
& lt; div id = "story4" class = "storydiv" & gt;
& lt; a href = "http://www.builderau.com.au/program/css/soa/Undilities_the_CSS_box_model/0,39028392,39269220,00.htm" class = "ched" & gt; Hiểu CSS & lt; / a & gt;
 & lt; span class = "storydesc" & gt;
 Trước khi đi sâu vào CSS, hãy tìm hiểu & lt; br / & gt; một số trình điều khiển và khái niệm cốt lõi. & Lt; / span & gt;

 & lt; span class = "fstory" & gt; & lt; a href = "http://www.builderau.com.au/program/css/soa/Undilities_the_CSS_box_model/0,39028392,39269220,00.htm" & gt; Toàn bộ câu chuyện & lt ; / a & gt; & lt; / span & gt;
& lt; / div & gt;

& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;

Điều này thật tuyệt, nhưng sẽ khó xoay đúng cách nếu tất cả đều theo chiều dọc. Để tất cả các div nằm chồng lên nhau, chúng ta thêm dòng sau vào lớp storydiv:

 vị trí: tuyệt đối; 

Bây giờ chúng tôi có một mớ hỗn độn lớn. Để có một số thứ tự trong đó, chúng tôi ẩn các div có id câu chuyện từ 2 đến 4 với:

 display: none 

Đây là cách băng chuyền của chúng tôi sẽ hiển thị như thế nào khi chúng tôi tải nó – đã đến lúc làm quen với JavaScript.

Xem Thêm  Làm thế nào để căn chỉnh các dải phân cách cạnh nhau - html biểu mẫu cạnh nhau

Đưa JavaScript vào

Tính năng xác định của băng chuyền là nội dung xoay vòng, do đó, chúng tôi sẽ sử dụng một số thủ thuật CSS rẻ tiền để ẩn và hiển thị các div. Chúng tôi sẽ sử dụng mã sau:

& lt; script & gt;
var stor = -1;
var maxstor = 3;
var timeout = 3500;

function autorot () {
showNext ();
timeout = setTimeout ('autorot ();', hết giờ);
}

function xoayDiv (stor) {
 var divs = document.getElementById ("storyContainer"). getElementsByTagName ("div");
 for (var i = 0; i & lt; divs.length; i ++) {
 var div = divs [i];
 if ((div.id! = "")) {
if (i! = stor) {
 div.style.display = "none";
}
khác{
div.style.display = "khối";
}
 }
 }
}

function showNext () {
if (stor & lt; maxstor)
stor ++;
khác
stor = 0;

xoayDiv (stor);
}
& lt; / script & gt;

và trên thẻ body mà chúng tôi đặt:

 & lt; body onload = "autorot ()" & gt; 

Điều gì đang xảy ra ở đây là khi trang laod thì hàm autorot được gọi, hàm này sẽ gọi hàm showNext và sau đó thiết lập thời gian chờ tự nhắc lại sau 3,5 giây – thời gian chờ này là điều khiến băng chuyền chuyển sang trạng thái khác. < br />
Phương thức showNext chỉ đơn giản là xác định câu chuyện nào sẽ được hiển thị và chuyển câu chuyện đó đến hàm xoayDiv, nơi tất cả các hành động sẽ xảy ra. RotDiv tìm nạp tất cả các div là con của div storyContainer và đặt biến style.display của chúng thành không có trừ khi đó là câu chuyện mà chúng ta muốn xem, trong trường hợp đó, nó được đặt để chặn.

Giờ đây, chúng tôi có một băng chuyền chức năng – nhưng nó hầu như không phải là thứ đẹp đẽ hay khả năng sử dụng. Hãy thay đổi điều đó.

Xem Thêm  Cách nối vào một tập hợp trong Python: Python Set Add () và Update () • datagy - thêm phần tử để đặt python

Điều hướng

Băng chuyền cung cấp một cách nhanh chóng để hiển thị nhiều phần nội dung khác nhau, sự cân bằng thường được thực hiện giữa tốc độ xoay và khả năng thực sự đọc nội dung bên ngoài dòng tiêu đề. Nhập nhu cầu về các liên kết điều hướng.

Chúng tôi sẽ thêm một div cho các liên kết điều hướng có thể đưa chúng tôi đến bất kỳ câu chuyện nào trong bốn câu chuyện và cũng cho chúng tôi khả năng kiểm soát màn hình của băng chuyền với các liên kết câu chuyện trước đó và tiếp theo.

Đây là HTML điều hướng của chúng tôi mà chúng tôi chèn trước thẻ nội dung đóng:

 & lt; div id = "nav" & gt; & lt; a href = "javascript: showPrev ()" onClick = "stoprot ()" & gt; & lt; & lt; Trước & lt; / a & gt; | & lt; span id = "nav1" & gt; & lt; a href = "javascript: showStoryOne ()" onClick = "stoprot ()" & gt; 1 & lt; / a & gt; & lt; / span & gt; | & lt; span id = "nav2" & gt; & lt; a href = "javascript: showStoryTwo ()" onClick = "stoprot ()" & gt; 2 & lt; / a & gt; & lt; / span & gt; | & lt; span id = "nav3" & gt; & lt; a href = "javascript: showStoryThree ()" onClick = "stoprot ()" & gt; 3 & lt; / a & gt; & lt; / span & gt; | & lt; span id = "nav4" & gt; & lt; a href = "javascript: showStoryFour ()" onClick = "stoprot ()" & gt; 4 & lt; / a & gt; & lt; / span & gt; | & lt; a href = "javascript: showNext ()" onClick = "stoprot ()" & gt; Tiếp theo & gt; & gt; & lt; / a & gt; & lt; / div & gt;

Có thể thấy, chúng ta sẽ cần thêm một số hàm JavaScript nữa, đây là:

 function showNext () {
if (stor & lt; maxstor)
stor ++;
khác
stor = 0;

xoayDiv (stor);
}

hàm stoprot () {
clearTimeout (thời gian chờ);
}


function showNext () {
if (stor & lt; maxstor)
stor ++;
khác
stor = 0;

xoayDiv (stor);
}

function showPrev () {
nếu (stor & gt; 0)
stor--;
khác
stor = maxstor;

xoayDiv (stor);
}

function showStoryOne () {
stor = 0;
xoayDiv (stor);
}
function showStoryTwo () {
stor = 1;
xoayDiv (stor);
}
function showStoryThree () {
stor = 2;
xoayDiv (stor);
}
function showStoryFour () {
stor = 3;
xoayDiv (stor);
}

Không có gì ngoạn mục, nhưng cần thiết. Chúng tôi cũng cần thay đổi chức năng xoayDiv để cập nhật câu chuyện nào hiện đang được hiển thị, dưới đây là mã cho câu chuyện đó:

function xoayDiv (stor) {
 var divs = document.getElementById ("storyContainer"). getElementsByTagName ("div");
 for (var i = 0; i & lt; divs.length; i ++) {
 var div = divs [i];
 if ((div.id! = "")) {
if (i! = stor) {
 div.style.display = "none";
}
khác{
div.style.display = "khối";
}
 }
 }
 
 var spans = document.getElementById ("nav"). getElementsByTagName ("span");
 for (var i = 0; i & lt; spans.length; i ++) {
 var span = spans [i];
 if ((span.id! = "")) {
nếu (i! = stor)
 span.className = "không có";
khác
span.className = "selStory";
 }
 }
}

Vì có một số kiểu mới, chúng tôi cần thêm chúng vào biểu định kiểu:

 #nav {
font-size: 12px;
vị trí: tuyệt đối;
đầu trang: 100px;
trái: 325px;
}

.selStory {
nền: #eee;
viền: 1px solid # 777;
}

Và chỉ có vậy, băng chuyền giống như spartan của chúng tôi đã hoàn chỉnh về tính năng, hãy xem toàn bộ mã cho đến nay tại đây .

Thêm hiệu ứng – Làm cho nó thực sự thú vị

Nhờ có nguyên mẫu và kịch bản, chúng tôi thực sự có thể hoàn thành chuyến đi này. Giờ đây, chúng tôi sẽ thêm một số hiệu ứng ít nhất có thể mô phỏng những gì chúng tôi thấy trong các bản sao của Flash.

Với một chút công việc và sự sáng tạo, tôi chắc chắn rằng bạn có thể tạo ra một băng chuyền tốt hơn, vượt xa sự sáng tạo nhanh của tôi.

Khi nào không sử dụng JavaScript

Biết khi nào nên sử dụng JavaScript là chưa đủ, để có được kết quả tốt nhất, bạn cũng nên biết khi nào không nên sử dụng JavaScript. Nâng cao hơn mà bạn muốn nhận được ít lợi thế hơn là sử dụng JavaScript.

Hoàn toàn không có cách nào mà JavaScript có thể cạnh tranh với Flash khi nói đến những hiệu ứng bắt mắt và mới nhất, lượng thời gian cần thiết để đạt được mức tương tự nhiều hơn nhiều so với nhược điểm của Flash.

Nếu bạn cần sử dụng video thì flv là một trong những định dạng tốt nhất để sử dụng cho Web. Có một lý do mà YouTube và Google Video sử dụng trình phát flash.

Khi bạn bắt đầu tham gia ngày càng nhiều hơn vào JavaScript, thì càng có nhiều điểm không nhất quán trong trình duyệt. Một cách tuyệt vời để giải quyết vấn đề này là chuẩn hóa nền tảng, chính xác là loại môi trường mà Flash phù hợp.

Xem Thêm  Hướng dẫn C # (C Sharp) - ngôn ngữ lập trình c sắc nét

Kết luận

Phải mất một chút công việc và một vài tách cà phê để đến đây, nhưng đây là kết thúc.

Một điều cần nhớ là nếu bạn cố gắng thay thế Flash một cách cuồng tín thì bạn sẽ không tốt hơn những người cố gắng triển khai Flash một cách cuồng tín.

Nếu tất cả những gì bạn cần là xoay vòng đơn giản thì javascript có thể là tấm vé của bạn, nếu bạn cần hoạt ảnh nâng cao và tất cả các loại thủ thuật thị giác thì Flash sẽ là thứ của bạn.

Hãy nhớ cố gắng sử dụng đúng công cụ cho đúng công việc.


Xem thêm những thông tin liên quan đến chủ đề cách tạo javascript băng chuyền

How To Create An Accordion Using CSS and JavaScript (Bootstrap Accordion) | Project 7/100

  • Tác giả: Basir Payenda
  • Ngày đăng: 2020-12-14
  • Đánh giá: 4 ⭐ ( 7158 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hey, nice to see you

    Welcome to the 7th video of 100 Web Projects Series.
    In this video I am going to create an accordion using HTML, CSS and JavaScript. It is similar to accordion of Bootstrap. If for any reason you don’t want to use Bootstrap’s accordion and want to create your own accordion from scratch then this video is for you.

    Source Code:
    http://bit.ly/3oQ5wVK

    ———————————————————————————————————–
    All previous 7 Projects so far:
    ———————————————————————————————————–
    Project 1: Build navbar using HTML, CSS and JavaScript
    https://youtu.be/hy2OwJE_OEA

    Project 2:Build carousel using HTML, CSS and JavaScript
    https://youtu.be/H4wa5EbCF2k

    Project 3: How to create tab using HTML, CSS and JavaScript
    https://youtu.be/tfL17BG8oa0

    Project 4: How To Create Vertical Tab Using HTML, CSS and JavaScript
    https://youtu.be/taHlMwCOs8o

    Project 5:
    How to create drop down, drop up, drop left and drop right menus using HTML, CSS & JS
    https://youtu.be/FZr4BQezzOw

    Project 6:
    How To Create & Open Multiple Modal With HTML, CSS & JavaScript
    https://youtu.be/H-5LOvht5hQ

    LIKE AND SUBSCRIBE 😀

    accordion WebDevelopment WebDesign

cài đặt “slide” băng chuyền jQuery slick

  • Tác giả: vi.gtainspections.com
  • Đánh giá: 5 ⭐ ( 7887 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đã tạo băng chuyền bằng plugin jQuery slick (http://kenwheeler.github.io/slick/). Tôi muốn sử dụng cài đặt “trang trình bày” để chỉ định phần tử nào được sử dụng trong băng chuyền. Mô tả …

12 Ví Dụ Về Slider Cho Website

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 4 ⭐ ( 9302 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hôm nay chúng ta sẽ đi tìm hiểu cách thiết kế slider bằng cách kết hợp HTML, CSS, Javascript nhé.

Cách tạo thanh menu di động bằng HTML, CSS và JavaScript

  • Tác giả: funix.edu.vn
  • Đánh giá: 5 ⭐ ( 5236 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thế giới ngày càng hướng về thiết bị di động. Nhưng làm thế nào bạn có thể tạo thanh menu trên các thiết bị này bằng các loại mã khác nhau? Cùng FUNiX tìm hiểu về cách tạo menu di động có thể chuyển đổi bằng ngôn ngữ lập trình ưa thích của bạn.

Cách tạo băng chuyền phản ứng thích ứng

  • Tác giả: helpex.vn
  • Đánh giá: 4 ⭐ ( 6050 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Băng chuyền phản ứng Băng chuyền trong React là một trình chiếu hoặc một chuỗi gồm một số hình ảnh. Một Phản ứng băng chuyền được xây dựng với sự giúp đỡ của hiệu ứng chuyển tiếp CSS và mã…

8 CSS & JavaScript Snippets để tạo băng chuyền giới thiệu

  • Tác giả: gialaipc.com.vn
  • Đánh giá: 3 ⭐ ( 3263 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [ad_1]

    Tất cả những người tạo ra một sản phẩm chuyên nghiệp và quan tâm đến người dùng của họ, đều coi trọng việc

Cách dễ dàng tạo băng chuyền dọc Elementor

  • Tác giả: codewatchers.com
  • Đánh giá: 3 ⭐ ( 3387 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Băng chuyền là một tập hợp các biểu ngữ quay vòng hoặc trình chiếu xuất hiện trên trang chủ cửa hàng của bạn. Nó cho phép bạn hiển thị tối đa năm trang trình bày ảnh và văn bản có thể được kết nối vớ…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình