jQuery Image Rotator
- October 17, 2010
- 33 comments
Để tiếp tục những bài thực hành nhỏ với jQuery, trong bài này chúng ta sẽ xây dựng một Image Rotator đơn giản. Có nhiều bạn comment hỏi sao không làm thêm next prev v.v… Những cái đó người ta đã có hết plugin rồi. Nếu bạn muốn có thể download plugin về để làm.
Tôi cũng đã có video hướng dẫn về cách sử dụng plugin Looped Slider trong series về WP theme, nếu muốn bạn cũng có thể xem. Bài này với mục đích quan trọng nhất là cho bạn có cơ hội thực hành những kiến thức đã học. Vì học code cách lẹ nhất là thực hành. Thứ hai đôi khi bạn không muốn dùng những Plugin đồ sộ cho những tác vụ đơn giản. Đôi khi bạn chỉ muốn nó tự động chuyển ảnh thôi chứ không muốn những chức năng khác.
Chú ý: Tuy bài này làm về hình ảnh, nhưng bạn có thể áp dụng tương tự cho các thành phần khác như thẻ div, p hoặc li để tạo ra hiệu ứng thay đổi nội dung chữ cũng được.
Đính chính:
Ở đoạn gần cuối trong video tôi bị nhầm một giá trị là curImg và nextImg cho nên kết quả sau vòng lặp đầu tiên sẽ bị giật. Bạn phải đổi lại với dòng mã sau: (đổi từ nextImg -> curImg
curImg.removeClass('previous');
Rất cảm ờn bạn Toàn đã chỉ ra lỗi này
Thời lượng: 17:30
Download định dạng .mp4 chất lượng cao:MediaFire
Dung lượng: 82.23MB
« Căn Bản PHP – Bài 11 – Phần 2
Web Servers trong phát triển Web »
giọng anh DW hài quá =)).vui tính thiệt.a làm mấy bài sét layout cho trang web đi anh
ông anh vui tính vãi ra…
) 
)
Demon upload lại video nhé. Mình không download được nó.
Link download của bạn: http://www.mediafire.com/?6biz5ugsg9yjtbv
good good..!!
thanks!
Anh có thể cho hỏi thế này:
VD e muốn tạo cũng SlideShow,Next,Prev Images, nhưng mà là dữ liệu load lên động từ database, và hơn nữa là nó có nhiều cấp
Như thế này và ko dựa vào css, (absolute, relatived, z-index)
thì như thế nào ạ, e có làm thử nhưng nó chạy ko như ý muốn.
Nên e muốn hỏi thử cách này có khả quan không?
………………..
………..
Thanks
Anh có thể chĩ cho em biết cách nào chạy ảnh ngẩu nhiên không…có phuơng thức ngẫu nhiên nào trong jquery k ta….
Thanks anh
Thực sự em thấy bài này của anh làm k đc hay…quá phức tạp…hoàn toàn có thể viết ngắn gọn Jquery như thế này là chạy OK lun mà….
$('#wrapper li:gt(0)').hide()//Cho ẩn tấc cả các ảnh trừ tấm ảnh đầu tiên setInterval(function(){ $('#wrapper li:first').fadeOut(1000).next().fadeIn().end().appendTo('#wrapper ul'); },2000);//sau 2 giây đổi bannerCám ơn A DW ! E là newbie cho E hỏi chút làm sao chèn hiệu ứng này vô trang Web của mình vậy A ?
2 cách:
Cách 1: chèn vào trong bất kì chỗ nào trong web
Đoạn JQ
Cách 2: Tạo 1 file xyz.js trong đó chứa code JQ
Vào trang web chọn
Đừng quên load file JQuery.js trước nhé
chào DW, thấy các video của anh rất hay và “hài” ,đặc biệt là phù hợp với mọi đối tuong, hy vong anh se cho ra nhieu video cho cac ban.
E là người mới học về web, không biết anh có tài liệu hay video nào hướng dẫn từ a đến z để có 1 trang web đơn giản có admin quản lý.
từ xưa nay, e dùng opencart ko ah, nên chưa biết cách tạo 1 website từ đầu. mong anh góp ý cho e nên học từ đâu.
mong anh có thể hồi thư cho em qua email nhé.
có dịp gặp nhậu nhé.
cảm ơn anh rất nhiều, và em cũng xin nhờ anh tý anh nhé!
anh có thể quay vidoe anh làm template một giao diện hoàn chỉnh ko ạh…em làm lập trình mà kém Design quá. Mong anh giúp!
Thank anh nhiều:D
Trang của anh đúng là dành cho dân mới vào nghề hay thật, huy vọng trang Web càng ngày có những tut hay hơn để phục vụ các webmaster mới vào nghề như bọn em! Chúc anh may mắn trong công việc và cuộc sống
Anh vui tính thật, ngồi xem hướng dẫn của anh, nhiều lúc cười 1 mình, người phòng bên không biết em cười do đâu.
anh demon warlock cho em hỏi là anh có làm video hướng dẫn chi tiết module đăng kí đăng nhập bằng php không?nếu có cho em xin,e cảm ơn.em rất thích những video mà anh làm đó.thanks anh nhìu nhìu
Anh sẽ làm trong vài bữa nữa!
Em muốn làm slider mà minh có thể bỏ thêm ảnh vào folder mà không cần sửa code lại. anh DW chỉ giúp em với. Thanks
thank bác nhiều nha. website rất tuyệt hi vong websiete hoạt đông luôn luôn để anh em có cái để học hỏi.
Chòy học mà, e tự tìm hiểu chút đi, jquey ui dễ sử dụng mà đâu cần hướng dẫn
Em muốn hỏi về cách tạo processbar tiếng trình upload. jquery làm được không bác?
Được chứ! em có thể sử dụng jQuery UI để làm
http://jqueryui.com/demos/progressbar
Có nhiều cái có sẵn thật bác à. Nhưng nếu có thể bác làm một cái demo để đơn giản nó hơn được ko ạ?
Cái image ratator này bị lỗi rồi bác DW ơi chạy 1 hồi nó bị giựt giựt
Ái dà ku em tinh mắt quá! trong video anh viết nhầm đoạn cuối. Để anh đính chính lại ở trên. Thx em rất nhiều!
Cái ý tưởng Image Rotator dùng Photoshop của Bác DW zui thật đấy đúng là có 1-0-2 \m/ . đến đoạn định kết thúc không khỏi phì cười
).
Cám ơn bác vì bài viết hay
hay wa ah ah???
ĐẠI CA DW mở màn video này zui tính quá ^^ .
làm em cười vãi ^^, thanks anh nhiều!
sao e ko thấy cái quảnng cáo nào để click hết vậy a:-?
Phía dưới video, bên phải hình JQuery màu đỏ là link quãng cáo đó bạn. Hoặc bạn có thể click link ở trang chủ, nằm phía trên bài viết đầu tiên.
Cá nhân mình thì không thích chơi plugIn lắm , thích tự coding hơn , có lẽ mình không có nhiều kinh nghiệm dùng plug in lắm , lần đầu dùng thấy nó khó khăn sao sao ấy , mình phải chỉnh sữa lại CSS theo ý mình mà đôi khi phân CSS lại liên quan tơi cái jquery sau này nên nhìu khi không chịu chạy.rồi còn phụ thuộc vào cách thiết kế HTML nhìu khi cách bố trí đó gây khó khăn cho việc load CSDL vào sau này.
Tưởng demon warlock kết thúc tutorial kiểu đó nữa, tôi cũng phì cười , không ngời lúc sau admin cũng cuời theo …tuởng giở trò gì hay nữa.
video hữu ích với tôi, thanks