CHINH PHỤC
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.
CHINH PHỤC

Cộng đồng Forumotion Việt Nam

Đăng nhập

Ghi nhớ
Latest topics
» Tôi sẽ đỗ đại học!
by nightWalker 9/2/2024, 7:00 pm

» Kỷ niệm xưa của chúng ta
by nightWalker 9/2/2024, 6:49 pm

» Bị lệch khung cần người giúp đỡ
by webhuy28 7/10/2021, 10:34 pm

» [HỎI ĐÁP] Danh sách bạn bè không thể hiển thị
by anhdaodaica1 2/10/2021, 10:04 pm

» [HỎI ĐÁP] Thông tin tài khoản không thể lưu thay đổi
by anhdaodaica1 2/10/2021, 6:05 am

» Phim bố già full
by huy.pc52 24/8/2021, 12:20 am

» Xin code Box HTML cho Forumvi
by Larva 1/7/2021, 12:57 pm

» Hello Anh Em Chinh phục
by HoàngTửNaivip5p 28/5/2021, 5:03 am

» Trang chủ tin tức cập nhật HOT 2016
by kenbi05 1/1/2020, 11:02 pm

» Không Dang9 bài viết = hình ảnh được
by huy.pc52 30/11/2019, 10:52 am

» CHÚC ANH EM NĂM MỚI VUI VẺ TRÀNG ĐẦY HẠNH PHÚC
by sps.kủn 12/2/2019, 1:16 pm

» Skin CNTT-K3 2015 (Full Mod)[✔]
by kenbi05 6/7/2018, 12:30 am

» baivong, handsome,....
by sps.kủn 29/6/2018, 1:54 pm

» [SHARE] SKIN ĐHFM.V7 @PUNBB
by tonyhoaivu 2/5/2018, 2:37 pm

» Share Skin Xanh Dương Cùi Bắp
by tonyhoaivu 28/4/2018, 5:57 pm

» Xin Skin http://v1.hotrofm.net/
by tonyhoaivu 28/4/2018, 5:45 pm

» Xin Skin Rao Vặt
by tonyhoaivu 15/4/2018, 12:07 pm

» Làm Sao Để Xóa Khung Này
by tonyhoaivu 14/4/2018, 7:18 pm

» [Lập nhóm]Lập nhóm fm
by vietkanpy 31/3/2018, 11:53 am

» [Help] về server úp ảnh của phutu [✔]
by baivong 17/3/2018, 10:18 pm

» Đừng khóc cho “tôi – Chinh Phục!”…
by AnHung 27/2/2018, 5:33 pm

» [Share] Skin Diendandaihoc.com [ Punbb ] [✔]
by Lu Mờ 13/2/2018, 7:28 pm

» Mời mấy thím vào groups Forumotion Việt Nam.
by dang02315 13/2/2018, 12:40 am

» Có thể làm các kiểu giao diện được không?
by Lu Mờ 9/2/2018, 3:40 pm

» ltns chinhphuc.info
by Shinichi Kudo 27/1/2018, 2:27 am

Top posting users this week
No user


Banner tự động thay đổi ảnh

+4
ngô
[D]ark[R]aven
lop12a7
hunghsmn
8 posters

CHINH PHỤC :: KHU VỰC CHIA SẺ :: Code, Javascript, CSS

Go down

Banner tự động thay đổi ảnh Empty Banner tự động thay đổi ảnh

Bài gửi by hunghsmn 23/3/2011, 3:44 pm

Chắc các bạn đã quen với kiểu banner chuyển trang đã được chia sẻ trong ChinhPhuc.
Bây giờ mình giới thiệu để các bạn tự làm lấy một kiểu tương tự.
So với kiểu banner chuyển trang đã chia sẻ thì kiểu này có:
- Ưu điểm : load rất nhẹ, nhẹ hơn rất nhiều so với kiểu kia nên không gây khó chịu cho khách khi ghé thăm, rất dễ làm ( Vì code là do một phần mềm trực tuyến tạo ra mà)
- Nhược điểm : Không có hiệu ứng chuyển cảnh mà ảnh chỉ nhảy lần lược từ ảnh này sang ảnh khác.

