Hướng dẫn Tự đổi banner khi reload trang

Blue

Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
912
Được Like
1,532
Sau một giờ thu thập các hàm javascript và jquery cần thiết mình đã tự tạo ra code đổi banner một cách ngẫu nhiên mỗi khi reload lại trang web và đã thành công. Với code này bạn có thể áp dụng cho mọi nền tảng code, nó chỉ chạy trên html, nhẹ nhàng, dễ sử dụng.

Các bạn thử gắn vào các khu vực quảng cáo trên site XenForo xem sao nhé:

Mã:
<style>
.banner_top {
    margin-top:10px;width:610px;margin:0 auto;
}
.banner_top:before, .banner_top:after {
    clear:both;
}
.banner_top a:nth-child(even) img {
    float:left;width:calc(50% - 2px);margin-bottom:4px;
}
.banner_top a:nth-child(odd) img {
    float:right;width:calc(50% - 2px);margin-bottom:4px;
}
</style>
<script>
function range(start, end) {
    var foo = [];
    for (var i = start; i <= end; i++) {
        foo.push(i);
    }
    return foo;
}
function shuffleArray(end) {
   var array = range(1, end);
   var temp = [];
   var len=array.length;
   while(len){
      temp.push(array.splice(Math.floor(Math.random()*array.length),1)[0]);
      len--;
   }
   return temp;
}
$(document).ready(function(){
    var subject = $('.banner_top').html();
    var end = $('.banner_top img').length;
    var result = subject.split("\n");
    var arr = shuffleArray(end);
    var banner = '';
    var index = 0;
    index = Math.floor(Math.random()*banner.length);
    banner = result[arr[0]] + result[arr[1]];
//Đang hiện 2 banner, bạn có thể thêm nữa nếu muốn
//Ví dụ: banner = result[arr[0]] + result[arr[1]] + result[arr[2]] + result[arr[3]];
    $('.banner_top').html(banner);
});
</script>

<!-- Dưới đây là khu vực để bạn cung cấp banner
Mỗi dòng từ <a đến </a> là 1 banner, bạn thêm bớt thoải mái nhưng không để thừa dòng nhé
vì hệ thống sẽ lấy ngẫu nhiên 1 trong các dòng đó, phân định mỗi khi bạn enter xuống dòng -->
<div class="banner_top">
<a href="http://vnxf.vn/"><img alt="Cộng đồng Xenforo lớn nhất Việt Nam" src="http://vnxf.vn/anh/bn2.png" /></a>
<a href="http://vnxf.vn/"><img alt="Cộng đồng Xenforo lớn nhất Việt Nam" src="http://vnxf.vn/anh/air1_300x250.jpg"></a>
<a href="http://vnxf.vn/"><img alt="Cộng đồng Xenforo lớn nhất Việt Nam" src="https://www.riolindaonline.com/wp-content/uploads/2015/02/banner300.gif"></a>
<a href="http://vnxf.vn/"><img alt="Cộng đồng Xenforo lớn nhất Việt Nam" src="http://dehayf5mhw1h7.cloudfront.net/wp-content/uploads/sites/403/2014/10/22215120/banner-advertise-here-300x250-7.jpg"></a>
</div>
Các bạn có thể đổi css cho phù hợp với site bạn vì code này chỉ giúp bạn xếp các banner.

Blue - VNXF - [email protected]
 

dinhhai

MasterCorporal
Tham gia
28/07/2015
Bài viết
399
Được Like
198
Cảm ơn bác.
Bác có thể làm thế nào mà mỗi khi load trang nó không thay banner ngẫu nhiên mà thay theo thứ tự định sẵn không bác nhỉ?
 
  • Like
Reactions: THB

Blue

Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
912
Được Like
1,532
Cảm ơn bác.
Bác có thể làm thế nào mà mỗi khi load trang nó không thay banner ngẫu nhiên mà thay theo thứ tự định sẵn không bác nhỉ?
Đơn giản lắm, vì code này chia các banner theo line khi enter nên em có thể gắn nhiều banner trên 1 dòng, nó sẽ nhận ra.
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom