Tự đổi banner khi reload trang

Admin

Administrator
Thành viên BQT
#1
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 - blue@vnxf.vn
 

Từ khóa phổ biến

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top