배너랜덤으로 노출순서를 지정하고싶습니다.
본문
아래 처럼 그누보드 (영카트) 배너를 만들었는데요
순서가 고정이 아니라. 랜덤으로 하고싶습니다.
<center>
<a href="도메인"><img src="/bn/b_1.jpg" width=""></a>
<a href="도메인"><img src="/bn/b-2.jpg" width=""></a>
<a href="도메인"><img src="/bn/b_3.jpg" width=""></a></p></br>
<a href="도메인"><img src="/bn/b_4.jpg" width=""></a>
<a href="도메인"><img src="/bn/b_5.jpg" width=""></a>
<a href="도메인"><img src="/bn/b_6.jpg" width=""></a></p></br>
<a href="도메인"><img src="/bn/b_7.jpg" width=""></a>
<a href="도메인"><img src="/bn/b_8.jpg" width=""></a>
<a href="도메인"><img src="/bn/b_9.jpg" width=""></a></p></br>
<a href="도메인"><img src="/bn/b_12.jpg" width=""></a>
<a href="도메인"><img src="/bn/b_10.jpg" width=""></a>
<a href="도메인"><img src="/bn/b_11.jpg" width=""></a>
</center>
답변 5
도메인도 다를테니 도메인주소와 이미지를 배열에 넣고 shuffle 돌리는게 좋겠습니다.
// 배열에 담아둡니다.
$array1 = array(array('도메인1','이미지1.jpg','_blank'), array('도메인2','이미지2.jpg','_blank'), array('도메인3','이미지3.jpg','_self').........);
// 위 배열 숫자만큼 순서를 가지고 있는 배열을 만듭니다.
$array2 = array();
for($i=0 ; $i<count($array1) ; $i++) {
$array2[$i] = $i;
}
// 순서배열을 섞어줍니다.
shuffle($array2);
// 뒤섞인 배열순서대로 배너링크를 뿌려줍니다.
for($j = 0 ; $j<count($array2) ; $j++) {
// 배너순서
$b_no = $array2[$j];
// 도메인
$domain = $array1[$b_no][0];
// 이미지
$img = $array1[$b_no][1];
// 새창 또는 자체열기
$target = $array1[$b_no][2];
echo '<a href="'.$domain.'" target="'.$target.'">';
echo '<img src="/bn/'.$img.'">';
echo '</a>';
}
위처럼 $array1 에 다 담아두고..
순서를 저장할 $array2를 만들어서 섞고
배너 갯수만큼 for 문을 돌려서 a 태그를 만들어서 뿌려주면 되겠습니다.
추가로 ..
3개 배너 다음에 각각 <br> 이 들어가야 한다면..
마지막 echo '</a>'; 밑에
$x = $j+1;
if($x % 3 == 0) echo '<br>';
을 추가해 주시면 되겠습니다.
테스트 안해보고 코드 작성한 거라 잘 될지 모르겠네요.
!-->!-->
$rand_arr = array();
for ($i=1; $i<=11; $i++) {
$rand_arr[] = $i;
}
shuffle($rand_arr);
for ($j=0; $j<count($rand_arr); $j++) {
echo "<a href='도메인'><img src='/bn/b_".$rand_arr[$j].".jpg' width=''></a>\n";
}
랜더링된 다음
자바스크립트로 섞어 봤어요
<center>
<a href="도메인"><img src="/bn/b_1.jpg" width=""></a>
<a href="도메인"><img src="/bn/b-2.jpg" width=""></a>
<a href="도메인"><img src="/bn/b_3.jpg" width=""></a></p></br>
<a href="도메인"><img src="/bn/b_4.jpg" width=""></a>
<a href="도메인"><img src="/bn/b_5.jpg" width=""></a>
<a href="도메인"><img src="/bn/b_6.jpg" width=""></a></p></br>
<a href="도메인"><img src="/bn/b_7.jpg" width=""></a>
<a href="도메인"><img src="/bn/b_8.jpg" width=""></a>
<a href="도메인"><img src="/bn/b_9.jpg" width=""></a></p></br>
<a href="도메인"><img src="/bn/b_12.jpg" width=""></a>
<a href="도메인"><img src="/bn/b_10.jpg" width=""></a>
<a href="도메인"><img src="/bn/b_11.jpg" width=""></a>
</center>
<script>
$(function() {
var $bn = $('a:has(img[src^="/bn/"])');
var $wp = $bn.first().parent();
// ES6 (전개연산자, 화살표함수)
var shuffled = [...$bn].map(a => ([Math.random(),a])).sort((a,b) => a[0]-b[0]).map(a => a[1]);
// ES6을 지원하지 않는 IE에서
// var shuffled = Array.prototype.slice.call($bn).map(function(a){return [Math.random(),a]}).sort(function(a,b){return a[0]-b[0]}).map(function(a){return a[1]});
$wp.empty().append($(shuffled)).children(':nth-child(3n)').after($('<br><br>'));
});
</script>
for 문을 기본적으로 아셔야 할 듯 합니다.
for(초기값 ; 횟수 ; 증가) {
}
위처럼 초기값을 $i 변수에 0 으로 준 것이고 ($i = 0)
횟수는 $i<count($array1) 이라고 해서 $array1 변수에 들어있는 갯수만큼 돌린다는 의미입니다. count라는 함수는 뒤에 오는 것의 갯수를 구해줍니다.
증가는 $i++ 이라고 해서 1씩 증가시키는 거구요.
배너가 3개일때 for 문을 3번 사용하는게 아니고
for문 안에 3번 실행하라고 코드를 넣는거죠.
$array1 이라는 배열에 제가 3개를 넣었었죠?
그럼 for문 한번으로 3번 실행된다는 뜻입니다.
for 문은 동일한 반복을 하는 작업에 쓰는 구문입니다.
for($i=0 ; $i<10 ; $i++) {
echo $i*2;
echo '<br>';
}
위 문장을 실행시키면..
0
2
4
6
..
18
이렇게 출력이 되겠네요.. 0부터 10보다 작은 9까지 10번 실행됩니다.
!-->
아래 코드 응용해서 작업해 보세요.
<?php
$a = [];
$a[] = '1,a';
$a[] = '2,b';
$a[] = '3,c';
shuffle($a);
foreach($a as $i) {
list($x, $y) = explode(",",$i);
echo $x,":".$y."<br>";
}