Question

我从这里找到了这段代码，但我需要在这个javascript中添加这些内容。

淡化效果
想要显示2行图像，意味着我将添加10张图片。 5图像将显示在第1行，5个图像将显示在第2行。
想要为每张图片添加文字，例如名称和价格
鼠标悬停在图片更改停止

<script>
    var links = [
    "abc.org",
    "def.org",
    "ghi.org",
    "ghi33.org"
    ];
    var images = [
    "https://dmcfebaedy6rh.cloudfront.net/product/front/white/spl5596.360x180.1443167798.jpg",
    "https://dmcfebaedy6rh.cloudfront.net/product/front/white/mt6050.360x180.1430798334.jpg",
    "https://dmcfebaedy6rh.cloudfront.net/product/front/white/pl5087.360x180.1423189940.jpg", 
    "https://dmcfebaedy6rh.cloudfront.net/product/front/white/spl5596.360x180.1443167798.jpg"
    ];
    var i = 0;
    var renew = setInterval(function(){
        if(links.length == i){
            i = 0;
        }
        else {
        document.getElementById("bannerImage").src = images[i]; 
        document.getElementById("bannerLink").href = links[i]; 
        i++;

    }
    },10000);
</script>
<a id="bannerLink" href="abc.org" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="https://d37j5ujucg66b1.cloudfront.net/product/front/white/pl5393.360x180.1456885745.jpg">
</a>

Answer 1

这样一个问题的问题是，我们不知道你的目标是什么。我们需要的是一些代码，以便我们可以看到您的目标。

我相信我们中的任何一个人都可以把一个有用的旋转木马放在一起，但这并不是这个网站的真正含义。这是为了帮助人们学习和解决他们做错了什么或者他们需要做些什么来解决问题。

据说，如果不提供一些代码就写下这些内容会让我觉得不对。

var caraSel = document.querySelector(".simple-image");
var imageSel = document.querySelectorAll(".bannerLink");
var imageSelMax = imageSel.length - 1;
var imageInt = 0;
var imageIntNext = 1;

var renew = setInterval(function() {
  imageSel[imageInt].classList.add("hidden");
  imageSel[imageIntNext].classList.remove("hidden");

  imageSelMax === imageInt ? imageInt = 0 : ++imageInt;
  imageSelMax === imageIntNext ? imageIntNext = 0 : ++imageIntNext;
}, 1000);

caraSel.addEventListener("mouseover", function() {
  clearInterval(renew);
});

caraSel.addEventListener("mouseout", function() {
  renew = setInterval(function() {
    imageSel[imageInt].classList.add("hidden");
    imageSel[imageIntNext].classList.remove("hidden");

    imageSelMax === imageInt ? imageInt = 0 : ++imageInt;
    imageSelMax === imageIntNext ? imageIntNext = 0 : ++imageIntNext;
  }, 1000);
});

.simple-image {
  position: relative;
  width: 360px;
  height: 180px;
}
.bannerLink {
  position: fixed;
  background: #FFF;
  top: 0;
  left: 0;
  will-change: opacity;
  transition: opacity .6s ease-in;
  text-decoration: none;
  color: #000;
}
.bannerLink.hidden {
  opacity: 0;
}

<div class="simple-image">
  <a class="bannerLink" href="abc.org" onclick="void window.open(this.href); return false;">
    <img class="bannerImage" src="https://d37j5ujucg66b1.cloudfront.net/product/front/white/pl5393.360x180.1456885745.jpg">#1
  </a>

  <a class="bannerLink hidden" href="def.org" onclick="void window.open(this.href); return false;">
    <img class="bannerImage" src="https://dmcfebaedy6rh.cloudfront.net/product/front/white/mt6050.360x180.1430798334.jpg">#2
  </a>

  <a class="bannerLink hidden" href="ghi.org" onclick="void window.open(this.href); return false;">
    <img class="bannerImage" src="https://dmcfebaedy6rh.cloudfront.net/product/front/white/pl5087.360x180.1423189940.jpg">#3
  </a>

  <a class="bannerLink hidden" href="ghi33.org" onclick="void window.open(this.href); return false;">
    <img class="bannerImage" src="https://dmcfebaedy6rh.cloudfront.net/product/front/white/spl5596.360x180.1443167798.jpg">#4
  </a>
</div>

加速当然是你明白了。

每隔20秒更改图像Javascript with Rows

1 个答案: