이미지 랜덤으로 섞는방법알려주세요

2023-07-19 (수) 14:45:19 2,449

신고가 접수되어 자동으로 블라인드 된 질문입니다.
원글을 보시려면 를 클릭하세요.

|

답변 4개 / 댓글 4개

$myban[]="https://t.me/BaeJjiSotong ,https://totojob.net/banner1.png ,배찌소통방";
$myban[]="https://t.me/SalesXLeader ,https://totojob.net/banner2.jpg ,세일즈";
$myban[]="https://t.me/totojobs,https://totojob.net/banner.png,배너입점";
//모든 배너를 배열에 담으세요

shuffle($myban); shuffle($myban);
?>

<ul>
<?php foreach($myban as $bann){ list($link, $img, $alt) = explode(",", $bann); ?>
 <li><a href="<?php echo $link;?>" target="_blank"><img src="<?php echo $img;?>" alt="<?php echo $alt;?>"></a></li>
 <?php }?>
 </ul>

Copy
<script>

// Get the <ul> element
var ulElement = document.querySelector('#totohot_bn_ca_1 ul');

// Get all the <li> elements within the <ul>
var liElements = ulElement.getElementsByTagName('li');

// Convert the HTMLCollection to an array for easier manipulation
var liArray = Array.from(liElements);

// Shuffle the array to randomize the order
liArray.sort(function() {
  return 0.5 - Math.random();
});

// Clear the contents of the <ul> element
ulElement.innerHTML = '';

// Append the shuffled <li> elements back to the <ul> element
liArray.forEach(function(li) {
  ulElement.appendChild(li);
});

</script>

아래쪽에 넣으세요.

2023-07-19 (수) 15:19:02

랜덤으로 선택된 배너에 해당하는 링크를 동적으로 설정하기 위해서는 $banner_list 배열과 링크 배열을 연관 시키시면 되지 않을까 합니다.

참고하셔서 원하시는 로직으로 구현해 보세요

Copy
<?php
include_once(G5_THEME_PATH.'/head.php'); //head 파일

// 배너 리스트 배열 생성
$banner_list = array(
    'https://totojob.net/banner1.png',
    'https://totojob.net/banner2.jpg',
    'https://totojob.net/banner.png',
    'https://www.totohot.net/data/totohot_banner/1/67_1681232920',
    // ... 추가적인 배너 URL들을 이어서 나열
);

// 배너에 대응하는 링크 리스트 배열 생성
$banner_links = array(
    'https://t.me/BaeJjiSotong',
    'https://example.com/link2', // 두 번째 배너에 대응하는 링크
    'https://example.com/link3', // 세 번째 배너에 대응하는 링크
    'https://example.com/link4', // 네 번째 배너에 대응하는 링크
    // ... 배너에 대응하는 링크를 이어서 나열
);

// 랜덤한 인덱스 생성
$random_index = array_rand($banner_list);

// 랜덤 배너 URL과 해당 배너에 대응하는 링크 선택
$random_banner_url = $banner_list[$random_index];
$random_banner_link = $banner_links[$random_index];
?>

<!--//메인_index { -->
<?php include(G5_THEME_PATH.'/inc/banner_area/ban_conten.php'); //메인배너 ?><br>
<div class="gxcon_area">
    <?php include(G5_THEME_PATH.'/inc/conten_area/contents_box.php'); //메인컨텐츠 ?>
</div>
<style>
    /* ... 이하 생략 ... */
</style>
<div class="totohot_bn_ca" id="totohot_bn_ca_1">
    <ul>
        <li>
            <a href="<?php echo $random_banner_link; ?>" target="_blank"><img src="<?php echo $random_banner_url; ?>" alt="배너"></a>
        </li>
        <!-- ... 나머지 배너들도 동일하게 수정 ... -->
    </ul>
</div>
<!--// } 메인_index -->
<?php
include_once(G5_THEME_PATH.'/tail.php'); //tail 파일
?>

답변에 대한 댓글 3개

2023-07-19 (수) 15:21:20
랜덤으로 바뀌긴하는데 다같이 똑같은개체로 바뀌어요
예를들어서 banner1.png 배너 이미지에 대응하는 https://example.com/link1 이렇게 랜덤하게 생성이 되지 않는다는 얘기신가요?
혹시 코드를 그냥 복사해서 붙여 넣기 하신거가요? 수정할 부분은 수정을 하셔야 하는데~~
2023-07-19 (수) 15:38:17
<html lang="ko" class="is-pc">

