이미지 랜덤 스크립트 문의합니다.
본문
검색해보면 랜덤 이미지 스크립트가 있긴있는데..
답변 3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
#a, #b, #c, #d, #e { border: 1px solid #000; width: 500px; height: 100px; }
</style>
<script type="text/javascript">
function random_images(w, h) {
var srcs = [
"http://amazingiceland.is/sites/default/files/inline-images/take%20a%20trip%20500%20x%20100.png",
"https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Basmala.svg/500px-Basmala.svg.png",
"https://www.dsj.org/wp-content/uploads/2015/01/LightIsOn-PrintAds-500x100.png",
"http://www.bmxmafia.com/Images/logos/Mafia_header_footer_images/bmxmafia_logo_500x100.jpg",
"http://shmoko.bg/wp-content/uploads/2017/03/banner500x100.gif",
"http://www.deech.org.uk/GirtonOperatic/images/logo-banner-500x100-2013.jpg"
// ...
];
var idx = Math.floor(Math.random() * srcs.length);
var rtn = '<img src="' + srcs[idx] + '" width="' + w + '" height="' + h + '" />';
return rtn;
};
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("a").innerHTML = random_images(500, 100);
document.getElementById("b").innerHTML = random_images(500, 100);
document.getElementById("c").innerHTML = random_images(500, 100);
document.getElementById("d").innerHTML = random_images(500, 100);
document.getElementById("e").innerHTML = random_images(500, 100);
}, false);
</script>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
</body>
</html>
답변 감사합니다. 음..소스 복사해서 파일로 저장해서 브라우저로 실행은 해봤습니다. 제가 의도하는 바하고는 맞긴한데 좀은 다른것 같기도하고 맞는것 같디호한데 우선 제 작업중인 사이트에 한번은 적용은 해보겠습니디만..그리고 이미지 경로를 꼭 저렇게 절대주소로만 해야하나요? 같은 홈페이지의 같은 경로만 상대경로도 가능할것 같은데 맞나요?
처음부터 질문을 제가 잘 모르고 좀 빼먹어서 저런 고생하셔서 소스를 언급해 주셨으리라 봅니다. 에휴;; 다시 질문의 의도를 정리해보면, 마지막에 a~e의 각 배너이미지에 랜덤으로 배너이미지가 바뀌는것은 맞지만 배너 이미지는 a~e까지 서로 중복되는 배너 이미지가 노출되지 않아야하거든요.
음..소스에서는 잠시 가만보니 배너 이미지가 서로 중복으로 되면서 램덤이 되네요. 즉, a의 위치의 노출된 배너 이미지가 b의 위치에 a와 같은 배너 이미지가 노출되는 중복으로 배너이미지가 노출되네요.
각각의 위치에 노출되는 배너이미지가 서로 중복이 되지 않게 랜덤으로 배너이미지가 노출되게 할순 없을까요?ㅡㅡ;;;
즉, 각 위치에 배치시킨 배너이미지는 각각의 위치에서 배너 이미지들 서로 랜덤되어 노출되게 원하는것이었거든요....
수고해주셨는데..좀은 다른것 같아서요..^^:
제가 스크립트를 좀 만질 줄 알면 제가 다 수정하는건데...에휴..혹시 그렇게 수정이 가능하면 부탁드려도 될까요?
경로는 테스트시 쉽게 확인하시라고 퍼블릭 이미지 구글링 한겁니다.
위치만 올바르다면 절대/상대 상관없습니다.
소스는 새로 다시 올려드렸습니다.
에서 댓글 참고 하시면 될것 같습니다.
제가 원하는 것이 아니네요..제가 처음부터 질문을 좀 잘못한것 같네요.ㅜㅜ;
밑에 답변 주신분도 질문의도를 잘못 올려서 의도한 바와 조금 다른 소스 답변을 주셨네요..에휴;;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
#a, #b, #c, #d, #e { border: 1px solid #000; width: 500px; height: 100px; }
</style>
<script type="text/javascript">
function random_images(args) {
if (args.node.length == args.imgs.length) {
args.imgs.sort(function (a, b) { return 0.5 - Math.random(); });
args.imgs.sort(function (a, b) { return 0.5 - Math.random(); });
for (var i = 0, i_len = args.node.length; i < i_len; i++) {
args.node[i].innerHTML = '<img src="' + args.imgs[i].src + '" width="' + args.imgs[i].width + '" height="' + args.imgs[i].height + '" />';
}
} else {
alert("length is not equal");
}
}
document.addEventListener("DOMContentLoaded", function () {
var params = {
node: [
document.getElementById("a"),
document.getElementById("b"),
document.getElementById("c"),
document.getElementById("d"),
document.getElementById("e")
],
imgs: [
{src: "http://amazingiceland.is/sites/default/files/inline-images/take%20a%20trip%20500%20x%20100.png", width: 500, height: 100},
{src: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Basmala.svg/500px-Basmala.svg.png", width: 500, height: 100},
{src: "https://www.dsj.org/wp-content/uploads/2015/01/LightIsOn-PrintAds-500x100.png", width: 500, height: 100},
{src: "http://www.bmxmafia.com/Images/logos/Mafia_header_footer_images/bmxmafia_logo_500x100.jpg", width: 500, height: 100},
{src: "http://shmoko.bg/wp-content/uploads/2017/03/banner500x100.gif", width: 500, height: 100},
//{src: "http://www.deech.org.uk/GirtonOperatic/images/logo-banner-500x100-2013.jpg", width: 500, height: 100}
]
};
random_images(params);
}, false);
</script>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
</body>
</html>
아..질문의도가 맞는것 같긴 하네요^^ 채택을 우선 해드리겠습니다.
적용은 해봐야겠습니다. 감사합니다.
