将随机图像插入div。 [英] Insert random image to div.

问题描述

嗨专家..



我正在使用aspx开发一个网站。我的网站基于图库上传。所以我需要像facebook照片上传的东西。当我上传包含图像的文件夹时，它会自动在我的页面上创建一个带有相册名称的div。



下面是我用来插入图片的代码div。

  //  创建DIV BOX  
  var  dvs =  document  .createElement（'  div'）; 
 dvs.style.position =  绝对; 
 dvs.style.top = Vtop +   px; 
 dvs.style.left = Hleft +   px; 
 dvs.style.height =   120px 
 dvs.style.width =   100px; 
 dvs.style.cursor =  指针; 
 dvs.onclick =  function （）{CreateFrame（DivID）}; 
 dvs.setAttribute（'  id'，DivID）; 

  //  创建图片& EMBED IN DIV  
  var  EbdImg =  document  .createElement（'  img'）; 
 EbdImg.setAttribute（'  src'， '  Web_Images / arrow_down.png'）; 
 EbdImg.setAttribute（'  width'， '  100％'）; 
 EbdImg.setAttribute（'  height'， '  100px'）; 
 EbdImg.style.width =   100％ 
 dvs.appendChild（ EbdImg）; 

但问题是，我需要自动将随机图像插入我上传的最新文件夹中的相册，而不是从目录中的现有文件夹。

提前感谢：）

解决方案

假设您有图像列表。代码是这样的 -

  var  imgPath = '  Web_Images /'，
 imageArray = ['  img01.jpg'，'  img02.jpg'，'  img03.jpg'，'  xyz.jpg'，'  abc.jpg']; 
 
  function  getRandomImg（s）{
  var  selectedImg，randomImgIndex ; 
 randomImgIndex =  Math  .floor（ Math  .random（imageArray.length）* imageArray.length ）; 
 selectedImg = imageArray.splice（randomImgIndex， 1 ）; 
  return  selectedImg; 
} 
 
  function  createImages（）{
  var  selectedImg，EbdImg; 
  while （imageArray.length！=  0 ）{
 selectedImg = getRandomImg（ ）; 
 
  //  根据您的需要进行修改 
 EbdImg =  document  .createElement（'  img'） ; 
 EbdImg.src = imgPath + selectedImg; 
} 
} 
 
 createImages（）; 

嗨专家，



我已经解决了这个问题。非常感谢你发布的解决方案，它真的帮助我解决了我所面临的问题。经过一些调整后我在下面制作的是我设法制作的代码。



var imgPath =;

var imageArray = ['' t_0001.jpg''，''t_0002.jpg''，''t_0003.jpg''];



imgPath =''图库/''+ DivID + ''/ thumbs /'';



var selectedImg，EbdImg;

while（imageArray.length！= 0）

{

selectedImg = getRandomImg（）;

}

var EbdImg = document.createElement（''img''）;

EbdImg.setAttribute（''src''，imgPath + selectedImg）;

EbdImg.setAttribute（''width''，''100％''）;

EbdImg.setAttribute（''height''，''100％''）;

EbdImg.style.width =100％

EbdImg.style.borderRadius =1px;

dvs.appendChild（EbdImg）;



imageArray = [''t_0001.jpg ''，''t_0002.jpg''，''t_000 3.jpg''];



函数getRandomImg（s）

{

var selectedImg，randomImgIndex;

randomImgIndex = Math.floor（Math.random（imageArray.length）* imageArray.length）;

selectedImg = imageArray.splice（randomImgIndex，1）;

返回selectedImg;

}



这是我的输出

www.kishamegaevents.com /WebGallery.aspx

Hi experts..

I''m developing a web using aspx. My web is based on gallery uploading. So i need something like on facebook photo upload. When i upload a folder that contain the image it will automatically create a div with the album name on my page.

below is the code that i used to insert image on div.

//CREATE DIV BOX
   var dvs = document.createElement('div');
   dvs.style.position = "absolute";
   dvs.style.top = Vtop + "px";
   dvs.style.left = Hleft + "px";
   dvs.style.height = "120px"
   dvs.style.width = "100px";
   dvs.style.cursor = "pointer";
   dvs.onclick = function(){CreateFrame(DivID)} ;
   dvs.setAttribute('id',DivID);

//CREATE IMAGES & EMBED IN DIV
   var EbdImg = document.createElement('img');
   EbdImg.setAttribute('src','Web_Images/arrow_down.png');
   EbdImg.setAttribute('width','100%');
   EbdImg.setAttribute('height','100px');
   EbdImg.style.width = "100%"
   dvs.appendChild(EbdImg);

But the problem is, i need to insert random image automatically to the album from the latest folder that i upload and not from the existing folder from directory.
thanks in advance :)

解决方案

Assuming you have the list of images. Code goes like this -

var imgPath    = 'Web_Images/',
    imageArray = ['img01.jpg', 'img02.jpg', 'img03.jpg', 'xyz.jpg', 'abc.jpg'];

function getRandomImg(s) {
  var selectedImg, randomImgIndex;
  randomImgIndex= Math.floor(Math.random(imageArray.length)*imageArray.length);
  selectedImg = imageArray.splice(randomImgIndex,1);
  return selectedImg;
}

function createImages() {
  var selectedImg, EbdImg;
  while(imageArray.length != 0) {
    selectedImg = getRandomImg();

    //modify it according to your need
    EbdImg = document.createElement('img');
    EbdImg.src = imgPath + selectedImg;
  }
}

createImages();

Hi Expert,

I have solve the problem. Thanks a lot for the solution that u posted, it really helps me to solve the problem that i faced. After some adjustment i made below is the code i manage to produce.

var imgPath = "";
var imageArray = [''t_0001.jpg'', ''t_0002.jpg'', ''t_0003.jpg''];

imgPath = ''Gallery/'' + DivID + ''/thumbs/'';

var selectedImg, EbdImg;
while(imageArray.length != 0)
{
selectedImg = getRandomImg();
}
var EbdImg = document.createElement(''img'');
EbdImg.setAttribute(''src'', imgPath + selectedImg);
EbdImg.setAttribute(''width'',''100%'');
EbdImg.setAttribute(''height'',''100%'');
EbdImg.style.width = "100%"
EbdImg.style.borderRadius = "1px";
dvs.appendChild(EbdImg);

imageArray = [''t_0001.jpg'', ''t_0002.jpg'', ''t_0003.jpg''];

function getRandomImg(s)
{
var selectedImg, randomImgIndex;
randomImgIndex= Math.floor(Math.random(imageArray.length)*imageArray.length);
selectedImg = imageArray.splice(randomImgIndex,1);
return selectedImg;
}

This is my Output
www.kishamegaevents.com/WebGallery.aspx

这篇关于将随机图像插入div。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！