Tạo Slide đơn giản với HTML 5 & JavaScript

HTML 5 được coi là tương lai của công nghệ thiet ke web. Với nhiều ứng dụng và lợi ích vượt bậc trong lĩnh vực thiết kế website. HTML 5 sẽ thống lĩnh thị trường trong thời gian tới. Vậy tại sao bây giờ bạn chưa áp dụng HTML5 trong thiết kế website của bạn. Sau đây cong ty thiet ke web chuyên nghiệp OSVN sẽ hướng dẫn các bạn sử dụng HTML 5 kết hợp javaScrip tạo slide đơn giản cho website.

tao slide don gian voi html javascrip

Khởi động trình soạn thảo code bất kỳ, ở đây tôi sử dụng Adobe Dreamweaver. Các bạn có thể sử dụng các công cụ lập trình hỗ trợ thiết kế web khác. Tạo một file demoslide.html và tạo đoạn code nội dung như sau:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Demo Sử dụng HTML 5 & javaScript tạo hiệu ứng đơn giản</title>
<link href=”CSS/style_tut.css” rel=”stylesheet” type=”text/css”>
<script src=”js/alert_tut.js”></script>
</head>

<body onLoad=”photoA()”>
<div id=”slider”>
<img src=”images/img1.jpg” id=”image” >
<div class=”left_hold”><img onClick=”photo(-1)” class=”left” src=”images/arrow_left.png”></div>
<div class=”right_hold”><img onClick=”photo(1)” class=”right” src=”images/arrow_right.png”></div>
</div>
<div>
Thực hiện bởi: <a href=”http://www.ithietkeweb.net”>Thiết kế web</a> OSVN
</div>
</body>
</html>

Sau đó chúng ta Css cho file demoslide.html. Và javaScript cho nó với 4 file .js

demo su dung html 5 javascript tao slide don gian

Các bạn download Source theo link sau về và thực hành nhé: https://app.box.com/s/jespun7hc6o0qpy9cgc4

Chúc các bạn thực hiện thành công với ví dụ đơn giản sử dụng HTML5 & JavaScript trong việc tạo slide. Để lại thắc mắc ý kiến của bạn phía dưới nhé.

Có thể bạn quan tâm: Kéo và thả trong HTML 5

Comments

Bình luận