답변 3개 / 댓글 4개
채택된 답변
+20 포인트
Copy
<!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>
Copy
<!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>답변을 작성하려면 로그인이 필요합니다.
처음부터 질문을 제가 잘 모르고 좀 빼먹어서 저런 고생하셔서 소스를 언급해 주셨으리라 봅니다. 에휴;; 다시 질문의 의도를 정리해보면, 마지막에 a~e의 각 배너이미지에 랜덤으로 배너이미지가 바뀌는것은 맞지만 배너 이미지는 a~e까지 서로 중복되는 배너 이미지가 노출되지 않아야하거든요.
음..소스에서는 잠시 가만보니 배너 이미지가 서로 중복으로 되면서 램덤이 되네요. 즉, a의 위치의 노출된 배너 이미지가 b의 위치에 a와 같은 배너 이미지가 노출되는 중복으로 배너이미지가 노출되네요.
각각의 위치에 노출되는 배너이미지가 서로 중복이 되지 않게 랜덤으로 배너이미지가 노출되게 할순 없을까요?ㅡㅡ;;;
즉, 각 위치에 배치시킨 배너이미지는 각각의 위치에서 배너 이미지들 서로 랜덤되어 노출되게 원하는것이었거든요....
수고해주셨는데..좀은 다른것 같아서요..^^:
제가 스크립트를 좀 만질 줄 알면 제가 다 수정하는건데...에휴..혹시 그렇게 수정이 가능하면 부탁드려도 될까요?