사이트 배너 노출 효과 , 배너 자리바꿈,

웹사이트의 메인페이지를 꾸미다 보면 

여러개의 배너들에게 비슷한 노출율을 제공해 주고 싶은 생각이 들지만 

공간의 한정으로 인해서 

관리자는 소스는 첫번째 등록된 배너만 먼저 노출되고 사용자들에게 어필될 경우가 많다. 

이부분을 javascript 의 배열의 재배열 함수로 

페이지에 뿌릴때 웹페이지가 새로 로드될때마다 다른 배너들의 위치를구현 해 보았다. 

이건 배열 Data 

var small4banner = [ 

{"LinkURL":"http://xxx.com/detail/detail.asp?itm_num=3338800011","ImgURL":"http://xxx.com/main_images/2013/main_banner_l.jpg"},

{"LinkURL":"http://xxx.com/detail/detail.asp?itm_num=3338800012","ImgURL":"http://xxx.com/main_images/2013/main_banner_M.jpg"},

{"LinkURL":"http://xxx.com/detail/detail.asp?itm_num=3338800012","ImgURL":"http://xxx.com/main_images/2013/main_banner_M.jpg"},

{"LinkURL":"http://xxx.com/detail/detail.asp?itm_num=3338800013","ImgURL":"http://xxx.com/main_images/2013/main_banner_R.jpg"}

]

이건 배열을 재배열 하는 함수 

function shuffle(sourceArray) {

    for (var n = 0; n < sourceArray.length - 1; n++) {

        var k = n + Math.floor(Math.random() * (sourceArray.length - n));

        var temp = sourceArray[k];

        sourceArray[k] = sourceArray[n];

        sourceArray[n] = temp;

    }

}

이건 재배열된 이미지를 뿌려주는 하단 로직

shuffle(small4banner);

$.each(small4banner, function(index, value) {

$(".small_lst > li").eq(index).find("a").attr("href",value["LinkURL"]);

$(".small_lst > li").eq(index).find("img").attr("src",value["ImgURL"]);

});

이렇게 조치함으로 

배너들이 일주일 이상 계속 걸려 있어도 

페이지는 늘 바뀐 모습인것 처럼 유지 된다.