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

[Blue]

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é:

<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]

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ỉ?

 

[Blue]

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.

 

[Jindo_Katori]

Lại thêm 01 tác phẩm đẳng cấp nữa của bác @Blue
Cảm ơn bác đã chia sẽ nhé