Bây giờ các bạn dán đoạn code này vào một trang html mới rồi xem thử nhé:

Code:
<script type="text/javascript">
var imgs1 = new Array("https://lh4.googleusercontent.com/_RffU5Jf7nK4/TP3lRNhSXLI/AAAAAAAAA4s/fWPpyLC1vqw/DSC03487.jpg","https://lh3.googleusercontent.com/_RffU5Jf7nK4/TP3lQwOCnHI/AAAAAAAAA4k/1-43a1g6xxo/DSC03532.jpg","https://lh6.googleusercontent.com/_RffU5Jf7nK4/TP4T8WeKfpI/AAAAAAAAA5c/xYWkbxnVYrc/Img13.jpg","https://lh4.googleusercontent.com/_RffU5Jf7nK4/TP4T8uNTIDI/AAAAAAAAA5g/zy_6__1pgu0/Img14.jpg","https://lh5.googleusercontent.com/_RffU5Jf7nK4/TP4T8nL0AhI/AAAAAAAAA5k/L0CfD1zVZu8/Img15.jpg");
var alt1 = new Array("A1","A2","A3","A4","A5");
var currentAd1 = 0;
var imgCt1 = 5;
function cycle1() {
  if (currentAd1 == imgCt1) {
    currentAd1 = 0;
  }
var banner1 = document.getElementById('adBanner1');
var link1 = document.getElementById('adLink1');
  banner1.src=imgs1[currentAd1]
  banner1.alt=alt1[currentAd1]
  currentAd1++;
}
  window.setInterval("cycle1()",3000);
</script>
<img src="https://lh4.googleusercontent.com/_RffU5Jf7nK4/TP3lRNhSXLI/AAAAAAAAA4s/fWPpyLC1vqw/DSC03487.jpg" id="adBanner1" border="0" width="640" height="350"></a>

CÒn để làm thật thì mình không cần hướng dẫn gì hết, cứ vào đây là tự nhiên làm được:

Code:
http://www.htmlbasix.com/banner.shtml
hunghsmn
hunghsmn
CPYellowMember
CPYellowMember

Firefox PunBB
Ngày đăng ký : 04/06/2009
Số bài : 3212
CPP : 2751
Châm ngôn sống : Học, học nữa, học mãi

http://www.trekhuyettat.org

Về Đầu Trang Go down

Banner tự động thay đổi ảnh Empty Re: Banner tự động thay đổi ảnh

Bài gửi by lop12a7 23/3/2011, 6:52 pm

thanks pác hùng!
pác hùng là người trong ảnh hả?
Phải ko ta? Nghi ngờ
lop12a7
lop12a7
CPMember
CPMember

Firefox PunBB
Ngày đăng ký : 13/12/2010
Số bài : 263
CPP : 46

http://gisk04.tk

Về Đầu Trang Go down

Banner tự động thay đổi ảnh Empty Re: Banner tự động thay đổi ảnh

Bài gửi by [D]ark[R]aven 23/3/2011, 7:54 pm

Dùng làm banner trên cùng forum có tự đổi ko vậy anh ?
[D]ark[R]aven
[D]ark[R]aven
CPMember
CPMember

Firefox PunBB
Ngày đăng ký : 31/12/2010
Số bài : 202
CPP : 162

http://cafam.123.st

Về Đầu Trang Go down

Banner tự động thay đổi ảnh Empty Re: Banner tự động thay đổi ảnh

Bài gửi by hunghsmn 23/3/2011, 8:25 pm

@lop12a7: uh bác với một số thành viên diễn đàn, nhà báo và các cháu khuyết tật
[D]ark[R]aven: Được. Nó có một ưu điểm rất dễ thương là load nhẹ. Chuẩn bị trước những tấm ảnh có cùng kích thước để làm banner, sau đó vào chương trình mình đã nói làm tí xíu là xong. Lấy code cho vào header.
hunghsmn
hunghsmn
CPYellowMember
CPYellowMember

Firefox PunBB
Ngày đăng ký : 04/06/2009
Số bài : 3212
CPP : 2751
Châm ngôn sống : Học, học nữa, học mãi

http://www.trekhuyettat.org

Về Đầu Trang Go down

Banner tự động thay đổi ảnh Empty Re: Banner tự động thay đổi ảnh

Bài gửi by lop12a7 23/3/2011, 8:41 pm

cái này tạo 1 trang html rồi paste vào header được ko pác hùng?
chứ copy nguyên cái code đó ét vào header thì hơi gay!
Good good
lop12a7
lop12a7
CPMember
CPMember

Firefox PunBB
Ngày đăng ký : 13/12/2010
Số bài : 263
CPP : 46

http://gisk04.tk

Về Đầu Trang Go down

Banner tự động thay đổi ảnh Empty Re: Banner tự động thay đổi ảnh

Bài gửi by ngô 28/3/2011, 11:31 am

Mình làm không được ... haizzzz , bác có thể hướng dẫn lỹ hơn không , lần đầu làm 4rum chả hiểu gì hết
ngô
ngô
CPMember
CPMember

Chrome PunBB
Ngày đăng ký : 23/03/2011
Số bài : 10
CPP : 5
Châm ngôn sống : 123

http://parksunyoungvn.forumvi.net/

Về Đầu Trang Go down

Banner tự động thay đổi ảnh Empty Re: Banner tự động thay đổi ảnh

Bài gửi by baivong 28/3/2011, 11:36 am

Lần đầu làm thì nên kiếm mấy code đơn giản trong mục dành cho người mới, khi wen tay là tực khắc làm dc Banner tự động thay đổi ảnh Th_50
baivong
baivong
CPYellowMember
CPYellowMember

Firefox Invision
Ngày đăng ký : 02/04/2010
Số bài : 3114
CPP : 1212
Châm ngôn sống : Sống để được chết một lần.

http://devs.forumvi.com

Về Đầu Trang Go down

Banner tự động thay đổi ảnh Empty Re: Banner tự động thay đổi ảnh

Bài gửi by Hamano Michiyo 7/4/2011, 4:00 pm

Ừm, cái này em thấy nhiều 4rum có rồi mà chưa biết làm thế nào, thanks bác nhá Good good
Hamano Michiyo
Hamano Michiyo
CPMember
CPMember

Firefox PunBB
Ngày đăng ký : 13/02/2011
Số bài : 42
CPP : 3

http://ranmorifc.forum-viet.net/

Về Đầu Trang Go down

Banner tự động thay đổi ảnh Empty Re: Banner tự động thay đổi ảnh

Bài gửi by Hamano Michiyo 12/4/2011, 5:52 pm

Chậc, có cách nào khắc phục nhược điểm hiệu ứng chuyển cảnh không bác
Hamano Michiyo
Hamano Michiyo
CPMember
CPMember

Firefox PunBB
Ngày đăng ký : 13/02/2011
Số bài : 42
CPP : 3

http://ranmorifc.forum-viet.net/

Về Đầu Trang Go down

Banner tự động thay đổi ảnh Empty Re: Banner tự động thay đổi ảnh

Bài gửi by MarkChan 12/4/2011, 7:01 pm

Hamano Michiyo đã viết:Chậc, có cách nào khắc phục nhược điểm hiệu ứng chuyển cảnh không bác

là hiệu ứng mố ~ dùng từ chuyên nghiệp quá mình ko hiểu #-o
avatar
MarkChan
CPPurpleMember
CPPurpleMember

Chrome PhpBB2
Ngày đăng ký : 24/08/2010
Số bài : 1041
CPP : 665
Châm ngôn sống : Đã tốt nghiệp khoa chém gió nghệ thuật

http://gtopvn.net

Về Đầu Trang Go down

Banner tự động thay đổi ảnh Empty Re: Banner tự động thay đổi ảnh

Bài gửi by hunghsmn 14/2/2013, 8:34 pm

