Slideshow là yếu tố trợ giúp thẩm mỹ rất tốt cho trang web, hôm nay tôi sẽ giới thiệu với bạn code Javascript để làm Slideshow dạng đơn giản kiểu next, back. Code khá ngắn và cũng không phức tạp lắm.
Đầu tiên bạn phải chuẩn bị vài bức ảnh, bao nhiêu cái tùy bạn, trong ví dụ này tôi lấy 4 bức JPG. Tiếp theo chúng ta cho 4 anh bạn này vào thư mục images, nhớ kiếm cả 2 ảnh next và back để cho vào luôn nếu muốn đẹp, còn không để 2 cái button thô thô như tôi ở trên cũng được, cuối cùng tạo thư mục js để chứa file Javascript. Copy đoạn code sau cho vào file có tên slideshow.js trong thư mục js:
var anhAr = [];
var imgIndex = 0;
function loadAnh() {
for (var i = 0; i < 4; i++) {
anhAr[i] = new Image();
anhAr[i].src = "images"+"/"+"ss"+i"+.jpg"; } }
function next() {
if (imgIndex == 3) {
imgIndex = -1; }
if (imgIndex < 3) {
imgIndex++; document.getElementById("ss").src = anhAr[imgIndex].src; } }
function back() {
if (imgIndex == 0) {
imgIndex = 4; }
if (imgIndex > 0) {
imgIndex–;
document.getElementById("ss").src = anhAr[imgIndex].src; } }Ở trang HTML tại thẻ mở body ta gọi hàm loadAnh bằng đoạn code sau:
<body onload = "loadAnh();"> Dĩ nhiên trước đó bạn phải liên kết với file slideshow.js bằng cách thêm đoạn code dưới đây vào trước thẻ đóng head:
<script type="text/javascript" src="js/slideshow.js"></script>Phần tới bạn sẽ tạo khu vực chứa slideshow trong html, nó sẽ có kiểu như này:
<div id="showanh">
<input type="image" src="images/back.png" height="80" width="80" value="back" onclick="back();" />
<img id="ss" src="images/ss0.jpg" />
<input type="image" src="images/next.png" height="80" width="80" value="next" onclick="next();"/>
</div> <!– showanh –>Để onclick="back();" và onlick="next();" nhằm mục đích khi click vào các nút back và next, nó sẽ gọi các hàm tương ứng. Một chú ý nhỏ, 4 bức ảnh được đặt tên theo thứ tự từ ss0, ss1, ss2 và cuối cùng là ss3. Tại sao lại đặt tên như vậy thì dưới đây tôi sẽ nói sau. Giờ tới phần giải thích code Javascript.
Mảng anhAr và Hàm loadAnh
var anhAr = [];// Khởi tạo mảng anhArvar imgIndex = 0; // Khởi tạo biến imgIndex với giá trị là 0 function loadAnh() { for (var i = 0; i < 4; i++) { anhAr[i] = new Image(); anhAr[i].src = "images"+"/"+"ss"+i+".jpg"; } }Hàm loadAnh – function loadAnh() có mục đích đưa 4 bức ảnh vào mảng anhAr, để làm điều này, ta dùng hàm for chạy từ 0 cho đến nhỏ hơn 4 (tức là 3) với bước nhảy là 1 (i++). Bạn còn nhớ tên ảnh từ ss0 đến ss3 không? Ý nghĩa tên bức ảnh là để tiện dùng trong hàm này.
anhAr[i] = new Image() dùng để khởi tạo phần tử mảng có kiểu là Ảnh (Image).
anhAr[i].src = "images"+"/"+"ss"+i+".jpg" dùng để lấy đường dẫn cho ảnh, nhìn vào đây bạn có thể thấy, ảnh nằm trong thư mục images, với tên là ssi (i từ 0 cho đến 3) và định dạng là .jpg
Vậy cả hàm loadAnh() ở trên sẽ lưu 4 bức ảnh vào mảng anhAr, ghi nhớ cả đường dẫn của những bức ảnh này nữa.
Hàm next
function next() { if (imgIndex == 3) { imgIndex = -1; } if (imgIndex < 3) { imgIndex++; document.getElementById(“ss”).src = anhAr[imgIndex].src; } }Để nhanh chóng hiểu hàm next tôi sẽ giải thích đoạn code trọng tâm của nó là đoạn:
if (imgIndex < 3) { imgIndex++; document.getElementById(“ss”).src = anhAr[imgIndex].src; }Ở đây bạn thấy khi hàm next được gọi, nó sẽ kiểm tra giá trị của imgIndex. Bạn còn nhớ giá trị khởi tạo của imgIndex ta để là 0, và đây là giá trị của imgIndex khi ta bật trang lần đầu.
Vì 0 nhỏ hơn 3, thỏa mãn điều kiện nên, imgIndex được chỉ thị tăng lên 1 đơn vị (imgIndex++), sau đó src của id có tên là ss sẽ được thay thế bằng src của anhAr[1]id có tên ss trong html chính là thẻ <img id="ss" src="images/ss0.jpg" /> hay nói cách khác, bằng việc nhấn nút next, đoạn code trên sẽ thay đổi thành:
<img id="ss" src="images/ss1.jpg" /> Tức là bức ảnh ss0.jpg sẽ được thay thế bằng ss1.jpg
Điều gì xẩy ra khi imgIndex = 3, đây là lúc thích hợp để giải thích đoạn code đầu tiên của nút next:
if (imgIndex == 3) {imgIndex = -1;}Điều này có nghĩa là nếu đến bức ảnh cuối cùng, hãy gán imgIndex = -1, sau đó vì -1 nhỏ hơn 3 nên imgIndex lại tăng lên 1, tức là về 0. Nói cách khác, ta sẽ được đưa về bức ảnh đầu tiên tức là ss0.jpg.
Vậy mục đích của đoạn code trên giúp ta có thể next vô tận, nếu không có nó, đến thời điểm img = 3, bạn không thể next được nữa.
Về phần code back, nó cũng hoàn toàn tương tự, điểm khác biệt duy nhất là nó trái ngược với next mà thôi, mọi giải thích vẫn nguyên như cũ.
Làm SlideShow trong Blogspot
Nghe hấp dẫn đúng không, tôi thử làm ngay và luôn nhé, vì dùng blogspot, cho nên đường dẫn ảnh không được đẹp như trên, nhưng không sao, chúng ta chỉ cần thay đổi code một chút là được, cụ thể chúng ta phải gán từng phần tử của mảng với địa chỉ cụ thể của ảnh như dưới đây:
var anhAr = [];
var imgIndex = 0;
anhAr[0] = new Image();
anhAr[0].src = "https://kiencang.net/wp-content/uploads/2013/10/stock-photo-mist.jpg";
anhAr[1] = new Image();
anhAr[1].src = "http://3.bp.blogspot.com/-6PmEQwFeqXk/UmErtUZn34I/AAAAAAAACus/1iZDp_ZcYRk/s1600/stock-photo-lanka.jpg";
anhAr[2] = new Image();
anhAr[2].src = "http://3.bp.blogspot.com/-eaGFS-JB9lg/UmErtq4UDYI/AAAAAAAACu0/9mO3c6KTEzE/s1600/stock-photo-human-hand.jpg";
anhAr[3] = new Image();
anhAr[3].src = "http://3.bp.blogspot.com/-H2dI5vz-GnI/UmErpEFxpzI/AAAAAAAACug/4rXruthEtY8/s1600/stock-casting.jpg";Những phần code còn lại thì giống nguyên, không cần thay đổi gì cả.
Comments are closed.