안녕하세요,
제 클라이언트로 계시는 분이 라이믹스를 이용한 웹사이트에 광고를 싣고 싶어하셔서,
현재 사용하시는 레이아웃다가 다음과 같은 php 코드를 넣어서 이용하고 있거든요
$.fn.simpleSpy = function (limit, interval) {
limit = limit || 12;
interval = interval || 4000;
return this.each(function () {
// 1. setup
// capture a cache of all the list items
// chomp the list down to limit li elements
var $list = $(this),
items = [], // uninitialised
currentItem = limit,
total = 0, // initialise later on
height = $list.find('> li:first').height();
// capture the cache
$list.find('> li').each(function () {
items.push('<li>' + $(this).html() + '</li>');
});
total = items.length;
$list.wrap('<div class="spyWrapper" />').parent().css({ height : height * limit });
$list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
// 2. effect
function spy() {
// insert a new item with opacity and height of zero
var $insert = $(items[currentItem]).css({
height : 0,
opacity : 0
}).prependTo($list);
// fade the LAST item out
$list.find('> li:last').animate({ opacity : 0}, 1000, function () {
// increase the height of the NEW first item
$insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
// AND at the same time - decrease the height of the LAST item
// $(this).animate({ height : 0 }, 1000, function () {
// finally fade the first item in (and we can remove the last)
$(this).remove();
// });
});
currentItem++;
if (currentItem >= total) {
currentItem = 0;
}
setTimeout(spy, interval)
}
spy();
});
};
잘 되긴 하는데, 문제는 순서대로 계속 나와서, 처음 12개 등록된 배너들만 가장 많이 노출이 되네요. 그래서 li 아이템들을 랜덤으로 뽑고 싶은데, 제가 코딩은 거의 모르는지라 고수님들의 도움을 받고 싶습니다.
어느곳을 수정해야 랜덤하게 li 아이템들이 list 될까요?
0. 해당 코드는 PHP 코드가 아니라 자바스크립트입니다.
1. 다음 코드 추가하시고, simpleSpy() 호출하는 부분 바로 전에 shuffleChildren 호출도 추가하시면 됩니다.
(예를 들어 $("#abc").simpleSpy(5,2000); 처럼 호출했다면 $("#abc").shuffleChildren(); 추가)
$.fn.shuffleChildren = function() { $.each(this.get(), function(index, el) { var $el = $(el); var $find = $el.children(); $find.sort(function() { return 0.5 - Math.random(); }); $el.empty(); $find.appendTo($el); }); };위 코드 출처 - https://css-tricks.com/snippets/jquery/shuffle-children/
적용예제 - https://jsfiddle.net/a8L6noz7/1/
li 자체를 섞어주므로 확실히 랜덤한 순서로 출력됩니다.