<head>
<meta charset="utf-8">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>토토핫: 토토사이트 꽁머니 파워볼 먹튀검증 커뮤니티 안전놀이터</title>
<meta http-equiv="content-language" content="kr">
<meta name="robots" content="index,follow">
<meta name="title" content="토토핫: 토토사이트 꽁머니 파워볼 먹튀검증 커뮤니티 안전놀이터">
<meta name="author" content="토토핫: 토토사이트 꽁머니 파워볼 먹튀검증 커뮤니티 안전놀이터">
<meta name="description" content="토토핫은 꽁머니와 토토사이트 정보들을 볼 수 있고 먹튀검증이 완료된 안전놀이터 및 파워볼 사이트를 추천드립니다. 먹튀없는 안전한 메이저 토토사이트 이용을 위한 커뮤니티 입니다.
">
<meta name="keywords" content="토토핫,꽁머니,먹튀검증,토토사이트,메이저놀이터,메이저사이트,안전한놀이터,프로토,스포츠토토,파워볼">
<meta property="og:locale" content="ko_KR">
<meta property="og:type" content="website">
<meta property="og:rich_attachment" content="true">
<meta property="og:site_name" content="토토핫: 토토사이트 꽁머니 파워볼 먹튀검증 커뮤니티 안전놀이터">
<meta property="og:title" content="토토핫: 토토사이트 꽁머니 파워볼 먹튀검증 커뮤니티 안전놀이터">
<meta property="og:description" content="토토핫은 꽁머니와 토토사이트 정보들을 볼 수 있고 먹튀검증이 완료된 안전놀이터 및 파워볼 사이트를 추천드립니다. 먹튀없는 안전한 메이저 토토사이트 이용을 위한 커뮤니티 입니다.
">
<meta property="og:keywords" content="토토핫,꽁머니,먹튀검증,토토사이트,메이저놀이터,메이저사이트,안전한놀이터,프로토,스포츠토토,파워볼">
<meta property="og:image" content="https://www.totohot.net/theme/TOTOHOT/storage/image/seo-head_logo.png">
<meta property="og:url" content="https://www.totohot.net/index.php">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="토토핫: 토토사이트 꽁머니 파워볼 먹튀검증 커뮤니티 안전놀이터">
<meta name="twitter:title" content="토토핫: 토토사이트 꽁머니 파워볼 먹튀검증 커뮤니티 안전놀이터">
<meta name="twitter:description" content="토토핫은 꽁머니와 토토사이트 정보들을 볼 수 있고 먹튀검증이 완료된 안전놀이터 및 파워볼 사이트를 추천드립니다. 먹튀없는 안전한 메이저 토토사이트 이용을 위한 커뮤니티 입니다.
">
<meta name="twitter:keywords" content="토토핫,꽁머니,먹튀검증,토토사이트,메이저놀이터,메이저사이트,안전한놀이터,프로토,스포츠토토,파워볼">
<meta name="twitter:image" content="https://www.totohot.net/theme/TOTOHOT/storage/image/seo-head_logo.png">
<meta name="twitter:creator" content="토토핫: 토토사이트 꽁머니 파워볼 먹튀검증 커뮤니티 안전놀이터">
<meta itemprop="name" content="토토핫: 토토사이트 꽁머니 파워볼 먹튀검증 커뮤니티 안전놀이터">
<meta itemprop="description" content="토토핫은 꽁머니와 토토사이트 정보들을 볼 수 있고 먹튀검증이 완료된 안전놀이터 및 파워볼 사이트를 추천드립니다. 먹튀없는 안전한 메이저 토토사이트 이용을 위한 커뮤니티 입니다.
">
<meta itemprop="keywords" content="토토핫,꽁머니,먹튀검증,토토사이트,메이저놀이터,메이저사이트,안전한놀이터,프로토,스포츠토토,파워볼">
<meta itemprop="image" content="https://www.totohot.net/theme/TOTOHOT/storage/image/seo-head_logo.png">
<meta name="apple-mobile-web-app-title" content="토토핫: 토토사이트 꽁머니 파워볼 먹튀검증 커뮤니티 안전놀이터">
<link rel="canonical" href="https://www.totohot.net/index.php">
<link rel="stylesheet" href="https://www.totohot.net/nariya/app/bs4/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="https://www.totohot.net/nariya/app/owlcarousel/assets/owl.carousel.css?ver=2303229">
<link rel="stylesheet" href="https://www.totohot.net/nariya/css/nariya.css" type="text/css">
<link rel="stylesheet" href="https://www.totohot.net/theme/TOTOHOT/css/theme.css?ver=2303229" type="text/css">
<link rel="stylesheet" href="https://www.totohot.net/theme/TOTOHOT/css/font/pc-NexonLv2Gothic.css" type="text/css">
<link rel="stylesheet" href="https://www.totohot.net/theme/TOTOHOT/css/color/Red.css" type="text/css">
<link rel="stylesheet" href="https://www.totohot.net/theme/TOTOHOT/skin/banner/style.css?ver=2303229">
<link rel="stylesheet" href="https://www.totohot.net/theme/TOTOHOT/js/swiper/swiper-bundle.min.css?ver=2303229">
<link rel="stylesheet" href="https://www.totohot.net/theme/TOTOHOT/widget/sidebar_m/widget.css?ver=2303229">
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Noto+Sans+KR:wght@300;400;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://www.totohot.net/js/font-awesome/css/font-awesome.min.css" type="text/css">
<script>
// 자바스크립트에서 사용하는 전역변수 선언
var g5_url = "https://www.totohot.net";
var g5_bbs_url = "https://www.totohot.net/bbs";
var g5_is_member = "";
var g5_is_admin = "";
var g5_is_mobile = "";
var g5_bo_table = "";
var g5_sca = "";
var g5_editor = "";
var g5_plugin_url = "https://www.totohot.net/plugin";
var g5_cookie_domain = ".totohot.net";
</script>
<script src="https://www.totohot.net/nariya/js/jquery-3.5.1.min.js"></script>
<script src="https://www.totohot.net/nariya/js/common.js?ver=2304171"></script>
<script src="https://www.totohot.net/js/wrest.js?ver=2304171"></script>
<script src="https://www.totohot.net/js/placeholders.min.js"></script>
<script src="https://www.totohot.net/nariya/app/bs4/js/bootstrap.bundle.min.js"></script>
<script src="https://www.totohot.net/nariya/js/nariya.js?ver=2304171"></script>
<script src="https://www.totohot.net/theme/TOTOHOT/js/theme.js?ver=
2023-07-19 (수) 14:59:16

$banner_list 배열에는 모든 배너 URL을 나열하고 array_rand() 함수를 사용하여 배열 내에서 랜덤한 인덱스를 선택합니다.

선택된 랜덤 인덱스를 사용하여 해당 배너 URL을 $random_banner_url 변수에 저장하고, 이를 <img> 태그의 src 속성에 적용하여 랜덤하게 배너가 출력...

페이지를 새로고침할 때마다 랜덤한 배너가 보여지게 되며, "추가적인 배너 URL들을 이어서 나열" 이라고 표시된 부분에 원하는 배너 URL들을 추가하여 사용하시면 될것 같습니다.

Copy
<?php
    include_once(G5_THEME_PATH.'/head.php'); //head 파일

    // 배너 리스트 배열 생성
    $banner_list = array(
        'https://totojob.net/banner1.png',
        'https://totojob.net/banner2.jpg',
        'https://totojob.net/banner.png',
        'https://www.totohot.net/data/totohot_banner/1/67_1681232920',
        // ... 추가적인 배너 URL들을 이어서 나열
    );

    // 랜덤한 인덱스 생성
    $random_index = array_rand($banner_list);

    // 랜덤 배너 URL 선택
    $random_banner_url = $banner_list[$random_index];
?>

<!--//메인_index { -->
<?php include(G5_THEME_PATH.'/inc/banner_area/ban_conten.php'); //메인배너 ?><br>
<div class="gxcon_area">
    <?php include(G5_THEME_PATH.'/inc/conten_area/contents_box.php'); //메인컨텐츠 ?>
</div>
<style>
    /* ... 이하 생략 ... */
</style>
<div class="totohot_bn_ca" id="totohot_bn_ca_1">
    <ul>
        <li>
            <a href="https://t.me/BaeJjiSotong" target="_blank"><img src="<?php echo $random_banner_url; ?>" alt="배너"></a>
        </li>
        <!-- ... 나머지 배너들도 동일하게 수정 ... -->
    </ul>
</div>
<!--// } 메인_index -->

<?php
    include_once(G5_THEME_PATH.'/tail.php'); //tail 파일
?>

답변에 대한 댓글 1개

2023-07-19 (수) 15:08:52
사진은 바뀌는데 링크는 고정되있네요 ㅠㅠ

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