Có 3 thứ ngu dốt: không biết những gì mình cần biết, không rành những gì mình biết và biết những gì mình không cần biết
La Rochefoucould
Tags thiết kế website
Tên miền, Đăng ký tên miền,
thiet ke web, chuyen thiet ke web,
Thiết kế website,
chuyên thiết kế website,
tu van web,tư vấn web,
dich vu website,
dịch vụ website,
web design,
giải pháp thiết kế website,
website thương mại,
quang ba web,
quang ba website,
dịch vụ SEO,
tutorial,
thiết kế website bán hàng,
thiết kế website doanh nghiệp,
hosting,
từ khóa,
công ty thiết kế web,
Website template,
thư viện website
Tạo Slide trình diễn bài viết với html, Css và jquery ( 2455 lượt xem )
Bạn làm theo bài viết sau để hiểu cách làm. Trong bài sau tôi sẽ quay video hướng dẫn Kết nối và lấy bài viết từ SQL server.
Trong Slide này có 2 phần, phần bên trái là phần hiển thị, phần bên phải là danh sách các bài viết. Bình thường thủ thuật sẽ tự thay đổi bài viết trong 1 khoảng thời gian nhất định, tùy vào mình cài đặt. Khi nhấp vào 1 bài viết nào trong phần bên phải, thì bài viết sẽ hiển thị ảnh thumbnail lớn vào tiêu đề (hoặc có thể là đoạn mô tả nhỏ về bài viết) ở phần bên trái.
Để làm được bạn cần có các thư viện cần thiết của jquery. (Download ở liên kết cuối bài) sau đó viết mã trong trang html như sau:
+ Trong phần thẻ head bạn cần chèn đoạn mã sau: Bạn chú ý đến thứ tự của các file .js không được thay đổi
01 |
<script type="text/javascript" src="jquery.min.js"></script> |
02 |
<script src="jquery-ui.min.js" type="text/javascript"></script> |
03 |
<script type="text/javascript"> |
04 |
$(document).ready(function(){ |
05 |
$("#featured > ul").tabs({ |
09 |
}).tabs("rotate", 2000, true); |
12 |
<style type="text/css"> |
15 |
border:1px solid #ccc; |
19 |
#featured ul.ui-tabs-nav{ |
26 |
#featured ul.ui-tabs-nav li{ |
27 |
padding:1px 0; padding-left:13px; |
31 |
#featured ul.ui-tabs-nav li img{ |
32 |
float:left; margin:2px 5px; |
35 |
border:1px solid #eee; |
37 |
#featured ul.ui-tabs-nav li span{ |
38 |
font-size:11px; font-family:Verdana; |
42 |
#featured li.ui-tabs-nav-item a{ |
45 |
color:#333; background:#fff; |
48 |
#featured li.ui-tabs-nav-item a:hover{ |
51 |
#featured li.ui-tabs-selected{ |
52 |
background: left -5px no-repeat; |
54 |
#featured ul.ui-tabs-nav li.ui-tabs-selected a{ |
57 |
#featured .ui-tabs-panel{ |
60 |
background:#999; position:relative; |
62 |
#featured .ui-tabs-panel .info{ |
71 |
font-size:12px; font-family:Georgia, serif; |
72 |
color:#fff; padding:5px; margin:0; |
77 |
font-family:Verdana; font-size:11px; |
78 |
line-height:15px; color:#f0f0f0; |
84 |
#featured .info a:hover{ |
85 |
text-decoration:underline; |
87 |
#featured .ui-tabs-hide{ |
90 |
#featured .ui-tabs-nav-item img{ |
+ Tiếp theo trong thẻ body của trang bạn chèn đoạn mã như sau:
02 |
<ul class="ui-tabs-nav"> |
03 |
<li class="ui-tabs-nav-item" id="nav-fragment-1"> |
04 |
<a href="#fragment-1"> |
05 |
<img src="link anh bai viet 1" alt=""/> |
06 |
<span>Tieu de bai viet 1</span> |
09 |
<li class="ui-tabs-nav-item" id="nav-fragment-2"> |
10 |
<a href="#fragment-2"> |
11 |
<img src="link anh bai viet 2" alt=""/> |
12 |
<span>{Tieu de bai viet 2}</span> |
15 |
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-3"> |
16 |
<a href="#fragment-3"> |
17 |
<img src="link anh bai viet 3" alt=""> |
18 |
<span>{Tieu de bai viet 3}</span> |
21 |
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-4"> |
22 |
<a href="#fragment-4"> |
23 |
<img src="link anh bai viet 4" alt=""> |
24 |
<span>{Tieu de bai viet 4}</span> |
27 |
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-5"> |
28 |
<a href="#fragment-5"> |
29 |
<img src="link anh bai viet 5" alt=""> |
30 |
<span>{Tieu de bai viet 5}</span> |
34 |
<div style="" id="fragment-1" class="ui-tabs-panel ui-tabs-hide"> |
35 |
<a style="color: rgb(255, 255, 255);" href="link bai viet 1"> |
36 |
<img src="link anh bai viet 1" alt="" width="337" height="250"/> |
39 |
<h2><a href="link bai viet 1">{Tieu de bai viet 1}</a></h2> |
43 |
<div style="" id="fragment-2" class="ui-tabs-panel ui-tabs-hide"> |
44 |
<a style="color: rgb(255, 255, 255);" href="link bai viet 2"> |
45 |
<img src="link anh bai viet 2" alt="" width="337" height="250"/> |
48 |
<h2><a href="link bai viet 2">{Tieu de bai viet 2}</a></h2> |
52 |
<div style="" id="fragment-3" class="ui-tabs-panel ui-tabs-hide"> |
53 |
<a style="color: rgb(255, 255, 255);" href="link bai viet 3"> |
54 |
<img src="link anh bai viet 3" alt="" width="337" height="250"/> |
57 |
<h2><a href="link bai viet 3">{Tieu de bai viet 3}</a></h2> |
61 |
<div style="" id="fragment-4" class="ui-tabs-panel ui-tabs-hide"> |
62 |
<a style="color: rgb(255, 255, 255);" href="link bai viet 4"> |
63 |
<img src="link anh bai viet 4" alt="" width="337" height="250"/> |
66 |
<h2><a href="link bai viet 4">{Tieu de bai viet 4}</a></h2> |
70 |
<div style="" id="fragment-5" class="ui-tabs-panel ui-tabs-hide"> |
71 |
<a style="color: rgb(255, 255, 255);" href="link bai viet 5"> |
72 |
<img src="link anh bai viet 5" alt="" width="337" height="250"/> |
75 |
<h2><a href="link bai viet 5">{Tieu de bai viet 5}</a></h2> |
Trong các đoạn code tren bạn chú ý:
- Thay các tiêu đề bài viết và các đường dẫn ảnh tương ứng
- tabs("rotate", 2000, true); trong đó 2000 là khoảng thời gian trễ để chuyển bài viết là số mili giây (2000 tương ứng với 2s).
- Các cấu hình khác bạn có thể xem hình minh họa sau để chỉnh sửa theo yêu cầu của bạn.
Phuc Thinh Website