채택완료

배너랜덤으로 노출순서를 지정하고싶습니다.

2021-02-02 (화) 22:54:43 4,259

아래 처럼 그누보드 (영카트) 배너를 만들었는데요

순서가 고정이 아니라. 랜덤으로 하고싶습니다. 

Copy
<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개 / 댓글 5개

채택된 답변
+20 포인트
2021-02-03 (수) 13:29:16

도메인도 다를테니 도메인주소와 이미지를 배열에 넣고 shuffle 돌리는게 좋겠습니다.

Copy
// 배열에 담아둡니다.

$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>'; 밑에 

Copy
$x = $j+1;

if($x % 3 == 0) echo '<br>';

을 추가해 주시면 되겠습니다.

테스트 안해보고 코드 작성한 거라 잘 될지 모르겠네요. 

답변에 대한 댓글 2개

말씀해주신대로 배열을 만들고.
배너 갯수만큼 for 문을 돌려서 a 태그를 만들어서 뿌려주면 되겠습니다. <- 이부분이 이해가 안가서요 ㅠㅠ
배너 갯수가 3개라 하면

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>';
}

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>';
}

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>';
}



이렇게 하는게맞나요 ?!

아래 코드 응용해서 작업해 보세요.

Copy
<?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>";    
}
2021-02-03 (수) 20:53:40

for 문을 기본적으로 아셔야 할 듯 합니다.

for(초기값 ; 횟수 ; 증가) {

}

위처럼 초기값을 $i 변수에 0 으로 준 것이고  ($i = 0)
횟수는 $i<count($array1) 이라고 해서 $array1 변수에 들어있는 갯수만큼 돌린다는 의미입니다. count라는 함수는 뒤에 오는 것의 갯수를 구해줍니다.

증가는 $i++ 이라고 해서 1씩 증가시키는 거구요.

배너가 3개일때 for 문을 3번 사용하는게 아니고

for문 안에 3번 실행하라고 코드를 넣는거죠.

$array1 이라는 배열에 제가 3개를 넣었었죠? 

그럼 for문 한번으로 3번 실행된다는 뜻입니다.

for 문은 동일한 반복을 하는 작업에 쓰는 구문입니다.

Copy
for($i=0 ; $i<10 ; $i++) {

   echo $i*2;

   echo '<br>';

}

위 문장을 실행시키면..

0

2

4

6

..

18

이렇게 출력이 되겠네요.. 0부터 10보다 작은 9까지 10번 실행됩니다.

랜더링된 다음

자바스크립트로 섞어 봤어요

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

답변에 대한 댓글 2개

이건 안되네요 ㅠㅠ 감사합니다.
적어주신대로 적용을해도 순서가 변동되질않습니다 ㅠㅠ
Copy
$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";

}

답변에 대한 댓글 1개

감사합니다

답변을 작성하려면 로그인이 필요합니다.