Question

功能性：

当用户点击第一张图像时，第二张图像将淡入并显示。第二个图像是第一个图像的子图像。因此，显示的第二个图像必须与第一个图像连接。

例如：有4个图像，它们按数组分组。第一张图片var firstImage= ["image1", "image2", "image3", "image4"] 对于第二张图片var secondImage= ["image1a", "image2a", "image3a", "image4a"]

因此，当我点击“image1”时，相应的淡入图像将是“image1a”

我做了什么：

如上所述：

1。）我将2个不同的图像分组成一个数组 2.）我随机化了第一批图像，并以随机方式显示在列表中。 3.）我试图在点击时将第二张图像附加到第一张图像。

这是我的代码：

var slideDuration = 1200;
var idleTime = 0;
var BrandNameArray = ["http://loremflickr.com/g/320/240/paris,girl/all?", "http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg", "http://loremflickr.com/g/320/240/paris,girl/all?", "http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"];

var OfferArray = ["http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg", "http://loremflickr.com/g/320/240/paris,girl/all?", "http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg", "http://loremflickr.com/g/320/240/paris,girl/all?"];



$(function() {

  //Auto populate into brand container once randomised for each Brand image
  var BrandNameArrayBackup = JSON.parse(JSON.stringify(BrandNameArray));
  for (i = 0; i < $('#list').find('img').length; i++) {
    //To Set random Brand
    var random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
    //Assign Variable to generate random Brands
    var Brand = BrandNameArray[random_BrandIndex];
    BrandNameArray.splice(random_BrandIndex, 1);
    $('#Brand_' + (i + 1)).attr('src', Brand);
    $('#Brand_' + (i + 1)).show();
    console.log(Brand);
  }
  BrandNameArray = BrandNameArrayBackup; //re-assigning values back to array
});

function selectBrand(index) {

  $('#Vivo_BrandDescription').fadeIn({
    duration: slideDuration,
    queue: false
  });

  var chosenBrandIndex = OfferArray[index];
  //Set option clicked to CSS change 
  $('#Description').attr('src', chosenBrandIndex);
  $('#Description').show();
}

function Vivo_BrandDescription() {
  idleTime = 0;

  $("#border_page").fadeOut(function() {
    $("#Vivo_BrandDescription").fadeIn();
  });
}

.Container {
  position: absolute;
  top: 300px;
  left: 300px;
  height: 600px;
  width: 1260px;
  overflow-y: scroll;
}
.innerScroll {
  position: relative;
  width: 1250px;
  height: 600px;
  font-size: 25px;
  color: #8d8989 !important;
  overflow: scroll;
}

<div id="ChooseBrand" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat;z-index=3; top:0px; left:0px;">

  <div class="Container">
    <div id="list" class="innerScroll">
      <!--1st Row-->
      <img id="Brand_1" style="width:284px; height:140px; top:0px; left:0px; border:0px; outline:0px" data-brand="1">
      <img id="Brand_2" style="width:284px; height:140px; top:0px; left:330px; border:0px;" data-brand="2">
      <img id="Brand_3" style="width:284px; height:140px; top:0px; left:650px; border:0px;" data-brand="3">
      <img id="Brand_4" style="width:284px; height:140px; top:0px; left:965px; border:0px;" data-brand="4">

    </div>
  </div>
  <div id="BrandDescription" class="menu" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display:none; top:0px; left:0px; z-index=10;">

    <img id="Description" style="position:absolute; top:124px; left:534px;z-index=11;">
  </div>

问题：

此时，当我点击随机图像时，相应的图像显示不正确。

例如，当我点击“image1”时，生成的图像显示“image4a”而不是“image1a”。所有第一个阵列图像都是随机的。

因此，我做错了什么或没做过。请帮助，谢谢。

单击第一张图像时，第二张图像无法正确显示

0 个答案: