每20秒更换一次图像Javascript with Row

Question

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

1. 淡入淡出效果

2. ，要显示2行的图像，意味着我将新增10张图像。 5张图片将显示在第一排，5张图片将显示在第二排。

3. 想要为每张照片添加文本例如名称和价格

4. 鼠标放在影像变更停止

<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>

加快，当然是你的想法。