Hamano Michiyo đã viết:Chậc, có cách nào khắc phục nhược điểm hiệu ứng chuyển cảnh không bác
CÓ! Háng xịn đây.
Demo: http://hunghsmn.blogspot.com
COde:
1/ up lại (hay không tùy ý) rồi cho cả đống script này vào phần <head>...</head> của overall_header (Nặng ráng chịu)
Code:
<link rel="stylesheet" type="text/css" href="http://www.hunghsmn.info.vn/CSS_JS/Header/ddsmoothmenu.css" />
<link href="http://www.hunghsmn.info.vn/CSS_JS/Header/FixIE.css" rel="stylesheet" type="text/css" />
<script src="http://www.hunghsmn.info.vn/CSS_JS/Header/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://www.hunghsmn.info.vn/CSS_JS/Header/ddsmoothmenu.js" type="text/javascript"></script>
<script src="http://www.hunghsmn.info.vn/CSS_JS/Header/function.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://www.hunghsmn.info.vn/CSS_JS/Header/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.hunghsmn.info.vn/CSS_JS/Header/style_banner.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.hunghsmn.info.vn/CSS_JS/Header/jquery.nivo.slider.pack.js"></script>
2/ Thay code này vào vị trí của banner trong overall_header:
Code:
<div class="ddsmoothmenu" id="smoothmenu1"><ul id="smoothmenu1"></ul></div>
<div class="Banner">
  <div id="slider" class="nivoSlider">
 Đặt các link ảnh ở đây.Chuẩn bị trước những tấm ảnh 970px x 360px . nếu dùng kích thước khác thì phải sửa luôn cả trong style_banner.css 
  </div>
 </div>
(Hàng view-sourrce)
hunghsmn
hunghsmn
CPYellowMember
CPYellowMember

Firefox PunBB
Ngày đăng ký : 04/06/2009
Số bài : 3212
CPP : 2751
Châm ngôn sống : Học, học nữa, học mãi

http://www.trekhuyettat.org

Về Đầu Trang Go down

Banner tự động thay đổi ảnh Empty Re: Banner tự động thay đổi ảnh

Bài gửi by Kid Knight 23/4/2013, 6:04 pm

lop12a7 đã viết:cái này tạo 1 trang html rồi paste vào header được ko pác hùng?
chứ copy nguyên cái code đó ét vào header thì hơi gay!
Banner tự động thay đổi ảnh 667158

có thể tìm đoạn này
Code:

var imgs1 = new
Array("https://lh4.googleusercontent.com/_RffU5Jf7nK4/TP3lRNhSXLI/AAAAAAAAA4s/fWPpyLC1vqw/DSC03487.jpg","https://lh3.googleusercontent.com/_RffU5Jf7nK4/TP3lQwOCnHI/AAAAAAAAA4k/1-43a1g6xxo/DSC03532.jpg","https://lh6.googleusercontent.com/_RffU5Jf7nK4/TP4T8WeKfpI/AAAAAAAAA5c/xYWkbxnVYrc/Img13.jpg","https://lh4.googleusercontent.com/_RffU5Jf7nK4/TP4T8uNTIDI/AAAAAAAAA5g/zy_6__1pgu0/Img14.jpg","https://lh5.googleusercontent.com/_RffU5Jf7nK4/TP4T8nL0AhI/AAAAAAAAA5k/L0CfD1zVZu8/Img15.jpg");
var alt1 = new Array("A1","A2","A3","A4","A5");
var currentAd1 = 0;
var imgCt1 = 5;
function cycle1() {
  if (currentAd1 == imgCt1) {
    currentAd1 = 0;
  }
var banner1 = document.getElementById('adBanner1');
var link1 = document.getElementById('adLink1');
  banner1.src=imgs1[currentAd1]
  banner1.alt=alt1[currentAd1]
  currentAd1++;
}
  window.setInterval("cycle1()",3000);

tạo 1 javascrip mới và lấy link cho vào thẻ này

<script src="link js" type="text/javascript"></script>

Coppy đoạn đó cho vào head
Kid Knight
Kid Knight
CPModerator
CPModerator

Chrome PhpBB2
Ngày đăng ký : 01/02/2013
Số bài : 860
CPP : 651
Châm ngôn sống : nhìn cái gì ?

http://tsubasa.yourme.net

Về Đầu Trang Go down

Banner tự động thay đổi ảnh Empty Re: Banner tự động thay đổi ảnh

Bài gửi by Sponsored content


Sponsored content


Về Đầu Trang Go down

Về Đầu Trang

- Similar topics

CHINH PHỤC :: KHU VỰC CHIA SẺ :: Code, Javascript, CSS

 
Permissions in this forum:
Bạn không có quyền trả lời bài viết